Defensive Sass - Modular styles for the modern web

Slides for a talk on modular Sass I gave at BlendConf, September 2013.

Articles about Modular CSS: http://thesassway.com/modular-css
CodePen examples here: http://codepen.io/collection/lmkqe
BlendConf: http://blendconf.com

Transcript

1. SASS!!
   Defensive
   Modular styles for
   the modern web
   @johnwlong • BlendConf 2013
   

   View Slide

2. Help & Feedback
   http://uservoice.com/touchpoint-toolkit
   

   View Slide

3. TheSassWay
   Latest news on Sass + Compass
   @
   

   View Slide

4. SMACSS
   smacss.com
   BEM
   bem.info
   OOCSS
   oocss.org
   

   View Slide

5. MODULAR CSS
   An example
   

   View Slide

6. Simple Menu
   

   View Slide

7. 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)
   @include border-radius(3px);
   @include border-top-left-radius(0);
   display: none;
   position: absolute;
   
   
   File
   
   Open
   Save
   Save as...
   Close
   
   Exit
   
   
   ...
   
   http://bit.ly/menu-1 1
   

   View Slide

8. 
   
   File
   
   Open
   Save
   Save as...
   Close
   
   Exit
   
   
   ...
   
   .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
   

   View Slide

9. 
   
   File
   
   Open
   Save
   Save as...
   Close
   
   Exit
   
   
   ...
   
   .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
   

   View Slide

10. Learn to think in objects.
    Not selectors.
    

    View Slide

11. Parent-Child
    Parent .tableview
    Child .tableview-item
    Grandchild .tableview-item-cell
    

    View Slide

12. TableView
    

    View Slide

13. 
    
    
    
    General
    
    
    ...
    
    http://bit.ly/modular-tableview
    

    View Slide

14. 
    ...
    
    
    
    Wi-Fi
    John's Airport
    
    
    ...
    
    http://bit.ly/modular-tableview
    

    View Slide

15. 
    
    
    
    Airplane Mode
    
    OnOff
    
    
    
    ...
    
    http://bit.ly/modular-tableview
    

    View Slide

16. Plural-Parent Pattern
    Parent .faqs
    Child .faq
    Grandchild .faq-title
    

    View Slide

17. Use the parent-child pattern:
    (Don’t enforce it.)
    Declare hierarchy.
    

    View Slide

18. Subclassing
    Object
    .button
    .item
    Subclass
    .dropdown-button
    .ticket-item
    Child .ticket-title
    

    View Slide

19. .button { ... }
    .next-button { ... }
    .previous-button { ... }
    .dropdown-button { ... }
    .select-button { ... }
    Button
    Back
    Next
    Dropdown
    Select
    http://bit.ly/modular-subclassing
    Buttons
    

    View Slide

20. Subclassing with @extend
    .button { ... }
    .dropdown-button { @extend .button; }
    ...
    .button { ... }
    .dropdown-button { ... }
    ...
    Standard CSS
    Extending
    Two classes
    One class
    

    View Slide

21. Use subclasses to declare
    inheritance.
    (An object should have the properties of another.)
    

    View Slide

22. Object .item
    Contextual
    .ticket .item
    .article .item
    Child
    .item .title
    .ticket .item .title
    Contextual
    

    View Slide

23. .item { ... }
    .ticket .item { ... }
    .ticket .item .title { ... }
    
    
    ...
    
    
    Contextual
    

    View Slide

24. .item .item
    .ticket-item
    .article-item
    .ticket .item
    .article .item
    .item-title
    .ticket-item-title
    .item .title
    .ticket .item .title
    Subclassing vs. Contextual
    

    View Slide

25. Much more modular.
    Require structured
    markup.
    (Can be useful for
    theming)
    Subclassing vs. Contextual
    

    View Slide

26. Structural requirements on markup
    (At all costs. With a few exceptions.)
    should be avoided.
    

    View Slide

27. Modifiers
    Positive .has-menu
    Negative .no-border, .no-margin
    State .is-selected, .is-active
    Other .primary, .secondary
    

    View Slide

28. 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!
    

    View Slide

29. Specific Modifiers
    .button {
    &:hover { ... }
    &.primary { ... }
    &.secondary { ... }
    &.small { ... }
    &.large { ... }
    &.is-disabled, &[disabled] { ... }
    }
    Use nesting &
    the ampersand
    operator
    

    View Slide

30. Use modifiers to
    (Or state.)
    Change attributes!
    

    View Slide

31. Modifiers vs. Subclasses
    Better for small clearly
    defined changes.
    Better for major changes
    or to declare type-of
    semantics.
    

    View Slide

32. 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
    

    View Slide

33. Modular
    Typography
    

    View Slide

34. Modular Typography
    http://bit.ly/modular-typography
    

    View Slide

35. .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
    

    View Slide

36. .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
    

    View Slide

37. (Use modifiers for one-offs.)
    Scope typography
    with a single class.
    

    View Slide

38. Reset
    

    View Slide

39. It’s easy
    @import “compass”;
    @include global-reset;
    

    View Slide

40. Reset vs. Normalize
    Zeros out styles on all
    elements.
    Normalizes styles across
    browsers so that all
    browsers share a similar
    stylesheet.
    

    View Slide

41. markup independence.
    A global reset gives true
    (And is therefore best, IMHO.)
    

    View Slide

42. What about SASS?
    

    View Slide

43. MODULAR SASS
    Well written
    is just good CSS.
    

    View Slide

44. Structuring a Sass project
    http://bit.ly/structure-a-sass-project
    partials/
    |-- _alerts.scss # Pluralize partials.
    |-- _buttons.scss
    |-- _checkboxes.scss # Include: object,
    |-- _choices.scss # subclasses, & modifiers
    |-- _countdowns.scss
    |-- _forms.scss
    |-- _icons.scss
    ...
    

    View Slide

45. Closing Thoughts
    

    View Slide

46. IDs or tags.
    Don’t style with
    (Simple class-based selectors are better.)
    

    View Slide

47. Contextual styles are
    (Avoid nesting like the plague.)
    mostly evil!!
    

    View Slide

48. MoarRR markup.
    (Turns out it’s much easier to maintain.)
    Less styles and
    

    View Slide

49. Minimizing
    Dependencies.
    Modularity is mostly about
    (For reusable code.)
    

    View Slide

50. SMACSS
    smacss.com
    BEM
    bem.info
    OOCSS
    oocss.org
    TheSassWay
    @
    thesassway.com
    

    View Slide

51. Thanks!
    http://codepen.io/collection/lmkqe
    http://bit.ly/defensive-sass-sept-2013
    Modular CSS examples:
    Presentation:
    

    View Slide