3.1 Architecture and Organization
The end-result CSS of a project is generally built from components using Tailwind, SASS, or discrete CSS files in order to meet maintainability and efficiency needs. Regardless of the source of a site’s CSS, CSS should be organized and component-based. This approach keeps related styles together while preventing naming conflicts and specificity issues that can make maintenance difficult.
This component-first thinking applies whether you’re writing utility-first CSS with Tailwind, building modular SASS components, or creating discrete CSS files for individual blocks or page elements. The key is ensuring that styles are scoped to their relevant components and loaded only when those components are actually used on a page.
With WordPress, theme.json serves as the source of CSS root values and custom blocks should load CSS when in use, rather than a site having all styles in one overly-large stylesheet. This component approach creates a more performant browsing experience for site visitors.
1
2
3
4
5
6
7
8
9
10
11
12
13
// WordPress: Component-based CSS loading
function enqueue_block_styles() {
// Only load gallery styles when gallery block is present
if (has_block('acf/image-gallery')) {
wp_enqueue_style('gallery-component', get_theme_file_uri('/assets/css/components/gallery.css'));
}
// Only load contact form styles when contact form is present
if (has_block('acf/contact-form')) {
wp_enqueue_style('contact-form-component', get_theme_file_uri('/assets/css/components/contact-form.css'));
}
}
add_action('wp_enqueue_scripts', 'enqueue_block_styles');
File organization follows a clear hierarchy that separates concerns and makes it easy for developers to locate and modify styles:
1
2
3
4
5
6
7
assets/sass/
├── base/ # Reset, typography, base element styles
├── components/ # Reusable UI components (buttons, forms, cards)
├── layout/ # Grid systems, layout helpers, structural styles
├── pages/ # Page-specific styles when component approach isn't sufficient
├── utilities/ # Single-purpose utility classes
└── vendor/ # Third-party styles that we need to customize