WordCamp Sydney: CSS Naming Conventions

This talks compares several naming conventions and the pros and cons of each. From here, we’ll look how these benefits can be applied from the beginning of a project, assist the design process and how they apply to WordPress themes and plugins.

Transcript

1. CSS Naming Conventions Peter Wilson • @pwcc 
 WordCamp Sydney • September 2014
2. What is a naming convention? • Class names • Systematic • Planned flic.kr/p/4zaWdC
3. Components
4. Components
5. Sub-components
6. Sub-components
7. Variants
8. In this talk • BEM • SUIT CSS naming conventions • Advantages • Naming conventions for WordPress
9. BEM by Yandex
10. Block, Element, Modifier • Strict • Meaningful hyphens • Meaningful underscores flic.kr/p/aLvmZ
11. Components .component-name { // hyphen separated // all lower case }
12. Sub-components .component-name__sub-component { // double underscore // hyphen separated // all lower case // includes component’s name }
13. Variants .component-name––variant-name { // double hyphen // hyphen separated // all lower case // includes component’s name }
14. State & Layout
15. The media object
16. The media object .media-object {
 overflow: hidden; //clearfix
 } .media-object__image {
 float: left; 
 } .media-object__body {
 overflow: hidden;
 }
17. 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;
 }
18. The media object <div class=“media-object”> <div class=“media-object__image”>
 <img />
 </div> <div class=“media-object__body”>
 <p>Lorem Ipsum</p>
 </div> </div>
19. The media object variant
20. The media variant .media-object––rev > .media-object__image {
 float: right; 
 } // OR .media-object__image––rev {
 float: right; 
 }
21. The media variant .media-object––rev > .media-object__image {
 float: right; 
 } // OR .media-object__image––rev {
 float: right; 
 }
