CSS for Drupal Themes: Best Practices 2026

CSS has evolved massively in recent years. Features that previously required preprocessors like Sass are now natively available:

Custom Properties (CSS variables) enable a central design token system. Colors, font sizes and spacing are defined once and referenced everywhere.

Container Queries allow components to respond to the size of their container — not just the viewport width. This makes component-based design more flexible than Media Queries.

Cascade Layers organize specificity in layers. Base styles, theme styles and utility classes are prioritized without specificity conflicts.

These features make CSS more powerful and reduce dependency on build tools. For Drupal themes, this means: less complexity in tooling, more control in the stylesheet.

Drupal comes with its own asset management. CSS files are defined as libraries and loaded only where needed. This is the foundation for performant stylesheets.

At arocom, we structure CSS by components: each UI component has its own stylesheet, included via Drupal's library system. The result: only the CSS needed on a page is loaded there.

Naming conventions like BEM (Block, Element, Modifier) create clarity in the team. Every developer knows where a style is defined and what impact a change will have.

Critical CSS for the above-the-fold area is delivered inline. The rest is loaded asynchronously. This improves the Largest Contentful Paint (LCP) and thus the Core Web Vitals.