Enviar búsqueda
Cargar
An Introduction to Object Oriented CSS
•
5 recomendaciones
•
1,436 vistas
Nati Devalle
Seguir
Talk I gave for the Design team at MercadoLibre.
Leer menos
Leer más
Diseño
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 79
Descargar ahora
Descargar para leer sin conexión
Recomendados
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
Recomendados
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
escort service sasti (*~Call Girls in Prasad Nagar Metro❤️9953056974
escort service sasti (*~Call Girls in Prasad Nagar Metro❤️9953056974
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Delhi Call girls
Más contenido relacionado
Similar a 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 a 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
Último
escort service sasti (*~Call Girls in Prasad Nagar Metro❤️9953056974
escort service sasti (*~Call Girls in Prasad Nagar Metro❤️9953056974
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Delhi Call girls
Peaches App development presentation deck
Peaches App development presentation deck
tbatkhuu1
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Yantram Animation Studio Corporation
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
anilsa9823
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
Suhani Kapoor
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
Suhani Kapoor
The history of music videos a level presentation
The history of music videos a level presentation
amedia6
B. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdf
University of Wisconsin-Milwaukee
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptx
janettecruzeiro1
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure
Cheap Rate Call girls Kalkaji 9205541914 shot 1500 night
Cheap Rate Call girls Kalkaji 9205541914 shot 1500 night
Delhi Call girls
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
Call Girls in Nagpur High Profile
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Delhi Call girls
Presentation.pptx about blender what is blender
Presentation.pptx about blender what is blender
Ubaidurrehman997675
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
modelanjalisharma4
Cosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable Bricks
abhishekparmar618
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Cheap Rate Call girls Malviya Nagar 9205541914 shot 1500 night
Cheap Rate Call girls Malviya Nagar 9205541914 shot 1500 night
Delhi Call girls
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service Bhiwandi
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service Bhiwandi
Suhani Kapoor
Último
(20)
escort service sasti (*~Call Girls in Prasad Nagar Metro❤️9953056974
escort service sasti (*~Call Girls in Prasad Nagar Metro❤️9953056974
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Peaches App development presentation deck
Peaches App development presentation deck
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
The history of music videos a level presentation
The history of music videos a level presentation
B. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdf
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptx
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Cheap Rate Call girls Kalkaji 9205541914 shot 1500 night
Cheap Rate Call girls Kalkaji 9205541914 shot 1500 night
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Presentation.pptx about blender what is blender
Presentation.pptx about blender what is blender
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
Cosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable Bricks
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
Cheap Rate Call girls Malviya Nagar 9205541914 shot 1500 night
Cheap Rate Call girls Malviya Nagar 9205541914 shot 1500 night
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service Bhiwandi
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service Bhiwandi
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
Descargar ahora