Css naming conventions
Transcript of Css naming conventions
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