oocss & progressive css3 selectors
DESCRIPTION
A presentation from Daniel Sternlicht's lecture about OOCSS & Progressive CSS selectors.TRANSCRIPT
![Page 1: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/1.jpg)
OOCSS &Progressive CSS3 Selectors
By: Daniel Sternlicht http://www.danielsternlicht.com
![Page 2: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/2.jpg)
CSS SelectorsAll over again…
![Page 3: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/3.jpg)
Element
p { text-align: center;
}
a { text-decoration: underline; color: blue;
}
![Page 4: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/4.jpg)
#ID
#wrapper { text-decoration: underline; color: #fff;
}
![Page 5: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/5.jpg)
.Class
.box { text-decoration: underline; color: #fff;
}
![Page 6: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/6.jpg)
* All
* { text-decoration: underline; color: #fff;
}
div * { text-decoration: underline; color: #fff;
}
![Page 7: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/7.jpg)
Child Selector
.box p { text-decoration: underline; color: #fff;
}
.box div ul li p span.error { background: red; padding: 5px;
}
![Page 8: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/8.jpg)
Direct > Children
ul li { text-decoration: underline; color: #fff;
}
ul > li { text-decoration: underline; color: #fff;
}
![Page 9: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/9.jpg)
Adjacent + Selector
ul + p { text-decoration: underline; color: #fff;
}
Select the first “p” after each “ul”
![Page 10: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/10.jpg)
Sibling ~ Selector
ul ~ p { text-decoration: underline; color: #fff;
}
ul + p { text-decoration: underline; color: #fff;
}
![Page 11: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/11.jpg)
:hover
a:hover { text-decoration: undeline; color: blue;
}
![Page 12: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/12.jpg)
::first-letter
p::first-letter { font-size: 56px; color: blue;
}
p::first-line { font-weight: bold; color: yellow;
}
![Page 13: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/13.jpg)
CSS3Selectors
![Page 14: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/14.jpg)
:checked
input[type=radio]:checked { border: 1px solid red; padding: 10px;
}
http://tympanus.net/Tutorials/CSS3Accordion/index.html
![Page 15: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/15.jpg)
:not(selector)
*:not(p) { background: #000; margin: 0 auto;
}
div:not(#container) { background: #000; margin: 0 auto;
}
![Page 16: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/16.jpg)
:nth-child(n)
ul > li:nth-child(2) { text-decoration: underline; color: #fff;
}
ul > li:nth-child(6n) { text-decoration: underline; color: #fff;
}
![Page 17: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/17.jpg)
:nth-last-child(n)
ul > li:nth-last-child(3) { text-decoration: underline; color: #fff;
}
Start counting from the end
![Page 18: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/18.jpg)
:nth-of-type(n)
div ul:nth-of-type(2) { text-shadow: 1px 1px 0 #000; padding: 5px;
}
Select the second element from a specific type
![Page 19: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/19.jpg)
:nth-last-of-type(n)
ul:nth-last-of-type(2) { text-shadow: 1px 1px 0 #000; padding: 5px;
}
![Page 20: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/20.jpg)
:first-child
ul li:first-child { text-shadow: 1px 1px 0 #000; padding: 5px;
}
ul li:nth-child(1) { text-shadow: 1px 1px 0 #000; padding: 5px;
}
![Page 21: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/21.jpg)
:last-child
ul li:last-child { text-shadow: 1px 1px 0 #000; padding: 5px;
}
ul li:nth-last-child(1) { text-shadow: 1px 1px 0 #000; padding: 5px;
}
![Page 22: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/22.jpg)
:only-child
div p:only-child { display: none;
}
Select only if the element is the only child
![Page 23: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/23.jpg)
:only-of-type
div p:only-of-type { display: none;
}
![Page 24: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/24.jpg)
OOCSSO b j e c t O r i e n t e d C S S
![Page 25: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/25.jpg)
Say What?!
![Page 26: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/26.jpg)
Purpose
Code Reuse Shrinks CSS Files Faster Webapps
![Page 27: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/27.jpg)
Principles
![Page 28: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/28.jpg)
Structure
Skin
![Page 29: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/29.jpg)
.button { width: 200px; height: 50px; }
.box { width: 400px; overflow: hidden; }
.widget { width: 500px; min-height: 200px; overflow: auto; }
.skin { border: solid 1px #ccc; background: red; box-shadow: 2px 2px 5px #000; }
#button { width: 200px; height: 50px; padding: 10px; border: solid 1px #ccc; background: red; box-shadow: 2px 2px 5px #000; }
#box { width: 400px; overflow: hidden; border: solid 1px #ccc;Background: red; box-shadow: 2px 2px 5px #000; }
#widget { width: 500px; min-height: 200px; overflow: auto;border: solid 1px #ccc; background: red; box-shadow: 2px 2px 5px #000; }
ID 2 Class
![Page 30: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/30.jpg)
Content
Containers
![Page 31: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/31.jpg)
<header>
Header content
</header> <div id="wrapper">
Main content
</div> <footer>
Footer content
</footer>
Header
Content
Footer
![Page 32: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/32.jpg)
.globalWidth { width: 960px; margin: 0px auto; padding: 10px; }
header { width: 960px; margin: 0px auto; padding: 10px; border-bottom: 1px solid #c7c7c7;box-shadow: 2px 2px 5px #000; }
#wrapper { width: 960px; margin: 0px auto; padding: 10px; Background: red; box-shadow: 2px 2px 5px #000; }
footer { width: 960px; margin: 0px auto; padding: 10px; min-height: 10px; box-shadow: 2px 2px 5px #000; }
ID 2 Class
![Page 33: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/33.jpg)
Guidelines
![Page 34: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/34.jpg)
• Avoid IDs as styling hooks
• Avoid attaching classes to element in your stylesheet (p.error)
• Don’t ever use !important
• Use / Write your own CSS Grids
• Test your CSS code with CSS Lint
![Page 35: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/35.jpg)
Why?
![Page 36: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/36.jpg)
Faster Websites
![Page 37: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/37.jpg)
Speed
![Page 38: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/38.jpg)
Maintainable Stylesheets
![Page 39: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/39.jpg)
OOCSS.com
![Page 40: Oocss & progressive css3 selectors](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c7601f4a79593a288b457f/html5/thumbnails/40.jpg)
Questions?