SlideShare a Scribd company logo
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
WHO IS JEREMY CLARKE?


• Communications   Studies at Concordia
 University.

• HTML+CSS     since 2003

• Montreal WordPress
                  Community/
 WordCamp organizer.
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
DRY EXAMPLE: GLOBAL VOICES
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
DRY EXAMPLE: GLOBAL VOICES

• Groups define shared
 properties.

• Groups   have many selectors.

• Each
     property/value pair is
 defined only once.
DRY EXAMPLE: GLOBAL VOICES
   #ROUNDED5-BORDER2
                  #MEDIUM-ORANGE-TEXT




#PALE-GREY-BACKGROUND
                      #GREY-BUTTON
                    #GREY-BUTTON-HOVER
                    #GREY-BUTTON-CLICK
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.
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.
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
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.
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/
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?
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.
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.
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/
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.
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.
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.
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.
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.
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)
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.
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/
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/
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
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.
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.
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.
DRY CSS REVIEW
Group re-usable     Name the         Add selectors to
  properties      groups logically    various groups
QUESTIONS?
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

More Related Content

What's hot

Css animation
Css animationCss animation
Css animation
Aaron King
 
SASS - CSS with Superpower
SASS - CSS with SuperpowerSASS - CSS with Superpower
SASS - CSS with Superpower
Kanchha kaji Prajapati
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
 
Sass
SassSass
CSS
CSSCSS
Flex box
Flex boxFlex box
Flex box
Harish Karthick
 
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
Yaowaluck Promdee
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
David Lindkvist
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
Nicole Sullivan
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
 
Lab#13 responsive web
Lab#13 responsive webLab#13 responsive web
Lab#13 responsive web
Yaowaluck Promdee
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
Sanjeev Kumar
 
Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Sass - Getting Started with Sass!
Sass - Getting Started with Sass!
Eric Sembrat
 
jQuery
jQueryjQuery
CSS Selectors
CSS SelectorsCSS Selectors
CSS Selectors
Rachel Andrew
 
Css Basics
Css BasicsCss Basics
Css Basics
Jay Patel
 
Sass presentation
Sass presentationSass presentation
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
 
Introduction to HTML
Introduction to HTML Introduction to HTML
Introduction to HTML
Professional Guru
 
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsHTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventions
Knoldus Inc.
 

What's hot (20)

Css animation
Css animationCss animation
Css animation
 
SASS - CSS with Superpower
SASS - CSS with SuperpowerSASS - CSS with Superpower
SASS - CSS with Superpower
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Sass
SassSass
Sass
 
CSS
CSSCSS
CSS
 
Flex box
Flex boxFlex box
Flex box
 
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
Lab#13 responsive web
Lab#13 responsive webLab#13 responsive web
Lab#13 responsive web
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Sass - Getting Started with Sass!
Sass - Getting Started with Sass!
 
jQuery
jQueryjQuery
jQuery
 
CSS Selectors
CSS SelectorsCSS Selectors
CSS Selectors
 
Css Basics
Css BasicsCss Basics
Css Basics
 
Sass presentation
Sass presentationSass presentation
Sass presentation
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
Introduction to HTML
Introduction to HTML Introduction to HTML
Introduction to HTML
 
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsHTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventions
 

Viewers also liked

Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo MashupPut A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Jer Clarke
 
Atomic design
Atomic designAtomic design
Atomic design
Brad Frost
 
Методологии верстки
Методологии версткиМетодологии верстки
Методологии верстки
Elizaveta Selivanova
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
Nicole Sullivan
 
Css Preprocessors
Css PreprocessorsCss Preprocessors
Css Preprocessors
Saulo Oliveira
 
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slides
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slidesKeep Your Code Organized! WordCamp Montreal 2013 Presentation slides
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slides
Jer Clarke
 
DRY CSS
DRY CSSDRY CSS
DRY CSS
Nati Devalle
 
Contropedia - Mockup
Contropedia - MockupContropedia - Mockup
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
Zohar Arad
 
BEM It! for Brandwatch
BEM It! for BrandwatchBEM It! for Brandwatch
BEM It! for Brandwatch
Max Shirshin
 
Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end apps
Zohar Arad
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
Arcbees
 
Killer form design
Killer form designKiller form design
Killer form design
Lauren Martin
 
Scalable CSS Architecture
Scalable CSS ArchitectureScalable CSS Architecture
Scalable CSS Architecture
Michał Pierzchała
 
What is Elm and Why Should I care?
What is Elm and Why Should I care?What is Elm and Why Should I care?
What is Elm and Why Should I care?
Thomas Groshong
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Stephen Hay
 
