Reduce, Reuse, Recycle: Modular CSS for Enterprise Websites
Session speaker(s): kendalltotten
CSS bloat is a challenge for every enterprise website. As design elements grow and change, code gets added but rarely deleted and our CSS files get larger and harder to maintain. What was that class name that makes the font color black and 22px? Where is the pattern that gives me the right layout and color scheme for this design? Modular design encourages us to look beyond classes and begin styling on the component level using data attributes. Separate content from design and your code base becomes reusable and more compact. Teach your team these 4 simple rules to writing maintainable Sass, and never worry about code cruft again.
These principles are derived from the fundamentals taught in both SMACSS and BEM, but evolved in real-world scenarios from the redhat.com project, the focus of the book, "Frontend Architecture for Design Systems -- A Modern Blueprint for Scalable and Sustainable Websites".
Bonus: I'll share some tips about the tool we use at Red Hat to build, preview and share our pattern library: Patternkit, and then how we import those patterns directly into Drupal with the Pattern Builder module. That's right, no mapping, no recreation of fields, no fuss. Fields for content, as well as settings that control design and layout are exposed to content editors, simplifying the page building process!
https://2016.badcamp.net/session/reduce-reuse-recycle-modular-css-enterprise-websites
CSS bloat is a challenge for every enterprise website. As design elements grow and change, code gets added but rarely deleted and our CSS files get larger and harder to maintain. What was that class name that makes the font color black and 22px? Where is the pattern that gives me the right layout and color scheme for this design? Modular design encourages us to look beyond classes and begin styling on the component level using data attributes. Separate content from design and your code base becomes reusable and more compact. Teach your team these 4 simple rules to writing maintainable Sass, and never worry about code cruft again.
These principles are derived from the fundamentals taught in both SMACSS and BEM, but evolved in real-world scenarios from the redhat.com project, the focus of the book, "Frontend Architecture for Design Systems -- A Modern Blueprint for Scalable and Sustainable Websites".
Bonus: I'll share some tips about the tool we use at Red Hat to build, preview and share our pattern library: Patternkit, and then how we import those patterns directly into Drupal with the Pattern Builder module. That's right, no mapping, no recreation of fields, no fuss. Fields for content, as well as settings that control design and layout are exposed to content editors, simplifying the page building process!
https://2016.badcamp.net/session/reduce-reuse-recycle-modular-css-enterprise-websites