Slide 1
Slide 1 text
CSS Naming Conventions
Peter Wilson • @pwcc
WordCamp Sydney • September 2014
Slide 2
Slide 2 text
What is a naming convention?
• Class names
• Systematic
• Planned
flic.kr/p/4zaWdC
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
In this talk
• BEM
• SUIT CSS naming conventions
• Advantages
• Naming conventions for WordPress
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
.media-object {
overflow: hidden; //clearfix
}
.media-object__image {
float: left;
}
.media-object__body {
overflow: hidden;
}
.media-object {
overflow: hidden; //clearfix
}
.media-object__image {
float: left;
}
.media-object__body {
overflow: hidden;
}
Slide 18
Slide 18 text
The media object
![]()
Lorem Ipsum
Slide 19
Slide 19 text
The media object variant
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
The media variant
.media-object––rev > .media-object__image {
float: right;
}
// OR
.media-object__image––rev {
float: right;
}
Slide 22
Slide 22 text
SUIT CSS
by Nicolas Gallagher
Slide 23
Slide 23 text
SUIT CSS
• Strict
• Meaningful hyphens
• Utilities
• State
flic.kr/p/dUXEi5
Slide 24
Slide 24 text
Components
.ComponentName {
// Pascal case
}
Slide 25
Slide 25 text
Sub-components
.ComponentName–subComponent {
// indicated with hyphen
// all one word
// camel case (not pascal)
// preceded with component’s name
}
Slide 26
Slide 26 text
Variant
.ComponentName––someVariant {
// indicated with double hyphen
// camel case (not pascal)
// preceded with component’s name
!
}
Slide 27
Slide 27 text
Utilities
.u–displayBlock {
// indicated with .u- prefix
// camel case
// verbose
!
}
Slide 28
Slide 28 text
Utilities
.u–cf {
// indicated with .u- prefix
// camel case
// verbose*
// can use common abbreviations
}
Slide 29
Slide 29 text
State
.ComponentName.is-someState {
// prefixed with .is-
// camel case (not pascal)
// state classes are always overloaded
!
}
Slide 30
Slide 30 text
Prefixes
.pwcc-ComponentName{
// prefixed if needs be
// all classes prefixed
// .pwcc-u-cf
// .pwcc-is-closed
}
Slide 31
Slide 31 text
The media object
.MediaObject {
overflow: hidden; //clearfix
}
.MediaObject-image {
float: left;
}
.MediaObject-body {
overflow: hidden;
}
Slide 32
Slide 32 text
The media object
![]()
Lorem Ipsum
Slide 33
Slide 33 text
The media variant
.MediaObject––rev > .MediaObject-image {
float: right;
}
// OR
.MediaObject–image––rev {
float: right;
}
Slide 34
Slide 34 text
Bonus Conventions
Slide 35
Slide 35 text
SMACSS
By Jonathan Snook
smacss.com
Slide 36
Slide 36 text
SMACSS
.componentName {}
// camel case
!
.componentName-subComponent,
.componentName-variant {}
// hyphen separated, indistinguishable
Slide 37
Slide 37 text
bit.ly/css-mess
Slide 38
Slide 38 text
AMCSS
By Glen Maddern, Ben Schwarz, et al
amcss.github.io
Slide 39
Slide 39 text
AMCSS
!
Slide 40
Slide 40 text
AMCSS
[am-Component] {
// main component
}
[am-Component~=“Variant”] {
// variant
}
Slide 41
Slide 41 text
Advantages
Slide 42
Slide 42 text
Advantages
• planning
• rules
• link code bases
Slide 43
Slide 43 text
Avoiding naming clashes
// without a naming convention
.permalink { … }
!
// using a naming convention
.Article-permalink { … }
.Comment-permalink { … }
Slide 44
Slide 44 text
Better targeted selectors
.permalink {
font-style: italic
}
.comment .permalink {
font-style: normal
}
Slide 45
Slide 45 text
Better targeted selectors
.Article-permalink {
font-style: italic
}
.Comment-permalink {
// unneeded
}
Slide 46
Slide 46 text
Using ID selectors kills kittens
(Aside)
flic.kr/p/6T35mX
Slide 47
Slide 47 text
So does nesting in Sass.
(Aside)
flic.kr/p/8QjgZ2
Slide 48
Slide 48 text
–Me
“With a well chosen naming convention,
you’re half way to having a CSS Architecture”
Slide 49
Slide 49 text
Advantages for Design
Slide 50
Slide 50 text
Name components
• brings planning forward
• reenforces it will be a site
Slide 51
Slide 51 text
Think components
Slide 52
Slide 52 text
Plan for the browser
• look for patterns
• normalise your design
• plan for compromise
Slide 53
Slide 53 text
flic.kr/p/4bAYfc
Slide 54
Slide 54 text
flic.kr/p/4bAYfc
Slide 55
Slide 55 text
WordPress
Using a CSS naming convention with WordPress
Slide 56
Slide 56 text
Considerations
• Easily implemented
• Avoid clashes with WP classes
Slide 57
Slide 57 text
Advantages
• modular thinking
• reduces specificity
• reduces the code base
Slide 58
Slide 58 text
Before
.genericon:before, .menu-toggle:after, .featured-post:before, .date a:before, .entry-
meta .author a:before, .format-audio .entry-content:before, .comments-link
a:before, .tags-links a:first-child:before, .categories-links a:first-
child:before, .edit-link a:before, .attachment .entry-title:before, .attachment-
meta:before, .attachment-meta a:before, .comment-awaiting-
moderation:before, .comment-reply-link:before, .comment-reply-login:before, .comment-
reply-title small a:before, .bypostauthor > .comment-
body .fn:before, .error404 .page-title:before {
-webkit-font-smoothing: antialiased;
display: inline-block;
font: normal 16px/1 Genericons;
vertical-align: text-bottom;
}
Slide 59
Slide 59 text
After
.u-Icon {
-webkit-font-smoothing: antialiased;
display: inline-block;
font: normal 16px/1 Genericons;
vertical-align: text-bottom;
}
Slide 60
Slide 60 text
Smaller, Faster, Better
CSS
flic.kr/p/8YtF15
Slide 61
Slide 61 text
WordPress core class names
.some-hyphen-seperated {}
.someallonelowercaseword {}
.rssSummary {}
Slide 62
Slide 62 text
WordPress core class names
.some-hyphen-seperated {}
.someallonelowercaseword {}
.rssSummary {}
/* oh dear, it’s all a bit of a mess */
Slide 63
Slide 63 text
/* ********************** *\
!
No PascalCase in WP core
!
\* *** (this is good) *** */
Slide 64
Slide 64 text
Winner: SUIT CSS
.ComponentName { … }
.ComponentName––variant { … }
.ComponentName–subComponent { … }
.u-displayBlock { … }
.is-closed { … }
Slide 65
Slide 65 text
Winner: SUIT CSS
.ComponentName { … }
.ComponentName–Variant { … }
.ComponentName_SubComponent { … }
.u-DisplayBlock { … }
.is-Closed { … }
Slide 66
Slide 66 text
SUIT CSS with WordPress
• Component names matter
• Sub-modules do not
• Variants do not
• use camel case
Slide 67
Slide 67 text
WordPress theme developers
• Only one theme can run at any time
• No need to prefix classes
• Use something like SUIT CSS to avoid clashes
/* Themes */
.Article {}
Slide 68
Slide 68 text
WordPress plugin developers
• Multiple plugins run at a time
• Use SUIT CSS to avoid clashes
• prefix class names with the full plugin slug.
/* Plugins */
.rapid-adn-widget-StatusUpdate {}
Slide 69
Slide 69 text
WordPress plugin developers
• Multiple plugins run at a time
• Use SUIT CSS to avoid clashes
• prefix class names with the full plugin slug.
/* Plugins */
.rapid-adn-widget-StatusUpdate {}
Slide 70
Slide 70 text
WordPress Filters
How to keep your class names consistent
Slide 71
Slide 71 text
// pwcc.cc/avoiding-fouc
>
WordPress body tag
Slide 72
Slide 72 text
// pwcc.cc/avoiding-fouc
>
// pwcc.cc/avoiding-fouc
>
WordPress body tag
Slide 73
Slide 73 text
>
// pwcc.cc/avoiding-fouc
WordPress html tag
Slide 74
Slide 74 text
WordPress Standard Classes
• body/html element
• post element
• navigation items
• comments
• captions
Slide 75
Slide 75 text
One Category, Four Tags
Slide 76
Slide 76 text
...
Slide 77
Slide 77 text
–WordPress Codex
“A filter function takes … unmodified data,
and returns modified data”
Slide 78
Slide 78 text
function pwcc_filter_post_class( $classes ) {
// make changes here
return $classes;
}
!
add_filter( ‘post_class’, ‘pwcc_filter_post_class’ );
Filtering post_class
Slide 79
Slide 79 text
function pwcc_filter_post_class( $classes ) {
// make changes here
return $classes;
}
!
add_filter( ‘post_class’, ‘pwcc_filter_post_class’ );
Filtering post_class
Slide 80
Slide 80 text
function pwcc_filter_post_class( $classes ) {
// make changes here
return $classes;
}
!
add_filter( ‘post_class’, ‘pwcc_filter_post_class’ );
Filtering post_class
Slide 81
Slide 81 text
function pwcc_filter_post_class( $classes ) {
// make changes here
return $classes;
}
!
add_filter( ‘post_class’, ‘pwcc_filter_post_class’ );
Filtering post_class
Slide 82
Slide 82 text
function pwcc_filter_post_class( $classes ) {
// make changes here
return $classes; // must return modifications
}
!
add_filter( ‘post_class’, ‘pwcc_filter_post_class’ );
Filtering post_class
Slide 83
Slide 83 text
Search: WordPress Plugin API
Slide 84
Slide 84 text
function pwcc_filter_post_class( $classes ) {
// $classes is an array
return $classes;
}
Adding to post_class
Slide 85
Slide 85 text
function pwcc_filter_post_class( $classes ) {
// $classes is an array
return $classes;
}
function pwcc_filter_post_class( $classes ) {
// $classes is an array
Adding to post_class
Slide 86
Slide 86 text
function pwcc_filter_post_class( $classes ) {
// $classes is an array
return $classes;
}
function pwcc_filter_post_class( $classes ) {
// $classes is an array
$classes[] = ‘Article’; // add component
Adding to post_class
Slide 87
Slide 87 text
function pwcc_filter_post_class( $classes ) {
// $classes is an array
return $classes;
}
function pwcc_filter_post_class( $classes ) {
// $classes is an array
$classes[] = ‘Article’; // add component
$classes[] = ‘Article-LinkFormat’; // variant
Adding to post_class
Slide 88
Slide 88 text
function pwcc_filter_post_class( $classes ) {
$classes = array(); // $classes is an array
$classes[] = ‘Article’; // add component
$classes[] = ‘Article-LinkFormat’; // variant
return $classes;
}
Overriding post_class
Slide 89
Slide 89 text
add_filter( ‘body_class’, ‘pwcc_filter_body_class’ );
add_filter( ‘post_class’, ‘pwcc_filter_post_class’ );
add_filter( ‘nav_menu_css_class’,
‘pwcc_filter_menu_class’ );
add_filter( ‘comment_class’, ‘pwcc_filter_comment_class’ );
!
Rinse, repeat
Slide 90
Slide 90 text
One Category, Four Tags
Slide 91
Slide 91 text
...
Slide 92
Slide 92 text
...
Slide 93
Slide 93 text
...
Slide 94
Slide 94 text
Real World Example
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
D
o
w
hat I say
edition
Slide 97
Slide 97 text
CSS Partials
• separated by type
• base: Sass basics
• generic: HTML elements
• utilities
• components
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
Comment.scss
.Comment { … }
.Comment–AuthorComment { … }
.Comment_Meta { … }
.Comment_Name { … }
.Comment_Time { … }
.Comment_Body { … }
Slide 102
Slide 102 text
Comment.scss
$pwcc-Comment-FontSize: 0.8 * $pwcc-Base-FontSize;
!
.Comment {
@include font-size( $pwcc-Comment-FontSize );
line-height: (24/$pwcc-Comment-FontSize);
}
Slide 103
Slide 103 text
Take homes
Slide 104
Slide 104 text
Thank you, any questions?
peterwilson.cc • @pwcc