Oocss & progressive css3 selectors

1,403 views

Published on

A presentation from Daniel Sternlicht's lecture about OOCSS & Progressive CSS selectors.

Published in: Technology, Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,403
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Oocss & progressive css3 selectors

  1. 1. OOCSS & Progressive CSS3 SelectorsBy: Daniel Sternlicht http://www.danielsternlicht.com
  2. 2. CSS Selectors All over again…
  3. 3. Element p{ text-align: center; } a{ text-decoration: underline; color: blue; }
  4. 4. #ID #wrapper { text-decoration: underline; color: #fff; }
  5. 5. .Class .box { text-decoration: underline; color: #fff; }
  6. 6. * All *{ text-decoration: underline; color: #fff; } div * { text-decoration: underline; color: #fff; }
  7. 7. Child Selector .box p { text-decoration: underline; color: #fff; } .box div ul li p span.error { background: red; padding: 5px; }
  8. 8. Direct > Children ul li { text-decoration: underline; color: #fff; } ul > li { text-decoration: underline; color: #fff; }
  9. 9. Adjacent + Selector ul + p { text-decoration: underline; color: #fff; } Select the first “p” after each “ul”
  10. 10. Sibling ~ Selector ul ~ p { text-decoration: underline; color: #fff; } ul + p { text-decoration: underline; color: #fff; }
  11. 11. :hover a:hover { text-decoration: undeline; color: blue; }
  12. 12. ::first-letter p::first-letter { font-size: 56px; color: blue; } p::first-line { font-weight: bold; color: yellow; }
  13. 13. CSS3Selectors
  14. 14. :checked input[type=radio]:checked { border: 1px solid red; padding: 10px; }http://tympanus.net/Tutorials/CSS3Accordion/index.html
  15. 15. :not(selector) *:not(p) { background: #000; margin: 0 auto; } div:not(#container) { background: #000; margin: 0 auto; }
  16. 16. :nth-child(n) ul > li:nth-child(2) { text-decoration: underline; color: #fff; } ul > li:nth-child(6n) { text-decoration: underline; color: #fff; }
  17. 17. :nth-last-child(n) ul > li:nth-last-child(3) { text-decoration: underline; color: #fff; } Start counting from the end
  18. 18. :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
  19. 19. :nth-last-of-type(n) ul:nth-last-of-type(2) { text-shadow: 1px 1px 0 #000; padding: 5px; }
  20. 20. :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; }
  21. 21. :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; }
  22. 22. :only-child div p:only-child { display: none; } Select only if the element is the only child
  23. 23. :only-of-type div p:only-of-type { display: none; }
  24. 24. OOCSSObject Oriented CSS
  25. 25. Say What?!
  26. 26. PurposeCode Reuse Shrinks CSS Files Faster Webapps
  27. 27. Principles
  28. 28. Structure Skin
  29. 29. #button { .button {width: 200px; width: 200px;height: 50px; height: 50px;padding: 10px; }border: solid 1px #ccc;background: red; .box {box-shadow: 2px 2px 5px #000; width: 400px;} overflow: hidden; }#box {width: 400px; .widget {overflow: hidden; width: 500px;border: solid 1px #ccc; min-height: 200px;Background: red; overflow: auto;box-shadow: 2px 2px 5px #000; }} .skin {#widget { border: solid 1px #ccc;width: 500px; background: red;min-height: 200px; box-shadow: 2px 2px 5px #000;overflow: auto; }border: solid 1px #ccc;background: red;box-shadow: 2px 2px 5px #000;} ID 2 Class
  30. 30. Content Containers
  31. 31. <header> Header Header content</header><div id="wrapper"> Main content Content</div><footer> Footer content</footer> Footer
  32. 32. header {width: 960px;margin: 0px auto;padding: 10px;border-bottom: 1px solid #c7c7c7;box-shadow: 2px 2px 5px #000;} .globalWidth {#wrapper { width: 960px;width: 960px; margin: 0px auto;margin: 0px auto; padding: 10px;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
  33. 33. Guidelines
  34. 34. • Avoid IDs as styling hooks• Avoid attaching classes to element in yourstylesheet (p.error)• Don’t ever use !important• Use / Write your own CSS Grids• Test your CSS code with CSS Lint
  35. 35. Why?
  36. 36. FasterWebsites
  37. 37. Speed
  38. 38. MaintainableStylesheets
  39. 39. OOCSS.com
  40. 40. Questions?

×