Download as PDF, PPTX
Uploaded byScott Vandehey
What is Modular CSS?
This document discusses the benefits of modular CSS and different methodologies for implementing it. It notes that CSS at scale can be difficult to understand, reuse, and maintain without modularity. It then explains Object-Oriented CSS (OOCSS), Block Element Modifier (BEM), and Scalable and Modular Architecture for CSS (SMACSS) as approaches for creating reusable, self-contained CSS modules. The key principles across these methodologies are separating components into logical blocks, elements, and modifiers; using descriptive naming conventions; and avoiding nesting and IDs. Following modular best practices makes CSS more predictable, maintainable, and performant at any scale.
More Related Content
![Number_Guessing_Game_Dsbsbssbzboc[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/numberguessinggamedoc1-251206215042-a076fc05-thumbnail.jpg?width=640&height=640&fit=bounds)
What is Modular CSS?
- 1. Modular CSSScott Vandehey —@spaceninja — Devsigner 2016
- 2.
- 3. CSS at Scale isDifficult
- 4. –Nicolas Gallagher, @necolas “Replace‘can you build this?’ with ‘can you maintain this without losing your minds?’” goo.gl/ZHCkDu
- 5. goo.gl/NcVzZ3 Difficult to Understand <divclass=“box profile pro-user"> <img class="avatar image" /> <p class="bio">...</p> </div>
- 6. Difficult to Reuse •You want to re-use a style from another page, but it’s written in a way that only works on that page • You don’t want to break the original, so you duplicate the code • Now you have two problems
- 7. Difficult to Maintain •You change the markup and the whole thing breaks • You want to change a style on one page and it breaks on another • You try to override the other page, but get caught in a specificity war
- 8. Two CSS propertieswalk into a bar. A table in a bar across town collapses. Thomas Fuchs @thomasfuchs goo.gl/wScTMY
- 9. Modularity What does thateven mean?
- 10. –Harry Roberts, @csswizardry “Codewhich adheres to the separation of concerns can be much more confidently modified, edited, extended, and maintained because we know how far its responsibilities reach. We know that modifying layout, for example, will only ever modify layout—nothing else.” goo.gl/saNjgt
- 11.
- 12.
- 13. Remind you ofanything? credit: Alan Chia, goo.gl/KwJ17v
- 14.
- 15. Media Block Smaller Subheading Loremipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Media Block Right Smaller Subheading Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna “The Media Object Saves Hundreds of Lines of Code,” goo.gl/3bi2fS
- 16.
- 17.
- 18. goo.gl/aqZjc5 OOCSS • Created byNicole Sullivan in 2009 based on her work at Yahoo • Key concept: Objects are reusable patterns whose visual appearance is not determined by context
- 19. –Nicole Sullivan, @stubbornella “aCSS ‘object’ is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site.” credit: John Morrison, goo.gl/AZBz7y
- 20. goo.gl/aqZjc5 OOCSS: Context • Anobject should look the same no matter where you put it • Objects should not be styled based on their context
- 21. goo.gl/aqZjc5 OOCSS: Skins • Abstractthe structure of an object from the skin that is being applied • Create reusable classes for common visual styles like drop shadows
- 22. goo.gl/aqZjc5 OOCSS: Use Classes •Use classes to name your objects and their components so markup can change without impacting style • eg, .site-nav not header ul
- 23. goo.gl/aqZjc5 OOCSS: No IDs •They mess up specificity because they are too strong • They are unique identifiers, which means components built with them are not reusable on the same page
- 24.
- 25. goo.gl/95LCw5 BEM • Created in2009 by Russian internet company Yandex who faced similar problems to Yahoo using CSS at scale • Key concept: Blocks (objects) are made of smaller elements and can be modified (skinned)
- 26. –Varya Stepanova, @varya_en “BEMis a way to modularize development of web pages. By breaking your web interface into components… you can have your interface divided into independent parts, each one with its own development cycle.”
- 27. goo.gl/95LCw5 BEM: Blocks • Logically& functionally independent components • Nestable: Blocks can be nested inside other blocks • Repeatable: An interface can contain multiple instances of the same block
- 28. goo.gl/95LCw5 BEM: Elements • Aconstituent part of a block that can't be used outside of it • For example, a menu item is not used outside the context of a menu block
- 29. goo.gl/95LCw5 BEM: Modifiers • Definesthe appearance and behavior of a block or an element • For instance, the appearance of the menu block may change depending on a modifier that is used on it
- 30.
- 31.
- 32.
- 33.
- 34.
- 35. goo.gl/95LCw5 BEM: Naming • Namesare written in lower case • Words within names are separated by hyphens (-) • Elements are delimited by double underscores (__) • Modifiers are delimited by double hyphens (--) .block-name__elem-name--mod-name
- 36. goo.gl/95LCw5 BEM: Example <a class="btnbtn--big btn--orange" href="#"> <span class="btn__price">$9.99</span> <span class="btn__text">Subscribe</span> </a>
- 37. goo.gl/95LCw5 BEM: No NestedCSS • Nested selectors increase specificity, making code reuse more difficult. • Really only appropriate for styling elements based on the state of a block or its modifier.
- 38. SMACSS Scalable & ModularArchitecture for CSS (pronounced “smacks”)
- 39. goo.gl/nO1m99 SMACSS • Created byJonathan Snook in 2011. He had experience writing CSS at scale, including Yahoo Mail • Key concept: Different categories of objects need to be handled differently
- 40. –Jonathan Snook, @snookca “Atthe very core of SMACSS is categorization. By categorizing CSS rules, we begin to see patterns and can define better practices around each of these patterns.” credit: elidr, goo.gl/Te8zQI
- 41. goo.gl/nO1m99 SMACSS: Categories 1. Baserules are default styles for things like links, paragraphs, and headlines 2. Layout rules divide the page into sections, hold one or more modules together 3. Modules are the reusable, modular parts of a design. Callouts, sidebar sections, product lists, etc. 4. State rules describe how modules or layouts look in a particular state. Hidden, expanded, active, etc.
- 42. goo.gl/nO1m99 SMACSS: Naming • Useprefixes to differentiate between different types of rules: • l- for layout rules • m- for module rules • is- for state rules
- 43. OOCSS & BEM & SMACSS =Modular
- 44. Modular CSS • Thesemethodologies are more alike than different • Their evolution represents our industry’s growing experience with CSS at scale • We don’t have to limit ourselves. Look at what they share and keep the best parts
- 45. Modular Elements • Module:a reusable pattern (aka Object, Block) • Child Element: discrete piece of the module that can’t stand alone • Module Modifier: alters the visual appearance of a module
- 46. goo.gl/nO1m99 Modular Categories 1. Baserules are default styles for HTML elements 2. Layout rules control how modules are laid out, but not visual appearance: .l-centered 3. Modules are visual styles for reusable, self- contained UI components: .m-profile 4. State rules are added by JavaScript: .is-hidden 5. Helper rules are small in scope and unconnected to modules: .h-uppercase
- 47. Modular Rules • Don’tuse IDs • Don’t nest CSS deeper than one level • Add classes to child elements so you’re not tied to specific markup • Prefix class names so you can tell at a glance what a class does
- 48.
- 49. So many classes! •Having lots of classes might look ugly, but it doesn’t hurt performance • Carefully scoped classes help others combine your lego blocks in new ways • Don’t be afraid of long class names. They’re self-documenting!
- 50.
- 51. Module conflicts? • Modulesshouldn’t overlap much • You should be able to load modules in any order • Consider an !important helper class
- 52. Flexbox modules? • It’stricky to make layout modules using flexbox • If you’re not careful, you’ll find yourself making modifiers for every single flex option • ¯_( )_/¯
- 53. Preprocessors? • Modular CSSis more of a philosophy than a framework • As a result, it works with any preprocessor (or not) that you need
- 54. Bootstrap? • Bootstrap isa pattern library, not a methodology • That said, it’s built in a modular way: • .btn .btn-primary .btn-sm
- 55.
- 56. goo.gl/NcVzZ3 Remember This? <div class=“boxprofile pro-user"> <img class="avatar image" /> <p class="bio">...</p> </div>
- 57. goo.gl/NcVzZ3 Self-Documenting <div class=“box profileprofile--is-pro-user"> <img class="avatar profile__image" /> <p class="profile__bio">...</p> </div>
- 58. Modular Benefits • Simplifiescode and facilitates refactoring • Self-documenting code • Reusable code that doesn’t influence outside its own scope • Naturally leads to a pattern library
- 59. Modular Benefits • Predictable •Maintainable • Performant
- 60. Two CSS propertieswalk into a bar. A table in a bar across town collapses. Everything is fine, thanks to modular code and proper namespacing. goo.gl/wScTMY Thomas Fuchs @thomasfuchs
- 61. Thanks! Scott Vandehey —@spaceninja — Devsigner 2016