22. SUIT CSS by Nicolas Gallagher
23. SUIT CSS • Strict • Meaningful hyphens • Utilities • State flic.kr/p/dUXEi5
24. Components .ComponentName { // Pascal case }
25. Sub-components .ComponentName–subComponent { // indicated with hyphen // all one word // camel case (not pascal) // preceded with component’s name }
26. Variant .ComponentName––someVariant { // indicated with double hyphen // camel case (not pascal) // preceded with component’s name ! }
27. Utilities .u–displayBlock { // indicated with .u- prefix // camel case // verbose ! }
28. Utilities .u–cf { // indicated with .u- prefix // camel case // verbose* // can use common abbreviations }
29. State .ComponentName.is-someState { // prefixed with .is- // camel case (not pascal) // state classes are always overloaded ! }
30. Prefixes .pwcc-ComponentName{ // prefixed if needs be // all classes prefixed // .pwcc-u-cf // .pwcc-is-closed }
31. The media object .MediaObject {
 overflow: hidden; //clearfix
 } .MediaObject-image {
 float: left; 
 } .MediaObject-body {
 overflow: hidden;
 }
32. The media object <div class=“MediaObject”> <div class=“MediaObject-image”>
 <img />
 </div> <div class=“MediaObject-body”>
 <p>Lorem Ipsum</p>
 </div> </div>
33. The media variant .MediaObject––rev > .MediaObject-image {
 float: right; 
 } // OR .MediaObject–image––rev {
 float: right; 
 }
34. Bonus Conventions
35. SMACSS By Jonathan Snook smacss.com
36. SMACSS .componentName {} // camel case ! .componentName-subComponent, .componentName-variant {} // hyphen separated, indistinguishable
37. bit.ly/css-mess
38. AMCSS By Glen Maddern, Ben Schwarz, et al amcss.github.io
39. AMCSS <div am-Component=“Variant”> <div am-Component-SubComponent=“Variant”> </div> ! </div>
40. AMCSS [am-Component] { // main component } [am-Component~=“Variant”] { // variant }
41. Advantages
42. Advantages • planning • rules • link code bases
43. Avoiding naming clashes // without a naming convention .permalink { … } ! // using a naming convention .Article-permalink { … } .Comment-permalink { … }
44. Better targeted selectors .permalink { font-style: italic } .comment .permalink { font-style: normal }
45. Better targeted selectors .Article-permalink { font-style: italic } .Comment-permalink { // unneeded }
46. Using ID selectors kills kittens (Aside) flic.kr/p/6T35mX
47. So does nesting in Sass. (Aside) flic.kr/p/8QjgZ2
48. –Me “With a well chosen naming convention, 
 you’re half way to having a CSS Architecture”
49. Advantages for Design
50. Name components • brings planning forward • reenforces it will be a site
51. Think components
52. Plan for the browser • look for patterns • normalise your design • plan for compromise
53. flic.kr/p/4bAYfc
54. flic.kr/p/4bAYfc
55. WordPress Using a CSS naming convention with WordPress
56. Considerations • Easily implemented • Avoid clashes with WP classes
57. Advantages • modular thinking • reduces specificity • reduces the code base
58. 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; }
59. After .u-Icon { -webkit-font-smoothing: antialiased; display: inline-block; font: normal 16px/1 Genericons; vertical-align: text-bottom; }
60. Smaller, Faster, Better CSS flic.kr/p/8YtF15
61. WordPress core class names .some-hyphen-seperated {} .someallonelowercaseword {} .rssSummary {}
62. WordPress core class names .some-hyphen-seperated {} .someallonelowercaseword {} .rssSummary {} /* oh dear, it’s all a bit of a mess */
63. /* ********************** *\ ! No PascalCase in WP core ! \* *** (this is good) *** */
64. Winner: SUIT CSS .ComponentName { … } .ComponentName––variant { … } .ComponentName–subComponent { … } .u-displayBlock { … } .is-closed { … }
65. Winner: SUIT CSS .ComponentName { … } .ComponentName–Variant { … } .ComponentName_SubComponent { … } .u-DisplayBlock { … } .is-Closed { … }
66. SUIT CSS with WordPress • Component names matter • Sub-modules do not • Variants do not • use camel case
67. 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 {}
68. 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 {}
69. 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 {}
70. WordPress Filters How to keep your class names consistent
71. <html class=“no-js"> <head> <script>// pwcc.cc/avoiding-fouc </script> <?php wp_head() ?> </head> <body <?php body_class(); ?>> WordPress body tag
72. <html class=“no-js"> <head> <script>// pwcc.cc/avoiding-fouc </script> <?php wp_head() ?> </head> <body <?php body_class(); ?>> <html class=“no-js"> <head> <script>// pwcc.cc/avoiding-fouc </script> <?php wp_head() ?> </head> <body <?php body_class(); ?>> WordPress body tag
73. <html <?php body_class(“no-js”); ?>> <head> <script>// pwcc.cc/avoiding-fouc </script> <?php wp_head() ?> </head> <body> WordPress html tag
74. WordPress Standard Classes • body/html element • post element • navigation items • comments • captions
75. One Category, Four Tags
76. <html class=“single single-post postid-95 single-format-standard single-author”> ... <ul id=“site-nav”> <li class=“menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-38”> <li class=“menu-item menu-item-type-custom menu-item-object-custom menu-item-92”> </ul> ... <article class=“post-95 post type-post status-publish format-standard hentry category-code tag-html tag-conditional-comments tag-internet-explorer tag-ie8"> One Category, Four Tags
77. –WordPress Codex “A filter function takes … unmodified data, 
 and returns modified data”
78. function pwcc_filter_post_class( $classes ) { // make changes here return $classes; } ! add_filter( ‘post_class’, ‘pwcc_filter_post_class’ ); Filtering post_class
79. function pwcc_filter_post_class( $classes ) { // make changes here return $classes; } ! add_filter( ‘post_class’, ‘pwcc_filter_post_class’ ); Filtering post_class
80. function pwcc_filter_post_class( $classes ) { // make changes here return $classes; } ! add_filter( ‘post_class’, ‘pwcc_filter_post_class’ ); Filtering post_class
81. function pwcc_filter_post_class( $classes ) { // make changes here return $classes; } ! add_filter( ‘post_class’, ‘pwcc_filter_post_class’ ); Filtering post_class
82. 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
83. Search: WordPress Plugin API
84. function pwcc_filter_post_class( $classes ) { // $classes is an array return $classes; } Adding to post_class
85. 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
86. 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
87. 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
88. 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
89. 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
90. One Category, Four Tags
91. <html class=“Template-Singular Template-Singular-Post”> ... <ul class=“Nav”> <li class=“Nav_Item”> <li class=“Nav_Item Nav_Item-Active”> </ul> ... <article class=“hentry Article Article-Post”> One Category, Four Tags
92. <html class=“Template-Singular Template-Singular-Post”> ... <ul class=“Nav”> <li class=“Nav_Item”> <li class=“Nav_Item Nav_Item-Active”> </ul> ... <article class=“hentry Article Article-Post”> One Category, Four Tags
93. <html class=“Template-Singular Template-Singular-Post”> ... <ul class=“Nav”> <li class=“Nav_Item”> <li class=“Nav_Item Nav_Item-Active”> </ul> ... <article class=“hentry Article Article-Post”> <html class=“t-Singular t-Singular-Post”> ... <ul class=“Nav”> <li class=“Nav_Item”> <li class=“Nav_Item Nav_Item-Active”> </ul> ... <article class=“hentry Article Article-Post”> One Category, Four Tags
94. Real World Example
96. D o w hat I say edition
97. CSS Partials • separated by type • base: Sass basics • generic: HTML elements • utilities • components
101. Comment.scss .Comment { … } .Comment–AuthorComment { … } .Comment_Meta { … } .Comment_Name { … } .Comment_Time { … } .Comment_Body { … }
102. Comment.scss $pwcc-Comment-FontSize: 0.8 * $pwcc-Base-FontSize; ! .Comment { @include font-size( $pwcc-Comment-FontSize ); line-height: (24/$pwcc-Comment-FontSize); }
103. Take homes
104. Thank you, any questions? peterwilson.cc • @pwcc