Skip to main content

BEM CSS with Bricks Builder

BEM (Block Element Modifier) is a naming convention that makes CSS more readable and maintainable.

BEM Basics​

  • Block: The standalone component (.card)
  • Element: A part of the block (.card__title, .card__image)
  • Modifier: A variation or state (.card--featured, .card__title--large)

Using the ACSS BEM Tool​

ACSS includes a BEM class generator in the structure panel, eliminating manual class name typing.

Workflow​

  1. Select your parent element and assign it a Block class (e.g., testimonial)
  2. Open the structure panel
  3. Use the BEM tool to generate Element classes for children—ACSS will automatically create properly formatted names like testimonial__quote, testimonial__author
  4. Add Modifier classes when you need variations

Where to Write Styles​

  • Keep BEM CSS on the block or section level
  • Use an external stylesheet in WPCodebox or Advanced Themer for larger CSS requirements

Tips​

  • Use ACSS variables (spacing, colors, typography) within your BEM component styles for consistency
  • Keep blocks reusable and context-agnostic
  • Avoid styling at the ID level wherever possible
  • Build components instead of one-off styles