Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DRY CSS
Scalable and Maintainable Stylesheets
Nati Devalle - Sep 2013
Starting a project from scratch
TGIF
http://www.flickr.com/photos/mrlemming_photos/5750248841/
DRY CSS
by Jeremy Clarke
Don’t
Repeat
Yourself
“Every piece of knowledge must have a single,
unambiguous, authoritative representation
within a system”
2 Principles
1. Don’t repeat yourself
2. Group selectors with shared properties
The Recipe
1. Identify the pattern
2. Group reusable css declarations
3. Add Selectors to the groups
Pattern = Shared declarations
Maintenance
Keeping it DRY
Individual selectors only for exceptions
Ask yourself
Why isn’t this part of a group?
OOCSS vs DRY CSS
OOCSS DRY CSS
- Don’t rely on the
cascade
- Use the cascade
OOCSS DRY CSS
- Don’t rely on the
cascade
- Define reusable
classes
- Use the cascade
- Group reusable
declarations and ad...
OOCSS DRY CSS
- Don’t rely on the
cascade
- Define reusable
classes
- Extend using
additional classes
- Use the cascade
- ...
OOCSS
OOCSS
OOCSS
OOCSS
DRY CSS
You don’t need to choose
If you have to copy and paste
just one single CSS declaration...
● http://vimeo.com/38063798
● http://www.slideshare.net/jeremyclarke/dry-css-a-
dontrepeatyourself-methodology-for-creatin...
DRY CSS
DRY CSS
DRY CSS
DRY CSS
DRY CSS
DRY CSS
DRY CSS
DRY CSS
DRY CSS
DRY CSS
DRY CSS
DRY CSS
DRY CSS
Upcoming SlideShare
Loading in …5
×

DRY CSS

756 views

Published on

Second part of a series of talks about Scalable and Maintainable CSS I gave for the design team at MercadoLibre.

Part I: http://www.slideshare.net/ndevalle/an-introduction-to-object-oriented-css

Published in: Design, Technology
  • Be the first to comment

DRY CSS

  1. 1. DRY CSS Scalable and Maintainable Stylesheets Nati Devalle - Sep 2013
  2. 2. Starting a project from scratch TGIF
  3. 3. http://www.flickr.com/photos/mrlemming_photos/5750248841/
  4. 4. DRY CSS by Jeremy Clarke
  5. 5. Don’t Repeat Yourself
  6. 6. “Every piece of knowledge must have a single, unambiguous, authoritative representation within a system”
  7. 7. 2 Principles 1. Don’t repeat yourself 2. Group selectors with shared properties
  8. 8. The Recipe 1. Identify the pattern 2. Group reusable css declarations 3. Add Selectors to the groups
  9. 9. Pattern = Shared declarations
  10. 10. Maintenance
  11. 11. Keeping it DRY Individual selectors only for exceptions Ask yourself Why isn’t this part of a group?
  12. 12. OOCSS vs DRY CSS
  13. 13. OOCSS DRY CSS - Don’t rely on the cascade - Use the cascade
  14. 14. OOCSS DRY CSS - Don’t rely on the cascade - Define reusable classes - Use the cascade - Group reusable declarations and add multiple selectors to them
  15. 15. OOCSS DRY CSS - Don’t rely on the cascade - Define reusable classes - Extend using additional classes - Use the cascade - Group reusable declarations and add multiple selectors to them - Extend by grouping declarations
  16. 16. OOCSS OOCSS
  17. 17. OOCSS OOCSS DRY CSS
  18. 18. You don’t need to choose
  19. 19. If you have to copy and paste just one single CSS declaration...
  20. 20. ● http://vimeo.com/38063798 ● http://www.slideshare.net/jeremyclarke/dry-css-a- dontrepeatyourself-methodology-for-creating-efficient- unified-and-scalable-stylesheets ● http://www.vanseodesign.com/css/dry-principles/ ● http://csswizardry.com/2013/07/writing-dryer-vanilla- css/ ● http://cwebbdesign.tumblr. com/post/23666803241/scalable-and-maintainable-css- approaches Resources

×