CSS Bloat!
CSS Bloat!CSS Bloat!
CSS Bloat!
Nicole Sullivan
 
The Why and What of Pattern Lab
The Why and What of Pattern LabThe Why and What of Pattern Lab
The Why and What of Pattern Lab
Dave Olsen
 
Less vs sass
Less vs sassLess vs sass
Less vs sass
Aya Edamoto
 
Incorporating Video into your Link Building Strategy
Incorporating Video into your Link Building StrategyIncorporating Video into your Link Building Strategy
Incorporating Video into your Link Building Strategy
Phil Nottingham
 

Viewers also liked (20)

Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo MashupPut A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
 
Atomic design
Atomic designAtomic design
Atomic design
 
Методологии верстки
Методологии версткиМетодологии верстки
Методологии верстки
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
Css Preprocessors
Css PreprocessorsCss Preprocessors
Css Preprocessors
 
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slides
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slidesKeep Your Code Organized! WordCamp Montreal 2013 Presentation slides
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slides
 
DRY CSS
DRY CSSDRY CSS
DRY CSS
 
Contropedia - Mockup
Contropedia - MockupContropedia - Mockup
Contropedia - Mockup
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
 
BEM It! for Brandwatch
BEM It! for BrandwatchBEM It! for Brandwatch
BEM It! for Brandwatch
 
Architecting single-page front-end apps
Architecting single-page front-end appsArchitecting single-page front-end apps
Architecting single-page front-end apps
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
 
Killer form design
Killer form designKiller form design
Killer form design
 
Scalable CSS Architecture
Scalable CSS ArchitectureScalable CSS Architecture
Scalable CSS Architecture
 
What is Elm and Why Should I care?
What is Elm and Why Should I care?What is Elm and Why Should I care?
What is Elm and Why Should I care?
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 
CSS Bloat!
CSS Bloat!CSS Bloat!
CSS Bloat!
 
The Why and What of Pattern Lab
The Why and What of Pattern LabThe Why and What of Pattern Lab
The Why and What of Pattern Lab
 
Less vs sass
Less vs sassLess vs sass
Less vs sass
 
Incorporating Video into your Link Building Strategy
Incorporating Video into your Link Building StrategyIncorporating Video into your Link Building Strategy
Incorporating Video into your Link Building Strategy
 

Similar to DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified and Scalable stylesheets

WordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSWordCamp NYC - DRY CSS
WordCamp NYC - DRY CSS
Jer Clarke
 
What is-sass-by-lucas-castro
What is-sass-by-lucas-castroWhat is-sass-by-lucas-castro
What is-sass-by-lucas-castro
Lucas Castro
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-14. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1
Jyoti Yadav
 
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Suzanne Dergacheva
 
WEBD 162: Intro to CSS
WEBD 162: Intro to CSSWEBD 162: Intro to CSS
WEBD 162: Intro to CSS
palomateach
 
Css tutorial 2012
Css tutorial 2012Css tutorial 2012
Css tutorial 2012
Sudheer Kiran
 
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
Neha Sharma
 
DW unit 3.pptx
DW unit 3.pptxDW unit 3.pptx
DW unit 3.pptx
SeethaDinesh
 
DHTML
DHTMLDHTML
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
Peter Kaizer
 
Sane CSS - A modern approach to CSS
Sane CSS - A modern approach to CSSSane CSS - A modern approach to CSS
Sane CSS - A modern approach to CSS
Lee Cheneler
 
Object Oriented CSS for rapid, scalable and maintainable development
Object Oriented CSS for rapid, scalable and maintainable developmentObject Oriented CSS for rapid, scalable and maintainable development
Object Oriented CSS for rapid, scalable and maintainable development
Graeme Blackwood
 
Css Systems
Css SystemsCss Systems
Css Systems
Stephen Burgess
 
Unit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology projectUnit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology project
abhiramhatwar
 
Css presentation lecture 1
Css presentation lecture 1Css presentation lecture 1
Css presentation lecture 1
Mudasir Syed
 
Css presentation lecture 3
Css presentation lecture 3Css presentation lecture 3
Css presentation lecture 3
Mudasir Syed
 
Css week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandourCss week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandour
Osama Ghandour Geris
 
CSS for Design Systems
CSS for Design SystemsCSS for Design Systems
CSS for Design Systems
Adam Kudrna
 
What is Modular CSS?
What is Modular CSS?What is Modular CSS?
What is Modular CSS?
Scott Vandehey
 

