SMACSS

 SMACSS

An introduction to SMACSS and its core principles. MercadoLibre Front-end Meetup. October, 2014.

B35b6fc3b6a61787be1b3750511fbd95?s=128

Luciano Battagliero

October 03, 2014
Tweet

Transcript

  1. SMACSS

  2. Hi, there! I’m Luciano Battagliero @battaglr

  3. Scalable and Modular Architecture for CSS MEANING

  4. Jonathan Snook WHO

  5. ~2011 WHEN

  6. A little bit of context BEM ~2009 OOCSS ~2010 SUIT

    CSS ~2012
  7. What it’s not

  8. A framework, a boilerplate or a library

  9. There’s no code

  10. What is it, then?

  11. A series of guidelines, recommendations and advices

  12. It’s a methodology

  13. What’s the goal?

  14. Author organized and structured code

  15. Easier to build, maintain and scale

  16. Okay, got it! Let’s dive into that “smacks” thing

  17. Categoriza- tion

  18. Every code-base needs some organization

  19. One of the core aspects is categorization

  20. There are five categories

  21. Base, layout, module, state and theme

  22. Base

  23. The low-level defaults, or the global scope if you prefer

    it
  24. body { margin: 0; }

  25. b, strong { font-weight: bold; }

  26. *, *::before, *::after { box-sizing: border-box; }

  27. Using things like `reset.css` or `normalize.css` It’s okay to use

    them as long as you know what they do, and don’t remain as a black-box kind of stuff
  28. Layout

  29. The main building blocks of a page

  30. Generally defining structure-related styles

  31. Based on reuse, we can divide them into major and

    minor
  32. Major layouts

  33. #header { … }

  34. #sidebar { … }

  35. #footer { … }

  36. To `id`, or not to `id` There’s no real advantage

    on using an `id` over a `class`, and you will be avoiding a potential specificity-related headache
  37. Minor layouts

  38. #header { … } .l-fixed #header { … }

  39. .l-grid { … }

  40. Namespacing With the exception of `id` selectors, the recommendation is

    to namespace layouts using an `l-` prefix
  41. Nesting Layouts will mainly contain modules, although they can contain

    other layouts too
  42. Module

  43. The reusable blocks of a page

  44. Should be built to work as stand-alone blocks

  45. Providing flexibility and context independence

  46. Building modules

  47. Avoid element selectors

  48. <div class="folder"> <span>42 KB</span> </div>

  49. .folder span { … }

  50. /* This may be a better idea */ .folder >

    span { … }
  51. <div class="folder"> <span>42 KB</span> <span>01/01/2021</span> </div>

  52. .folder > span { … } .folder > span +

    span { … }
  53. <div class="folder"> <span>42 KB</span> <span>01/01/2021</span> <span>John Doe</span> </div>

  54. .folder > span { … } .folder > span +

    span { … } .folder > span:last-child { … }
  55. <div class="folder"> <span class="folder-size">42 KB</span> <span class="folder-date">01/01/2021</span> <span class="folder-owner">John Doe</span>

    </div>
  56. .folder-size { … } .folder-date { … } .folder-owner {

    … }
  57. Kind of a bold statement You can use element selectors,

    but only if they can and will be predictable; also avoid going more than one level deeper
  58. Namespacing Descendant elements of a module use its name as

    a prefix
  59. Subclass modules

  60. Modifies certain styles of a module

  61. .nav { … } .nav > li { … }

  62. .nav { … } .nav > li { … }

    #sidebar .nav { … } #sidebar .nav > li { … }
  63. .nav { … } .nav > li { … }

    .nav-stacked { … } .nav-stacked > li { … }
  64. <ul class="nav">…</ul> <ul class="nav nav-stacked">…</ul>

  65. Namespacing Subclass modules use as a prefix the name of

    the base module
  66. Nesting Modules will be inside layouts, although they can be

    inside other modules, too
  67. State

  68. Describes modules or layouts in a particular state

  69. Subclass modules are applied at render-time and will not change

    on run-time
  70. States may be applied at render or run-time and are

    likely to be modified at run-time
  71. States are most likely triggered by user’s actions

  72. <a class="button is-hidden">…</a>

  73. .is-hidden { display: none !important; }

  74. <a class="tab is-tab-active">…</a>

  75. .tab { … } .is-tab-active { … }

  76. Namespacing Global states are prefixed with `is-`, while scoped states

    are prefixed with `is-` followed by the module or layout name
  77. Theme

  78. The different variations of look and feel

  79. Can affect rules of any category

  80. /* On buttons.css */ .button { border: 1px solid; }

  81. /* On theme-navy.css */ .button { border-color: #001f3f; }

  82. Depth of applicability

  83. The number of generations that are affected by a given

    rule
  84. section#contact ul.details li { … }

  85. #contact .details li { … }

  86. /* Depth of 3 */ section#contact ul.details li { …

    } /* Depth of 3 */ #contact .details li { … }
  87. Heads up! Don’t confuse depth of applicability with specificity

  88. Keeping the depth as low as possible

  89. Increases the flexibility and makes the code easier to reuse

  90. Avoids relying heavily on a specific HTML structure

  91. Lowers the specificity

  92. #footer form { padding: .625em; } #footer form > input

    { display: inline-block; }
  93. #footer form, #sidebar form { padding: .625em; } #footer form

    > input, #sidebar form > input { display: inline-block; }
  94. .search { padding: .625em; } .search > input { display:

    inline-block; }
  95. .search { padding: .625em; } .search-input { display: inline-block; }

  96. .panel > div, .panel > ul, .panel > ol {

    padding: .75em; }
  97. .panel-body { padding: .75em; }

  98. That’s not just it!

  99. There’s a lot more about SMACSS. Go to smacss.com and

    find out!
  100. Questions?

  101. Thanks!