SMACSS Your Sass Up

I often ask myself these questions: Will this code be easy for the others to edit? Does it scale? Can I forget it and change it later without being lost?

While Scalable and Modular Architecture for CSS (SMACSS) is just one methodology, the principals of modular CSS are applicable to sites large and small. Using a modular approach in tandem with Sass can greatly improve development efficiency and project maintenance. I'll discuss specific techniques, such as selector inheritance and interpolation, that can greatly reduce the amount of code written. Your code will be more portable, making it easier to use code on other projects.

Transcript

1. smacss
   your up
   

   View Slide

2. @minamarkham
   

   View Slide

3. View Slide

4. “I need two demo sites”
   “And I need them
   in two days”
   

   View Slide

5. View Slide

6. CSS is easy.
   

   View Slide

7. CSS is easy.
   hard
   

   View Slide

8. View Slide

9. View Slide

10. CSS is bullshit.
    

    View Slide

11. Modular CSS
    

    View Slide

12. Focusing on creating healthy
    front-end modules instead of
    complete pages can help
    break complex page layouts
    into reusable solutions.”
    “
    - Dave Rupert
    

    View Slide

13. View Slide

14. View Slide

15. small pieces
    independent
    portable
    

    View Slide

16. Navigation, Tabs, Tables,
    Accordions, Lists, Dropdowns
    Pagination, Buttons, Labels,
    Inputs, Breadcrumbs, etc.
    

    View Slide

17. “Tiny Bootstraps”
    

    View Slide

18. View Slide

19. Module, Pattern,
    Component, etc.
    

    View Slide

20. MVCSS, BEM,
    OOCSS, Suit,
    intuit.css
    

    View Slide

21. SMACSS
    

    View Slide

22. Scalable & Modular
    Architecture for CSS
    

    View Slide

23. View Slide

24. Framework
    

    View Slide

25. categorization
    naming conventions
    depth of applicability
    

    View Slide

26. Categorization
    

    View Slide

27. base
    layout
    modules
    states
    themes
    

    View Slide

28. Base
    CSS resets, default styles
    (ex. html, body, h1, ul, etc)
    

    View Slide

29. Layout
    grid, major components
    ex. header, sidebar, nav
    

    View Slide

30. content
    footer
    header
    

    View Slide

31. sidebar
    header
    main content
    

    View Slide

32. Modules
    content patterns
    (ex. search-box, navigation, content-box)
    

    View Slide

33. promo promo promo promo
    hero
    footer-text
    navigation
    link-list
    

    View Slide

34. States
    module in various states
    

    View Slide

35. View Slide

36. View Slide

37. Themes
    module in various contexts
    

    View Slide

38. jessicahische.is
    

    View Slide

39. Naming
    Conventions
    

    View Slide

40. Base
    h1, h2, p, a, etc.
    

    View Slide

41. Layout
    .layout-*, .l-*
    

    View Slide

42. Module
    .
    

    View Slide

43. Module
    .button
    

    View Slide

44. Sub-module
    .-
    

    View Slide

45. Sub-module
    .button-secondary
    

    View Slide

46. State
    .is-*
    

    View Slide

47. Theme
    .theme-*
    

    View Slide

48. Theme
    .theme-*
    

    View Slide

49. Depth of
    Applicability
    

    View Slide

50. header#top-menu > nav > ul > li a
    + div > ul > li > ul li:hover > a {…}
    

    View Slide

51. 10 generations!
    

    View Slide

52. http://specificity.keegan.st/
    Specificity = 0,1,1,11
    , , ,
    

    View Slide

53. header#top-menu > nav > ul > li a
    + div > ul > li > ul li:hover > a {…}
    

    View Slide

54. header#top-menu > nav > ul > li a
    + div > ul > li > ul li:hover > a {…}
    

    View Slide

55. .nav-subitem
    

    View Slide

56. http://specificity.keegan.st/
    Specificity = 0,0,1,0
    , , ,
    

    View Slide

57. .nav-subitem > a
    

    View Slide

58. http://specificity.keegan.st/
    Specificity = 0,0,1,1
    , , ,
    

    View Slide

59. child selectors
    class selectors
    naming conventions
    

    View Slide

60. Recap
    

    View Slide

61. categorize css rules
    meaningful names
    shallow selectors
    

    View Slide

62. add some
    

    View Slide

63. not SASS
    

    View Slide

64. Namespacing
    

    View Slide

65. the almighty ampersand
    

    View Slide

66. .btn {
    &:hover {…}
    }
    

    View Slide

67. .btn:hover {…}
    

    View Slide

68. .btn {
    form & {…}
    }
    

    View Slide

69. form .btn {…}
    

    View Slide

70. &- or &_
    

    View Slide

