Scribd
Upload
67 views

How To Properly Name Css Classes

The document discusses the Block Element Modifier (BEM) methodology for properly naming CSS classes. It explains that a block is a standalone element, an element is always part of a block, and a modifier changes a block's or element's appearance or behavior. It provides examples of how to write CSS classes using BEM, such as .block, .block__element, and .block--modifier. The document also discusses nesting blocks and when it makes sense to write nested elements as their own reusable blocks.

Uploaded by

Hruday charan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
67 views

How To Properly Name Css Classes

The document discusses the Block Element Modifier (BEM) methodology for properly naming CSS classes. It explains that a block is a standalone element, an element is always part of a block, and a modifier changes a block's or element's appearance or behavior. It provides examples of how to write CSS classes using BEM, such as .block, .block__element, and .block--modifier. The document also discusses nesting blocks and when it makes sense to write nested elements as their own reusable blocks.

Uploaded by

Hruday charan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

George Moller

_georgemoller

HOW TO
PROPERLY
NAME CSS
CLASSES
George Moller
_georgemoller

01 BEM METHODOLOGY

BEM
Block Modifier
e.g

e.g

.btn {

/*...*/

Element .btn--primary {

/*...*/

} e.g

}
.btn__icon {

/*...*/

}
George Moller
_georgemoller

02 BLOCK
A block is an element that is meaningful on it’s own.
George Moller
_georgemoller

03 ELEMENT
Elements are always parts of a block and have no standalone
meaning.

CSS class is formed as the block


name + two underscores +
element name: .block__elem
George Moller
_georgemoller

04 MODIFIER
Think of the modifier as a flag used to change the appearence,
behavior or state.

CSS class is formed as block’s or


element’s name + two dashes:
.block__elem--modifier

.block--modifier
George Moller
_georgemoller

05 BEM: PRACTICAL EXAMPLES


George Moller
_georgemoller

06 BEM: PRACTICAL EXAMPLES


George Moller
_georgemoller

07 BEM: PRACTICAL EXAMPLES


George Moller
_georgemoller

08 BEM: PRACTICAL EXAMPLES

When nesting blocks ask yourself:

Does this nested block make sense on it’s own? if so, write it as a reusable block.

You might also like