1

CSS Naming Conventions

Mark Aplet

2

3

4

CSS is difficult* Specificity Inheritance Cascade Class Names

*For non-css developers

5

6

7

8

Poor Naming Conventions Brittle & easy to break styles Unmaintainable Difficult to collaborate

• Onboard new members

Spaghetti code Inline CSS

9

CSS Methodologies BEM SMACSS SUIT OOCSS

10

CSS MethodologiesPros Reduced conflict Maintainable Team friendly

Cons Verbose Less readable Limited code reuse

11

BEM (Block, Element, Modifier) Common ground for teams Less prone to failure due to brittle naming

conventions Little Specificity/Inheritance issues

12

Block logically and functionally independent component Blocks can be nested inside any other blocks

• Example: head block can include logo, and search block

Blocks should be location agnostic Acts as a namespace

13

Elements Child element of a block that cannot be used

outside of the block If code can be reused, it's a block not element

14

Modifier Defines the appearance or behavior of a block or

element

15

BEM Example.block-name__element-name—modifier-name

. search-results

. search-results__hit-title

. search-results__hit-title--featured

16

Naming Convention Lower case alpha numeric characters Hyphen between words (block-name) Double underscore to separate Blocks from

elements (block-name__elem-name) Double hyphen to separate elements from

modifiers (block-name__elem-name--mod-name)

17

Best Practice Unique Block Names Only style class names Avoid cascading selectors Block names always prepended to elements and

modifiers CSS should be kept flat. Nesting should not be

required

20

Semantic CSS Emphasis on complete separation of concerns HTML5 Hyper-minimal markup CSS l33t

21

OOCSS My first methodology Predictable, performant Too Dry Difficult to change themes Productivity plumited

22

Mark’s Approach Create a plan… then code Work in small modules Namespace or nest module Don’t nest more than 3-4 levels Don’t ration classes or characters Use semantic class names

23

Naming Strategy Content, Context, Module Modifiers Functional Presentational

24

Content or Module Opportunity to be semantic Hard part is not looking at the design Think core content or module Not .more-button – Use .button.more

25

Modifiers or Extenders Extend the base class to include enhanced look

and feel or functionality Namespaced or nested .btn-primary, .btn-secondary, .btn-more

26

Functional Never styled alone Use namespace or nested .active, .disabled, .open, .closed

27

Presentational Styled alone Utility classes Ultra generic .small, .large, .muted, .img-left, .img-right

29

Reuse Review mockups and note similar module Annotate potential class names

30

.list-ruled.list-divided.list-separate

d .more

.headline-related

.header-divider

.header-overstated

.text-muted

31

Lessons Learned Use any methodology, but stick to it Don’t ration classes or characters If you don’t have a plan, your just guessing Look to frameworks or methodologies for patterns