Ollie Block Academy

Styling Blocks

Tips for writing efficient CSS for blocks

Use the generated block class (wp-block-namespace-blockname) as your CSS root and follow BEM methodology for internal elements. This creates unique, maintainable class names that clearly indicate their purpose and block relationship.

Avoid deep Sass nesting that creates high-specificity selectors. Instead, use flat BEM classes that maintain consistent specificity, making theme overrides easier and CSS more maintainable.

Consider using plain CSS in SCSS files since modern CSS features and WordPress tooling reduce Sass necessity. Block stylesheets are typically small and focused, making Sass preprocessing less beneficial.

Back to: Ollie Block Academy > Styling Blocks