SMACSS

An introduction to SMACSS and its core principles.
Presented at the MercadoLibre Front-end Meetup in October 2014.

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!