DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified and Scalable stylesheets
•
43 likes•92,335 views
Slides for a talk at the ConFoo 2012 conference in Montreal. I explain a simple yet powerful CSS architecture that avoids duplication and increases design consistency by grouping shared properties together rather than redefining them over and over. In the process I explain preprocessors like LESS and SASS, as well as the OOCSS fad, pointing out how they are insufficiently standards-compliant.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified and Scalable stylesheets
Similar to DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified and Scalable stylesheets (20)
More from Jer Clarke
More from Jer Clarke (8)
Recently uploaded
Recently uploaded (20)
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified and Scalable stylesheets
- 1. DRY CSS A DON’T-REPEAT-YOURSELF METHODOLOGY FOR CREATING EFFICIENT, UNIFIED AND SCALABLE STYLESHEETS Jeremy Clarke • http://jeremyclarke.org Download these slides: http://slideshare.net/jeremyclarke
- 2. WHO IS JEREMY CLARKE? • Communications Studies at Concordia University. • HTML+CSS since 2003 • Montreal WordPress Community/ WordCamp organizer.
- 3. OVERVIEW • An example of DRY CSS, Global Voices. • DRY principle and problems with CSS. • Preparsers (LESS and SASS) and their issues. • DRY CSS theory, implementation and benefits. • Appendix: OOCSS
- 4. DRY EXAMPLE: GLOBAL VOICES
- 5. DRY EXAMPLE: GLOBAL VOICES Before DRY CSS After DRY CSS • Applying DRY reduced 4200 5,000 lines to 2400. 3,750 • Standardized Shapes, text sizes, colors and modules. 2,500 1,250 • Nothinglost, just better organized. 0 Lines of CSS
- 6. DRY EXAMPLE: GLOBAL VOICES • Groups define shared properties. • Groups have many selectors. • Each property/value pair is defined only once.
- 7. DRY EXAMPLE: GLOBAL VOICES #ROUNDED5-BORDER2 #MEDIUM-ORANGE-TEXT #PALE-GREY-BACKGROUND #GREY-BUTTON #GREY-BUTTON-HOVER #GREY-BUTTON-CLICK
- 8. DRY EXAMPLE: GLOBAL VOICES • Elegantly organized IE hacks and Right-To-Left (RTL) styles into groups for the common fixes. • Font-sizegroups re-used in optional Large-Font theme.
- 9. 2 PRINCIPLES OF GOOD CSS • Keep style separate from content. • HTML should be structural. Tags, classes and IDs should refer to the content itself rather than how it looks. • Avoid specificity by harnessing the cascade. • Selectors and definitions should be as global as possible for design consistency and to avoid specificity collisions.
- 10. DRY: DON’T REPEAT YOURSELF • a.k.a "Single Source of Truth" principle. • "Everypiece of knowledge must have a single, unambiguous, authoritative representation within a system." * • DRY code means all uses of data change simultaneously rather than needing to be replicated. • DRY is the fundamental reason to use of variables and functions in all programming. • Bugs love a wet mess. * http://en.wikipedia.org/wiki/Don't_repeat_yourself
- 11. PROBLEMS WITH KEEPING CSS DRY • No variables - We can’t re-use values across properties (I.e a color hex). • No mixins (functions) - No way to re-use sets of property/ value pairs across definitions. • Result: Constant duplication of style definitions across different selectors.
- 12. BRUTE FORCE: CSS PREPARSERS • Add a new language based on CSS that has the necessary tools and a new parsing layer to read it. • Variables to re-use values across Variables in LESS* definitions. • Mixins to include a class inside another class. • All kinds of other programmy things (functions, switch conditions) Mixins in LESS* * E.g. http://lesscss.org/ and http://sass-lang.com/
- 13. CSS PREPARSERS: ISSUES • LESS and SASS do create a fantastic, DRY-capable CSS. • BUT at the cost of destandardization and dependence on external libraries. It isn’t CSS. • They can still be misused to create wet, sloppy stylesheets. Organizational methodology remains vital. • Question: How can we get the same effect with standard CSS?
- 14. PRINCIPLES OF DRY CSS (TL;DR) • Don't Repeat Yourself. Never repeat a style/property definition if you can avoid it. • Group selectors with shared properties rather than defining them separately.
- 15. CREATING DRY CSS • Group selectors that share properties above the properties they share. • Name the groups based on their role in the design. • Use the name as an ID at the top of the list and a class at bottom.
- 16. ORGANIZING DRY CSS • Decide on group types and groups as necessary for your design, operational needs and/or other CSS methodologies. • Recommended: Colors, Text, Shapes, Structures, Modules. • At right: GV’s DRY groups, visualized by CSSEdit for Mac* * http://macrabbit.com/espresso/
- 17. KEEPING IT DRY • Make individual selectors as rare and sparse as possible, only use them as exceptions. • Always have an answer to "Why isn't this part of a group?" • Don’t go crazy. Benefits scale even if some definitions remain moist.
- 18. BENEFITS OF DRY CSS •2 simple rules to follow that ensure a solid organizational structure. • Less CSS, shorter and smaller (kb) stylesheets. • Promotes good design practice and uniform updates. • Uses only philosophically and syntactically standard CSS.
- 19. BENEFITS: PROMOTES CONCEPTUAL DESIGN • Encourages you to think in terms of style patterns (groups), rather than individual objects. • Naming of groups encourages rational organization of designs. • Overalldesign tightens up, related objects become stylistically paired rather than simply matching. • Listing all group members together encourages optimization and generalization of selectors because you see how interrelated/inheritable they are.
- 20. BENEFITS: EDITS TO GROUPS AFFECT ALL MEMBERS • Avoids need to find all related styles to match changes. • Changes are less likely to be inconsistently applied. • When testing changes the dev sees all group members change as well. • Moving selectors between groups to restyle is fast and easy.
- 21. BENEFITS: TAKES ADVANTAGE OF INSPECTORS • Inspecting an object shows cascade of groups it participates in. • Group "name" (starting ID, i.e. #SMALL-TEXT) is visible in inspector. • Seeing all group members informs dev of related elements that should be considered. • Live-edits expose the change in related items as well.
- 22. BENEFITS: DOESN’T REQUIRE CHANGES TO HTML • Uses whatever classes and IDs are already present. • IfHTML needs editing it's only to add more detailed semantic classes to use in your DRY groups. • Useful when generated HTML is out of your control (WordPress core/plugins, 3rd party widgets)
- 23. BENEFITS: COMPLETELY STANDARD • Simply an organizing princinple for normal CSS. • Adheres to separation of style and content. • Bothbackward and forward compatible, from IE6 hacks to prefixed CSS3 properties. • CSS can be pasted anywhere and just work. • Groupscan be extracted and re-used elsewhere by removing group members and inserting new ones.
- 24. BENEFITS: INTEGRATES WITH OTHER METHODOLOGIES • Compatible with most other CSS methodologies like grids, OOCSS* or SMACSS** because the way you organize your groups is up to you. • Progressiveenhancement and browser support is your choice. DRY only defines how you organize your selectors and properties. * https://github.com/stubbornella/oocss/wiki ** http://smacss.com/book/
- 25. PERFORMANCE ISSUES? • TL;DR: Probably not. • "Formost web sites, the possible performance gains from optimizing CSS selectors will be small, and are not worth the costs." ~Steve Sounders* • Having many selectors does not inherently hurt performance. • SeeSteve Sounders research** for optimizations that matter (and can be applied to DRY CSS). * http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/ ** http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/
- 26. OOCSS: "OBJECT ORIENTED" • “Separate structure and • Implementation skin.” • Define re-usable classes • “Separate container and like .media, .box and .red content.” • Add them to HTML tags • Objectsare re-usable throughout your site to content patterns. create a consistent and efficient design. • Skins are sets of visual decorations to be applied to objects. Sources https://github.com/stubbornella/oocss/wiki/FAQ http://slideshare.net/stubbornella/object-oriented-css
- 27. DRY CSS <3 OOCSS • The fundamental principles and goals are the same: • Create logical style groups that define your site. • Apply them to elements rather than redefining css on many selectors. • Focus on consistency of objects across the site through direct style linkage. • “Object-orientation” can be integrated into a DRY approach when choosing your groups and group types.
- 28. DRY CSS > OOCSS • The difference: • DRY stacks selectors above a single definition in the CSS. • OOCSS applies generic classes to HTML tags throughout the document. • OOCSS violates the separation of content and style by polluting HTML with meaningless style-classes. is unnecessary because DRY CSS can achieve the • This same goal while maintaining separation.
- 29. DRY CSS > OOCSS (DETAILS) • DRY offers an easy way to route around situations where OOCSS classes can't be added to HTML (out of your control, inconvenient, undesirable). • Generic group class (i.e .small-text) for each DRY group can still be used in OOCSS way if needed (especially in transient content rather than templates). • DRY allows group membership to be managed without editing HTML templates. Less files to edit, less people involved. • DRY keeps style and content separate LIKE IT SHOULD BE.
- 30. DRY CSS REVIEW Group re-usable Name the Add selectors to properties groups logically various groups
- 31. QUESTIONS?
- 32. DRY CSS A DON’T-REPEAT-YOURSELF METHODOLOGY FOR CREATING EFFICIENT, UNIFIED AND SCALABLE STYLESHEETS Jeremy Clarke • http://jeremyclarke.org Creative Commons Share Alike http://creativecommons.org/licenses/by-sa/3.0/ Download these slides: http://slideshare.net/jeremyclarke