Understanding Modular CSS

From my presentation at the online Sass Summit 2014.

Abstract:

We’ve all found ourselves deep in the heart of a CSS project struggling with mangled CSS selectors, an array of disparately named files, and a deep and nagging feeling that perhaps our markup is not symantic as it should be. But a new hero is arising in CSS-land: Modular CSS.

You may know him by one of his many names. SMACSS, Object-Oriented CSS, or BEM. Only he has the power to untangle our worst CSS nightmares. Only he can help us lay a foundation for large CSS projects.

In this talk, John Long will delve deep into his bag of tricks to share practical advice about structuring your CSS. We’ll talk about a number of helpful principles for simplifying your CSS and look at how modular CSS applies within the context of Sass. You will walk away challenged with something to apply to your current CSS project.

See also:
* http://bit.ly/css-for-grownups
* https://speakerdeck.com/jlong/refactoring-css-programming-principles-for-designers
* http://thesassway.com/modular-css

Transcript

1. Modular CSS Making stylesheets flexible! Understanding @johnwlong Sass Summit 2014 #modularcss
3. www.thesassway.com
4. www.uservoice.com
5. SMACSS smacss.com BEM bem.info OOCSS oocss.org
6. Why MODULAR CSS?
7. “It’s almost a challenge to find a development team that’s working on a codebase that’s more than a couple of years old where the CSS isn’t the most frightening and hated part of that system.” Andy Hume CSS for Grownups SXSW Interactive, 2012 bit.ly/css-for-grownups
8. MODULAR CSS An example
9. Simple Menu
10. ul.menubar { background: white; @include box-shadow(rgba(black, 0.2) 0 1 list-style: none; font-size: 14px; padding: 0 10px; > li { display: inline-block; position: relative; > a { color: black; display: block; padding: 10px 14px; text-decoration: none; &:hover { background: #29a7f5; color: white; } } > ul { @include box-shadow(rgba(black, 0.5) 0 @include border-radius(3px); @include border-top-left-radius(0); display: none; position: absolute; <ul class="menubar"> <li> <a href="#">File</a> <ul> <li><a href="#">Open</a></li> <li><a href="#">Save</a></li> <li><a href="#">Save as...</a></li> <li><a href="#">Close</a></li> <li class="separator"></li> <li><a href="#">Exit</a></li> </ul> </li> ... </ul> http://bit.ly/menu-1 1
11. <ul class="menubar"> <li> <a class="menubar-item" href="#">File</a> <ul class="menu" > <li><a class="menu-item" href="#">Open</a></li> <li><a class="menu-item" href="#">Save</a></li> <li><a class="menu-item" href="#">Save as...</a></li> <li><a class="menu-item" href="#">Close</a></li> <li class="menu-separator"></li> <li><a class="menu-item" href="#">Exit</a></li> </ul> </li> ... </ul> .menubar { background: white; @include box-shadow(rgba(black, 0.2) 0 1 list-style: none; font-size: 14px; padding: 0 10px; > li { display: inline-block; position: relative; } } .menubar-item { color: black; display: block; padding: 10px 14px; text-decoration: none; &:hover { background: #29a7f5; color: white; } } .menu { @include box-shadow(rgba(black, 0.5) 0 5 @include border-radius(3px); @include border-top-left-radius(0); 2 http://bit.ly/menu-2
12. <ul class="menubar"> <li class="menubar-item" > <a class="menubar-item-target" href="#">File</a> <ul class="menu" > <li class="menu-item" ><a class="menu-item-target" href="#">Open</a></li> <li class="menu-item" ><a class="menu-item-target" href="#">Save</a></li> <li class="menu-item" ><a class="menu-item-target" href="#">Save as...</a></li> <li class="menu-item" ><a class="menu-item-target" href="#">Close</a></li> <li class="menu-separator"></li> <li class="menu-item" ><a class= "menu-item-target" href="#">Exit</a></li> </ul> </li> ... </ul> .menubar { background: white; @include box-shadow(rgba(black, 0.2) 0 1 list-style: none; font-size: 14px; padding: 0 10px; } .menubar-item { display: inline-block; position: relative; } .menubar-item-target { color: black; display: block; padding: 10px 14px; text-decoration: none; &:hover { background: #29a7f5; color: white; } } 3 http://bit.ly/menu-3
13. Learn to think in objects. Not selectors.
14. Parent-Child Parent .tableview Child .tableview-item Grandchild .tableview-item-cell
15. TableView
16. <ul class="tableview"> <li class="tableview-item"> <a class="tableview-item-target" href="#"> <i class="tableview-item-icon-cell icon-large icon-cogs"></i> <span class="tableview-item-cell h3">General</span> </a> </li> ... </ul> http://bit.ly/modular-tableview
17. <ul class="tableview"> ... <li class="tableview-item"> <a class="tableview-item-target" href="#"> <i class="tableview-item-icon-cell icon-large icon-signal"></i> <span class="tableview-item-cell h3">Wi-Fi</span> <span class="tableview-item-cell text-right quiet">John's Airport</span> </a> </li> ... </ul> http://bit.ly/modular-tableview
18. <ul class="tableview"> <li class="tableview-item"> <a class="tableview-item-target" href="#"> <i class="tableview-item-icon-cell icon-large icon-plane"></i> <span class="tableview-item-cell h3">Airplane Mode</span> <span class="tableview-item-cell text-right"> <select><option>On</option><option selected>Off</option></select> </span> </a> </li> ... </ul> http://bit.ly/modular-tableview
19. Plural-Parent Pattern Parent .faqs Child .faq Grandchild .faq-title
20. Use the parent-child pattern: (Don’t enforce it.) Declare hierarchy.
21. Subclassing Object .button .item Subclass .dropdown-button .ticket-item Subclass Child .ticket-item-title
22. .button { ... } .next-button { ... } .previous-button { ... } .dropdown-button { ... } .select-button { ... } <button class="button">Button</button> <button class="button back-button">Back</button> <button class="button next-button">Next</button> <button class="button dropdown-button">Dropdown</button> <button class="button select-button">Select</button> http://bit.ly/modular-subclassing Buttons
23. Subclassing with @extend .button { ... } .dropdown-button { @extend .button; } <div class=“dropdown-button”>...</div> .button { ... } .dropdown-button { ... } <button class=“button dropdown-button”>...</button> Standard CSS Extending Two classes One class
24. Use subclasses to declare inheritance. (An object should have the properties of another.)
25. Object .item Contextual .ticket .item .article .item Child .item .title .ticket .item .title Contextual
26. .item { ... } .ticket .item { ... } .ticket .item .title { ... } <div class= “ticket”> <div class= “item”> <h3 class= “title”>...</h3> </div> </div> Contextual
27. .item .item .ticket-item .article-item .ticket .item .article .item .item-title .ticket-item-title .item .title .ticket .item .title Subclassing vs. Contextual
28. Much more modular. Require structured markup. (Can be useful for theming) Subclassing vs. Contextual
29. Structural requirements on markup (At all costs. With a few exceptions.) should be avoided.
30. Modifiers Positive .has-menu Negative .no-border, .no-margin State .is-selected, .is-active Other .primary, .secondary
31. Generic Modifiers .is-selected { background: $highlight-color; } .is-hidden { display: none !important; } .float-left { float: left !important; } .float-right { float: right !important; } .mt0 { margin-top: 0 !important; } .ml0 { margin-left: 0 !important; } .ma0 { margin: 0 !important; } .clearfix { @include clearfix; } Important!
32. Specific Modifiers .button { &:hover { ... } &.small { ... } &.large { ... } &.is-disabled, &[disabled] { ... } } Use nesting & the ampersand operator
33. Use modifiers to (Or state.) Change attributes!
34. Modifiers vs. Subclasses Better for small clearly defined changes. Better for major changes or to declare type-of semantics.
35. Naming conventions Object .tableview .ticket .noun Child .tableview-item
 .ticket-title .noun-noun Subclass .multiselect-tableview .priority-ticket .adjective-noun Modifier .is-selected
 .scrollable .prefix-adjective or .adjective
36. Modular Typography
37. Modular Typography http://bit.ly/modular-typography
38. .h1, .h2, .h3, .h4, .h5, .h6 { ... } .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .quiet { color: $quiet-color !important; } .loud { color: $loud-color !important; } .fixed { font-family: $fixed-font-family; } http://bit.ly/modular-typography Modular Typography
39. .typeset { h1 { @extend .h1; margin: 1em 0 0.5em; } h2 { @extend .h2; margin: 1em 0 0.5em; } h3 { @extend .h3; margin: 1em 0 0.5em; } p, ul, ol, pre { margin: 1em 0; }
 ul { list-style: disc; ... } pre, code { @extend .fixed; } ... } http://bit.ly/modular-typography Modular Typography
40. (Use modifiers for one-offs.) Scope typography with a single class.
41. Reset
42. It’s easy @import “compass”; @include global-reset;
43. Reset vs. Normalize Zeros out styles on all elements. Normalizes styles across browsers so that all browsers share a similar stylesheet.
44. markup independence. A global reset gives true (And is therefore best, IMHO.)
45. Never turned off. Styles should be layered on (Use a reset please.)
46. What about SASS?
47. MODULAR SASS Well written is just good CSS.
48. Structuring a Sass project partials/ |-- _alerts.scss # Pluralize partials. |-- _buttons.scss |-- _checkboxes.scss # Include: object, |-- _choices.scss # subclasses, & modifiers |-- _countdowns.scss |-- _forms.scss |-- _icons.scss ...
49. Closing Thoughts
50. IDs or tags. Don’t style with (Simple class-based selectors are better.)
51. Contextual styles are (Avoid nesting like the plague.) mostly evil!!
52. MoarRR markup. (Turns out it’s much easier to maintain.) Less styles and
53. Minimizing
    Dependencies. Modularity is mostly about (For reusable code.)
54. bit.ly/css-for-grownups
55. SMACSS smacss.com BEM bem.info OOCSS oocss.org thesassway.com
56. Thanks! http://codepen.io/collection/lmkqe http://bit.ly/understanding-modular-css Modular CSS examples: Presentation: