Be Responsive: CSS Naming Conventions

This talk 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 and assist the design process.

Transcript

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