Download - An Introduction to Object Oriented CSS
![Page 1: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/1.jpg)
An Introduction to Object Oriented CSSScalable and Maintainable Stylesheets
Nati Devalle - @Taly UX Designer
![Page 2: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/2.jpg)
Starting a project from scratch
![Page 3: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/3.jpg)
![Page 4: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/4.jpg)
6 months later...
![Page 5: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/5.jpg)
![Page 6: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/6.jpg)
WHY?
![Page 7: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/7.jpg)
We keep piling styles up
![Page 8: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/8.jpg)
instead of reusing them
![Page 9: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/9.jpg)
Where do we start?http://www.flickr.com/photos/mrlemming_photos/5750248841/
![Page 11: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/11.jpg)
2 Principles
1. Separation of Structure from Skin
2. Separation of Containers from Content
![Page 12: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/12.jpg)
2 Principles
1. Separation of Structure from Skin
2. Separation of Containers from Content
![Page 13: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/13.jpg)
![Page 14: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/14.jpg)
![Page 15: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/15.jpg)
Structure Skin
![Page 16: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/16.jpg)
Structure Skin
![Page 17: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/17.jpg)
Scalable
.ch-box-error {}
.ch-box-attention {}
![Page 18: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/18.jpg)
Scalable
.ch-box-error {}
.ch-box-attention {}
.ch-box-help {}
.ch-box-information {}
.ch-box-ok {}
![Page 19: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/19.jpg)
Maintainable
[class*='ch-box'] {border-radius: 5px;padding: 10px;margin: 0 0 10px 0;
}
![Page 20: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/20.jpg)
Maintainable
[class*='ch-box'] {border-radius: 20px;padding: 10px;margin: 0 0 10px 0;
}
![Page 21: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/21.jpg)
2 Principles
1. Separation of Structure from Skin
2. Separation of Containers from Content
![Page 22: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/22.jpg)
What’s Content?
![Page 23: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/23.jpg)
![Page 24: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/24.jpg)
What’s Container?
![Page 25: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/25.jpg)
http://www.html5code.com/tutorials/html5-semantic-layout-tags/
![Page 26: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/26.jpg)
Break the dependency between content and container
(So you can put the content in different containers)
![Page 27: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/27.jpg)
Use styles that are
specific to an element and
don’t depend on location
![Page 28: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/28.jpg)
![Page 29: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/29.jpg)
![Page 30: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/30.jpg)
The Recipe1. Identify the pattern 2. Create a component library3. Extend it
http://www.flickr.com/photos/mlazarevski/8108416027/sizes/l/in/photostream/
![Page 31: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/31.jpg)
![Page 32: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/32.jpg)
What’sThePattern?
![Page 33: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/33.jpg)
![Page 34: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/34.jpg)
How did we code this?
![Page 35: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/35.jpg)
How did we code this?
![Page 36: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/36.jpg)
How did we code this?
![Page 37: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/37.jpg)
![Page 38: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/38.jpg)
![Page 39: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/39.jpg)
Pattern = Reusable(and consistency)
![Page 40: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/40.jpg)
Create a component
![Page 41: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/41.jpg)
![Page 42: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/42.jpg)
![Page 43: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/43.jpg)
![Page 44: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/44.jpg)
Extend
![Page 45: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/45.jpg)
![Page 46: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/46.jpg)
![Page 47: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/47.jpg)
![Page 48: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/48.jpg)
![Page 49: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/49.jpg)
Too similar?Choose one!
![Page 50: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/50.jpg)
Extend more
![Page 51: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/51.jpg)
Exceptions
![Page 52: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/52.jpg)
![Page 53: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/53.jpg)
![Page 54: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/54.jpg)
Not bad
![Page 55: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/55.jpg)
But it is really necessary?
![Page 56: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/56.jpg)
Today
7 badgesSaved 18+ repeated declarations
![Page 57: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/57.jpg)
![Page 58: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/58.jpg)
![Page 59: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/59.jpg)
![Page 60: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/60.jpg)
![Page 61: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/61.jpg)
20 badgesSaved 57+ repeated declarations
![Page 62: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/62.jpg)
![Page 63: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/63.jpg)
And that’s just ONE pattern
![Page 64: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/64.jpg)
Think of all the others we can find
http://www.flickr.com/photos/bdesham/2432400623/in/photostream/
![Page 65: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/65.jpg)
![Page 66: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/66.jpg)
and this
![Page 67: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/67.jpg)
and thiscould be just this
![Page 68: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/68.jpg)
Success!
![Page 69: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/69.jpg)
![Page 70: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/70.jpg)
This could be very tempting...
![Page 71: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/71.jpg)
But what if it changes?
![Page 72: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/72.jpg)
![Page 73: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/73.jpg)
Future-proof
![Page 74: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/74.jpg)
Don’t forget about semantics
Embrace Semantics
![Page 75: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/75.jpg)
To sum it up...
![Page 76: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/76.jpg)
If you have to copy and paste just one single CSS declaration...
![Page 77: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/77.jpg)
![Page 79: An Introduction to Object Oriented CSS](https://reader033.vdocuments.us/reader033/viewer/2022051110/54c7602f4a79599a1a8b45af/html5/thumbnails/79.jpg)
● 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