Slide 1
Slide 1 text
CSS Naming Conventions
Peter Wilson • @pwcc
Be Responsive • August 2014
Slide 2
Slide 2 text
What is a naming convention?
• Class names
• Systematic
• Planned
flic.kr/p/fLTwjD
Slide 3
Slide 3 text
Components
Slide 4
Slide 4 text
Components
Slide 5
Slide 5 text
Sub-components
Slide 6
Slide 6 text
Sub-components
Slide 7
Slide 7 text
Variants
Slide 8
Slide 8 text
Popular Naming Conventions
• BEM
• SMACSS
• SUITCSS
Slide 9
Slide 9 text
BEM
by Yandex
Slide 10
Slide 10 text
Block, Element, Modifier
• Strict
• Meaningful hyphens
• Meaningful underscores
flic.kr/p/aLvmZ
Slide 11
Slide 11 text
Components
.component-name {
// hyphen separated
// all lower case
}
Slide 12
Slide 12 text
Sub-components
.component-name__sub-component {
// double underscore
// hyphen separated
// all lower case
// includes component’s name
}
Slide 13
Slide 13 text
Variants
.component-name––variant-name {
// double hyphen
// hyphen separated
// all lower case
// includes component’s name
}
Slide 14
Slide 14 text
State & Layout
Slide 15
Slide 15 text
The media object
Slide 16
Slide 16 text
The media object
.media-object {
overflow: hidden; //clearfix
}
.media-object__image {
float: left;
}
.media-object__body {
overflow: hidden;
}
Slide 17
Slide 17 text
The media object
![]()
Lorem Ipsum
Slide 18
Slide 18 text
The media object variant
Slide 19
Slide 19 text
The media variant
.media-object––rev > .media-object__image {
float: right;
}
// OR
.media-object__image––rev {
float: right;
}
Slide 20
Slide 20 text
The media variant
.media-object––rev > .media-object__image {
float: right;
}
// OR
.media-object__image––rev {
float: right;
}
Slide 21
Slide 21 text
SMACSS
by Jonathan Snook
Slide 22
Slide 22 text
Scalable & Modular Architecture for CSS
• Loose naming convention
• meaningful hyphens
flic.kr/p/aLvmZ
Slide 23
Slide 23 text
Components
.componentName {
// camel case
}
Slide 24
Slide 24 text
Sub-components
.componentName–subComponent {
// indicated with hyphen
// all one word
// camel case
// includes component’s name
}
Slide 25
Slide 25 text
Variants
.componentName–variantName {
// indicated with hyphen
// all one word
// camel case
// includes component’s name
}
Slide 26
Slide 26 text
Layout & state
.layout-grid, .l-grid {
// layout prefixed, dev’s preference
}
.componentName-is-open {
// state prefixed with is
}
Slide 27
Slide 27 text
The media object
.mediaObject {
overflow: hidden; //clearfix
}
.mediaObject-image {
float: left;
}
.mediaObject-body {
overflow: hidden;
}
Slide 28
Slide 28 text
The media object
![]()
Lorem Ipsum
Slide 29
Slide 29 text
The media variant
.mediaObject-rev > .mediaObject-image {
float: right;
}
// OR
.mediaObject-image-rev {
float: right;
}
Slide 30
Slide 30 text
bit.ly/css-mess
Slide 31
Slide 31 text
SUIT CSS
by Nicolas Gallagher
Slide 32
Slide 32 text
SUIT CSS
• Strict
• Meaningful hyphens
• Utilities
• State
flic.kr/p/aLvmZ
Slide 33
Slide 33 text
Components
.ComponentName {
// Pascal case
}
Slide 34
Slide 34 text
Sub-components
.ComponentName–subComponent {
// indicated with hyphen
// all one word
// camel case (not pascal)
// preceded with component’s name
}
Slide 35
Slide 35 text
Variant
.ComponentName––someVariant {
// indicated with double hyphen
// camel case (not pascal)
// preceded with component’s name
!
}
Slide 36
Slide 36 text
Utilities
.u–displayBlock {
// indicated with .u- prefix
// camel case
// verbose
!
}
Slide 37
Slide 37 text
Utilities
.u–cf {
// indicated with .u- prefix
// camel case
// verbose*
// can use common abbreviations
}
Slide 38
Slide 38 text
State
.ComponentName.is-someState {
// prefixed with .is-
// camel case (not pascal)
// state classes are always overloaded
!
}
Slide 39
Slide 39 text
The media object
.MediaObject {
overflow: hidden; //clearfix
}
.MediaObject-image {
float: left;
}
.MediaObject-body {
overflow: hidden;
}
Slide 40
Slide 40 text
The media object
![]()
Lorem Ipsum
Slide 41
Slide 41 text
The media variant
.MediaObject––rev > .MediaObject-image {
float: right;
}
// OR
.MediaObject–image––rev {
float: right;
}
Slide 42
Slide 42 text
Advantages
Slide 43
Slide 43 text
Advantages
• planning
• rules
• link code bases
Slide 44
Slide 44 text
Avoiding naming clashes
// without a naming convention
.permalink { … }
!
// using a naming convention
.Article-permalink { … }
.Comment-permalink { … }
Slide 45
Slide 45 text
Better targeted selectors
.permalink {
font-style: italic
}
.comment .permalink {
font-style: normal
}
Slide 46
Slide 46 text
Better targeted selectors
.Article-permalink {
font-style: italic
}
.Comment-permalink {
// unneeded
}
Slide 47
Slide 47 text
Using ID selectors kills kittens
(Aside)
flic.kr/p/6T35mX
Slide 48
Slide 48 text
So does nesting in Sass.
(Aside)
flic.kr/p/6T35mX
Slide 49
Slide 49 text
–Me
“With a well chosen naming convention,
you’re half way to having a CSS Architecture”
Slide 50
Slide 50 text
Advantages for Design
Slide 51
Slide 51 text
Name components
• brings planning forward
• reenforces it will be a site
Slide 52
Slide 52 text
Think components
Slide 53
Slide 53 text
Plan for the browser
• look for patterns
• normalise your design
• plan for compromise
Slide 54
Slide 54 text
flic.kr/p/4bAYfc
Slide 55
Slide 55 text
flic.kr/p/4bAYfc
Slide 56
Slide 56 text
Real World Example
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
SUIT CSS changes
.ComponentName { … }
.ComponentName––variant { … }
.ComponentName–subComponent { … }
Slide 59
Slide 59 text
SUIT CSS changes
.ComponentName { … }
.ComponentName–Variant { … }
.ComponentName_SubComponent { … }
Slide 60
Slide 60 text
CSS Partials
• separated by type
• base: Sass basics
• generic: HTML elements
• utilities
• components
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Comment.scss
.Comment { … }
.Comment–AuthorComment { … }
.Comment_Meta { … }
.Comment_Name { … }
.Comment_Time { … }
.Comment_Body { … }
Slide 63
Slide 63 text
Comment.scss
.Comment {
@include font-size(14/16);
line-height: (24/14);
display: block;
}
Slide 64
Slide 64 text
Take homes
Slide 65
Slide 65 text
Thank you, any questions?
peterwilson.cc • @pwcc