71. .btn {
    &-secondary {…}
    &_secondary {…}
    }
    .btn
    

    View Slide

72. .btn-secondary {…}
    .btn_secondary {…}
    

    View Slide

73. nesting
    

    View Slide

74. inception rule
    

    View Slide

75. < 3 levels deep
    

    View Slide

76. .btn {
    &-secondary {
    &-icon {…}
    }
    }
    secondary
    .btn
    

    View Slide

77. .btn-secondary {…}
    .btn-secondary-icon {…}
    

    View Slide

78. .btn {…}
    .btn-large {…}
    !
    
    

    View Slide

79. @extend
    all the things!
    

    View Slide

80. .btn {…}
    .btn-large {@extend .btn;}
    !
    
    

    View Slide

81. %btn {…}
    .btn-large {@extend %btn;}
    !
    
    

    View Slide

82. don’t @extend
    between modules
    

    View Slide

83. File Structure
    

    View Slide

84. @import
    

    View Slide

85. 01.  Utilities  
    @import  'global';  
    @import  'functions';  
    @import  'mixins';  
    @import  'helpers';
    utilities/_index.scss
    Variables, mixins, functions, etc.
    Basically anything that doesn’t
    output CSS by itself.
    

    View Slide

86. @import  "lib/susy";  
    @import  "lib/font-­‐awesome";  
    @import  "lib/pesticide";
    utilities/_lib.scss
    Third-party libraries such
    as Susy, Font Awesome,
    Pesticide, and other
    plugins.
    01.  Utilities  
    02.  Libraries  
    

    View Slide

87. @import  ‘normalize';  
    @import  'base';
    base/_index.scss
    CSS resets, Normalize,
    element styles
    01.  Utilities  
    02.  Libraries  
    03.  Base  
    

    View Slide

88. @import  'global';  
    @import  'functions';  
    @import  'mixins';  
    @import  'helpers';
    layout/_index.scss
    Grid styles, major layout
    components (e.g. header, footer,
    sidebar, etc)
    01.  Utilities  
    02.  Libraries  
    03.  Base  
    04.  Layout  
    

    View Slide

89. @import  'btn';  
    @import  'table';  
    @import  'nav';
    modules/_index.scss
    Individual modules, such as
    buttons, navigation, menus, etc.
    01.  Utilities  
    02.  Libraries  
    03.  Base  
    04.  Layout  
    05.  Modules  
    

    View Slide

90. @import  'states';  
    @import  'touch';
    states/_index.scss
    Describe states of being, ex:
    active, collapsed or hidden
    01.  Utilities  
    02.  Libraries  
    03.  Base  
    04.  Layout  
    05.  Modules  
    06.  States  
    

    View Slide

91. utilities/_fonts.scss Web fonts imports & declarations
    01.  Utilities  
    02.  Libraries  
    03.  Base  
    04.  Layout  
    05.  Modules  
    06.  States  
    07.  @font-­‐face
    

    View Slide

92. states/_print.scss Print styles
    01.  Utilities  
    02.  Libraries  
    03.  Base  
    04.  Layout  
    05.  Modules  
    06.  States  
    07.  @font-­‐face  
    08.  Print  
    

    View Slide

93. !important
    

    View Slide

94. View Slide

95. shame.css
    

    View Slide

96. _shame.scss
    

    View Slide

97. 01.  Utilities  
    02.  Libraries  
    03.  Base  
    04.  Layout  
    05.  Modules  
    06.  States  
    07.  @font-­‐face  
    08.  Print  
    09.  Shame
    _shame.scss because hacks happen
    

    View Slide

98. small and
    readable
    

    View Slide

99. mina.so/sassyStarter
    

    View Slide

100. Theming
     

     View Slide

101. @mixin theme($name) {
     @if $theme == $name {
     @content; } }
     

     View Slide

102. $theme:
     rebeccapurple
     

     View Slide

103. @include theme($rebeccapurple)
     

     View Slide

104. View Slide

105. refactor
     all the things!
     

     View Slide

106. View Slide

107. refactor
     all the things?
     

     View Slide

108. Baby steps
     

     View Slide

109. extract components
     create variables
     apply naming conventions
     nest and @extend
     

     View Slide

110. mina.so/smacss-menu
     

     View Slide

111. Before: 161 lines
     After: 97 lines
     

     View Slide

112. Recap
     

     View Slide

113. namespace with
     ampersands & @extends
     break modules into partials
     refactor in chunks
     

     View Slide

114. Resources
     

     View Slide

115. smacss.com
     

     View Slide

116. sass-lang.com
     

     View Slide

117. sassmeister.com
     

     View Slide

118. thanks!
     mina.so/smacss
     @minamarkham
     

     View Slide