SlideShare is now on Android. 15 million presentations at your fingertips.  Get the app

×
  • Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
 

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

by web developper  at Global Voices Online on Feb 29, 2012

  • 37,968 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 ...

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.

Statistics

Views

Total Views
37,968
Views on SlideShare
17,394
Embed Views
20,574

Actions

Likes
27
Downloads
161
Comments
2

34 Embeds 20,574

http://www.vanseodesign.com 14030
http://simianuprising.com 6026
http://dev.simianup 248
http://www.webnotwar.ca 57
http://feeds2.feedburner.com 44
http://abtasty.com 19
http://www.twylah.com 16
http://webcache.googleusercontent.com 16
http://translate.googleusercontent.com 15
http://feeds.feedburner.com 14
http://www.wpnewshub.com 14
http://umbrellaofdesign.collected.info 12
http://wiki.immonet.asv.local 8
https://twitter.com 8
http://www.socialdistraction.net 8
http://www.pkwebdesigns.com.au 6
https://si0.twimg.com 5
http://prasathpree.blogspot.in 4
https://www.google.co.uk 3
http://131.253.14.66 3
http://internetaddict.collected.info 2
https://www.google.co.kr 2
http://a030bba359890263 2
http://www.ofelio.com 2
https://www.google.com.mx 1
http://us-w1.rockmelt.com 1
http://localhost 1
http://prasathpree.blogspot.com 1
http://hotadsensetrick.blogspot.hk 1
http://www.tuicool.com 1
http://www.google.com 1
http://www.php-talks.com 1
http://hotadsensetrick.blogspot.com 1
http://prlog.ru 1
More...

Accessibility

Categories

Upload Details

Uploaded via SlideShare as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • jeremyclarke Jeremy Clarke, web developper at Global Voices Online I think you've missed the point of the all-caps IDs at the start of each DRY group. They are present to give a 'name' to the group and they are all-caps so that they stand out and indicate that they are not normal selectors. You would never use the group-name ID in your HTML.

    I also don't recommend using the lowercase class either (which would be the OOCSS way), but instead to use a semantic class in your HTML and add an appropriate selector to the DRY group (i.e. between the naming ID and the naming class).

    I'm confident that there's nothing 'crazy' about my recommendations. You can disagree with the value of having semantic HTML and being able to deal with third-party HTML (both being fundamental principles of DRY CSS), but for anyone who thinks those are valuable goals DRY CSS offers solutions where OOCSS does not (while still offering all the other benefits of OOCSS).

    FWIW most of the principles of OOCSS are compatible with DRY CSS (at least the parts that have something to do with 'object orientation'). The main point of differentiation is in how you implement selectors.
    6 months ago
    Are you sure you want to
    Your message goes here
    Processing…
  • ErikEckhardt Erik Eckhardt You use IDs like #LIGHT-WHITE-BACKGROUND??? My mind is blown. That's *awful*. What if you want two different elements in the page to have this? Oh, you say, just use the class, then. So why have the ID at all? If you're saying only what to do to deal with HTML that's out of your control, well... okay then--I can see how this could help some. But advocating it in general as better then OOCSS is plumb crazy. 6 months ago
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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