Post on 27-Jan-2015
description
transcript
An Introduction to Object Oriented CSSScalable and Maintainable Stylesheets
Nati Devalle - @Taly UX Designer
Starting a project from scratch
6 months later...
WHY?
We keep piling styles up
instead of reusing them
Where do we start?http://www.flickr.com/photos/mrlemming_photos/5750248841/
2 Principles
1. Separation of Structure from Skin
2. Separation of Containers from Content
2 Principles
1. Separation of Structure from Skin
2. Separation of Containers from Content
Structure Skin
Structure Skin
Scalable
.ch-box-error {}
.ch-box-attention {}
Scalable
.ch-box-error {}
.ch-box-attention {}
.ch-box-help {}
.ch-box-information {}
.ch-box-ok {}
Maintainable
[class*='ch-box'] {border-radius: 5px;padding: 10px;margin: 0 0 10px 0;
}
Maintainable
[class*='ch-box'] {border-radius: 20px;padding: 10px;margin: 0 0 10px 0;
}
2 Principles
1. Separation of Structure from Skin
2. Separation of Containers from Content
What’s Content?
What’s Container?
http://www.html5code.com/tutorials/html5-semantic-layout-tags/
Break the dependency between content and container
(So you can put the content in different containers)
Use styles that are
specific to an element and
don’t depend on location
The Recipe1. Identify the pattern 2. Create a component library3. Extend it
http://www.flickr.com/photos/mlazarevski/8108416027/sizes/l/in/photostream/
What’sThePattern?
How did we code this?
How did we code this?
How did we code this?
Pattern = Reusable(and consistency)
Create a component
Extend
Too similar?Choose one!
Extend more
Exceptions
Not bad
But it is really necessary?
Today
7 badgesSaved 18+ repeated declarations
20 badgesSaved 57+ repeated declarations
And that’s just ONE pattern
Think of all the others we can find
http://www.flickr.com/photos/bdesham/2432400623/in/photostream/
and this
and thiscould be just this
Success!
This could be very tempting...
But what if it changes?
Future-proof
Don’t forget about semantics
Embrace Semantics
To sum it up...
If you have to copy and paste just one single CSS declaration...
● http://oocss.org/
● http://www.slideshare.net/stubbornella/object-oriented-css
● http://www.slideshare.net/stubbornella/what-is-object-oriented-css
● https://www.youtube.com/watch?v=EW8NAFELWzo
● http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
● http://www.slideshare.net/stubbornella/5-mistakes-of-massive-css
● http://www.lukew.com/ff/entry.asp?1049
● http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
● http://www.sitepoint.com/css-architectures-scalable-and-modular-approaches/
● https://www.google.com.ar/search?q=OOCSS
Resources