Similar to DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified and Scalable stylesheets (20)

WordCamp NYC - DRY CSS
WordCamp NYC - DRY CSSWordCamp NYC - DRY CSS
WordCamp NYC - DRY CSS
 
What is-sass-by-lucas-castro
What is-sass-by-lucas-castroWhat is-sass-by-lucas-castro
What is-sass-by-lucas-castro
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-14. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1
 
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
 
WEBD 162: Intro to CSS
WEBD 162: Intro to CSSWEBD 162: Intro to CSS
WEBD 162: Intro to CSS
 
Css tutorial 2012
Css tutorial 2012Css tutorial 2012
Css tutorial 2012
 
SASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome StylesheetSASS - Syntactically Awesome Stylesheet
SASS - Syntactically Awesome Stylesheet
 
DW unit 3.pptx
DW unit 3.pptxDW unit 3.pptx
DW unit 3.pptx
 
DHTML
DHTMLDHTML
DHTML
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Sane CSS - A modern approach to CSS
Sane CSS - A modern approach to CSSSane CSS - A modern approach to CSS
Sane CSS - A modern approach to CSS
 
Object Oriented CSS for rapid, scalable and maintainable development
Object Oriented CSS for rapid, scalable and maintainable developmentObject Oriented CSS for rapid, scalable and maintainable development
Object Oriented CSS for rapid, scalable and maintainable development
 
Css Systems
Css SystemsCss Systems
Css Systems
 
Unit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology projectUnit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology project
 
Css presentation lecture 1
Css presentation lecture 1Css presentation lecture 1
Css presentation lecture 1
 
Css presentation lecture 3
Css presentation lecture 3Css presentation lecture 3
Css presentation lecture 3
 
Css week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandourCss week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandour
 
CSS for Design Systems
CSS for Design SystemsCSS for Design Systems
CSS for Design Systems
 
What is Modular CSS?
What is Modular CSS?What is Modular CSS?
What is Modular CSS?
 

More from Jer Clarke

globalvoices.org - How our CC license spawned a world class translation commu...
globalvoices.org - How our CC license spawned a world class translation commu...globalvoices.org - How our CC license spawned a world class translation commu...
globalvoices.org - How our CC license spawned a world class translation commu...
Jer Clarke
 
Global Voices proves Creative Commons is Awesome • CC Salon Montreal
Global Voices proves Creative Commons is Awesome • CC Salon MontrealGlobal Voices proves Creative Commons is Awesome • CC Salon Montreal
Global Voices proves Creative Commons is Awesome • CC Salon Montreal
Jer Clarke
 
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
Jer Clarke
 
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
Jer Clarke
 
Caching and Optimization for WordPress
Caching and Optimization for WordPressCaching and Optimization for WordPress
Caching and Optimization for WordPress
Jer Clarke
 
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
Jer Clarke
 
Global Voices Generic Presentation
Global Voices Generic PresentationGlobal Voices Generic Presentation
Global Voices Generic Presentation
Jer Clarke
 
Global Voices - Democratising the web with Wordpress and Love
Global Voices - Democratising the web with Wordpress and LoveGlobal Voices - Democratising the web with Wordpress and Love
Global Voices - Democratising the web with Wordpress and Love
Jer Clarke
 

More from Jer Clarke (8)

globalvoices.org - How our CC license spawned a world class translation commu...
globalvoices.org - How our CC license spawned a world class translation commu...globalvoices.org - How our CC license spawned a world class translation commu...
globalvoices.org - How our CC license spawned a world class translation commu...
 
Global Voices proves Creative Commons is Awesome • CC Salon Montreal
Global Voices proves Creative Commons is Awesome • CC Salon MontrealGlobal Voices proves Creative Commons is Awesome • CC Salon Montreal
Global Voices proves Creative Commons is Awesome • CC Salon Montreal
 
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
 
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
 
Caching and Optimization for WordPress
Caching and Optimization for WordPressCaching and Optimization for WordPress
Caching and Optimization for WordPress
 
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
 
Global Voices Generic Presentation
Global Voices Generic PresentationGlobal Voices Generic Presentation
Global Voices Generic Presentation
 
Global Voices - Democratising the web with Wordpress and Love
Global Voices - Democratising the web with Wordpress and LoveGlobal Voices - Democratising the web with Wordpress and Love
Global Voices - Democratising the web with Wordpress and Love
 

Recently uploaded

Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
Hiike
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
marufrahmanstratejm
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
Shinana2
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
alexjohnson7307
 

Recently uploaded (20)

Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
 

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
  • 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
  • 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