Submit Search
Upload
An Introduction to Object Oriented CSS
•
5 likes
•
1,436 views
Nati Devalle
Follow
Talk I gave for the Design team at MercadoLibre.
Read less
Read more
Design
Technology
Report
Share
Report
Share
1 of 79
Download now
Download to read offline
Recommended
DRY CSS
DRY CSS
Nati Devalle
An introduction to Object Oriented CSS
An introduction to Object Oriented CSS
Kelley Howell
Object Oriented CSS for rapid, scalable and maintainable development
Object Oriented CSS for rapid, scalable and maintainable development
Graeme Blackwood
OOCSS for Javascript pirates at jQueryPgh meetup
OOCSS for Javascript pirates at jQueryPgh meetup
Brian Cavalier
Rock Solid CSS Architecture
Rock Solid CSS Architecture
John Need
What is Modular CSS?
What is Modular CSS?
Scott Vandehey
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
The Future State of Layout
The Future State of Layout
Stephen Hay
Recommended
DRY CSS
DRY CSS
Nati Devalle
An introduction to Object Oriented CSS
An introduction to Object Oriented CSS
Kelley Howell
Object Oriented CSS for rapid, scalable and maintainable development
Object Oriented CSS for rapid, scalable and maintainable development
Graeme Blackwood
OOCSS for Javascript pirates at jQueryPgh meetup
OOCSS for Javascript pirates at jQueryPgh meetup
Brian Cavalier
Rock Solid CSS Architecture
Rock Solid CSS Architecture
John Need
What is Modular CSS?
What is Modular CSS?
Scott Vandehey
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
Russ Weakley
The Future State of Layout
The Future State of Layout
Stephen Hay
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
Eric Carlisle
OOCSS for JavaScript Pirates jQcon Boston
OOCSS for JavaScript Pirates jQcon Boston
John Hann
Class15
Class15
Jiyeon Lee
HTML Tour - Buenas prácticas en el desarrollo web
HTML Tour - Buenas prácticas en el desarrollo web
Plain Concepts
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Scott DeLoach
Thoughtful architecture and good practices in CSS - myth or new realities
Thoughtful architecture and good practices in CSS - myth or new realities
Anna Matysiak
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP Conference
Rachel Andrew
Newcastle University & T4 Site Manager: TERMINALFOUR t44u 2013
Newcastle University & T4 Site Manager: TERMINALFOUR t44u 2013
Terminalfour
Modular HTML & CSS Workshop
Modular HTML & CSS Workshop
Shay Howe
Object oriented css graeme blackwood
Object oriented css graeme blackwood
drupalconf
Css framework
Css framework
Olivier Besson
How to develop a CSS Framework
How to develop a CSS Framework
Olivier Besson
Css framework
Css framework
Olivier Besson
960 grid psd
960 grid psd
Raju Nag
Scalable and Modular Architecture for CSS
Scalable and Modular Architecture for CSS
Jyaasa Technologies
Refresh OKC
Refresh OKC
Nathan Smith
Object oriented css. Graeme Blackwood
Object oriented css. Graeme Blackwood
PVasili
Drupal 960 grid system based theming
Drupal 960 grid system based theming
Gaurav Mishra
Javascript Design Patterns
Javascript Design Patterns
Lilia Sfaxi
Scoped CSS: To scope or not to scope
Scoped CSS: To scope or not to scope
Shi Ling Tai
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
Rishabh Aryan
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
diploma 1
More Related Content
Similar to An Introduction to Object Oriented CSS
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
Eric Carlisle
OOCSS for JavaScript Pirates jQcon Boston
OOCSS for JavaScript Pirates jQcon Boston
John Hann
Class15
Class15
Jiyeon Lee
HTML Tour - Buenas prácticas en el desarrollo web
HTML Tour - Buenas prácticas en el desarrollo web
Plain Concepts
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Scott DeLoach
Thoughtful architecture and good practices in CSS - myth or new realities
Thoughtful architecture and good practices in CSS - myth or new realities
Anna Matysiak
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP Conference
Rachel Andrew
Newcastle University & T4 Site Manager: TERMINALFOUR t44u 2013
Newcastle University & T4 Site Manager: TERMINALFOUR t44u 2013
Terminalfour
Modular HTML & CSS Workshop
Modular HTML & CSS Workshop
Shay Howe
Object oriented css graeme blackwood
Object oriented css graeme blackwood
drupalconf
Css framework
Css framework
Olivier Besson
How to develop a CSS Framework
How to develop a CSS Framework
Olivier Besson
Css framework
Css framework
Olivier Besson
960 grid psd
960 grid psd
Raju Nag
Scalable and Modular Architecture for CSS
Scalable and Modular Architecture for CSS
Jyaasa Technologies
Refresh OKC
Refresh OKC
Nathan Smith
Object oriented css. Graeme Blackwood
Object oriented css. Graeme Blackwood
PVasili
Drupal 960 grid system based theming
Drupal 960 grid system based theming
Gaurav Mishra
Javascript Design Patterns
Javascript Design Patterns
Lilia Sfaxi
Scoped CSS: To scope or not to scope
Scoped CSS: To scope or not to scope
Shi Ling Tai
Similar to An Introduction to Object Oriented CSS
(20)
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
OOCSS for JavaScript Pirates jQcon Boston
OOCSS for JavaScript Pirates jQcon Boston
Class15
Class15
HTML Tour - Buenas prácticas en el desarrollo web
HTML Tour - Buenas prácticas en el desarrollo web
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Extreme CSS Techniques - MadWorld Europe 2018, Scott DeLoach, ClickStart
Thoughtful architecture and good practices in CSS - myth or new realities
Thoughtful architecture and good practices in CSS - myth or new realities
The New CSS Layout - Dutch PHP Conference
The New CSS Layout - Dutch PHP Conference
Newcastle University & T4 Site Manager: TERMINALFOUR t44u 2013
Newcastle University & T4 Site Manager: TERMINALFOUR t44u 2013
Modular HTML & CSS Workshop
Modular HTML & CSS Workshop
Object oriented css graeme blackwood
Object oriented css graeme blackwood
Css framework
Css framework
How to develop a CSS Framework
How to develop a CSS Framework
Css framework
Css framework
960 grid psd
960 grid psd
Scalable and Modular Architecture for CSS
Scalable and Modular Architecture for CSS
Refresh OKC
Refresh OKC
Object oriented css. Graeme Blackwood
Object oriented css. Graeme Blackwood
Drupal 960 grid system based theming
Drupal 960 grid system based theming
Javascript Design Patterns
Javascript Design Patterns
Scoped CSS: To scope or not to scope
Scoped CSS: To scope or not to scope
Recently uploaded
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
Rishabh Aryan
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
diploma 1
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
208367051
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
vaibhavkanaujia
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
yuu sss
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
yuu sss
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
ssuser7cb4ff
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
mapanig881
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
nhjeo1gg
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作
7tz4rjpd
Design principles on typography in design
Design principles on typography in design
nooreen17
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Yantram Animation Studio Corporation
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
208367051
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
yuj
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
F La
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
kbdhl05e
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
MaryamAfzal41
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
CristobalHeraud
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
ttt fff
Recently uploaded
(20)
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作
Design principles on typography in design
Design principles on typography in design
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
An Introduction to Object Oriented CSS
1.
An Introduction to
Object Oriented CSS Scalable and Maintainable Stylesheets Nati Devalle - @Taly UX Designer
2.
Starting a project
from scratch
3.
4.
6 months later...
5.
6.
WHY?
7.
We keep piling
styles up
8.
instead of reusing
them
9.
Where do we
start? http://www.flickr.com/photos/mrlemming_photos/5750248841/
10.
Object Oriented CSS by Nicole Sullivan
11.
2 Principles 1. Separation
of Structure from Skin 2. Separation of Containers from Content
12.
2 Principles 1. Separation
of Structure from Skin 2. Separation of Containers from Content
13.
14.
15.
Structure Skin
16.
Structure Skin
17.
Scalable .ch-box-error {} .ch-box-attention {}
18.
Scalable .ch-box-error {} .ch-box-attention {} .ch-box-help
{} .ch-box-information {} .ch-box-ok {}
19.
Maintainable [class*='ch-box'] { border-radius: 5px; padding:
10px; margin: 0 0 10px 0; }
20.
Maintainable [class*='ch-box'] { border-radius: 20px; padding:
10px; margin: 0 0 10px 0; }
21.
2 Principles 1. Separation
of Structure from Skin 2. Separation of Containers from Content
22.
What’s Content?
23.
24.
What’s Container?
25.
http://www.html5code.com/tutorials/html5-semantic-layout-tags/
26.
Break the dependency between
content and container (So you can put the content in different containers)
27.
Use styles that
are specific to an element and don’t depend on location
28.
29.
30.
The Recipe 1. Identify
the pattern 2. Create a component library 3. Extend it http://www.flickr.com/photos/mlazarevski/8108416027/sizes/l/in/photostre
31.
32.
What’s The Pattern?
33.
34.
How did we
code this?
35.
How did we
code this?
36.
How did we
code this?
37.
38.
39.
Pattern = Reusable (and
consistency)
40.
Create a component
41.
42.
43.
44.
Extend
45.
46.
47.
48.
49.
Too similar? Choose one!
50.
Extend more
51.
Exceptions
52.
53.
54.
Not bad
55.
But it is
really necessary?
56.
Today 7 badges Saved 18+
repeated declarations
57.
58.
59.
60.
61.
20 badges Saved 57+
repeated declarations
62.
63.
And that’s just
ONE pattern
64.
Think of all
the others we can find http://www.flickr.com/photos/bdesham/2432400623/in/photostream/
65.
66.
and this
67.
and thiscould be
just this
68.
Success!
69.
70.
This could be
very tempting...
71.
But what if
it changes?
72.
73.
Future-proof
74.
Don’t forget about
semantics Embrace Semantics
75.
To sum it
up...
76.
If you have
to copy and paste just one single CSS declaration...
77.
78.
( Tweet me
at @Taly )
79.
● 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
Download now