Successfully reported this slideshow.
Your SlideShare is downloading. ×

How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
CSS 101
CSS 101
Loading in …3
×

Check these out next

1 of 47 Ad

How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty

Download to read offline

Slides from my WebExpo presentation: http://webexpo.net/prague2013/talk/how-to-turn-your-ugly-old-css-into-clean-future-ready-beauty/

I hope to add annotations soon.

Slides from my WebExpo presentation: http://webexpo.net/prague2013/talk/how-to-turn-your-ugly-old-css-into-clean-future-ready-beauty/

I hope to add annotations soon.

Advertisement
Advertisement

More Related Content

Similar to How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty (20)

Advertisement

Recently uploaded (20)

Advertisement

How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty

  1. 1. @ROBINPOKORNY BEAUTY Future-Ready into a Ugly Old How to Turn Your CSS Clean
  2. 2. $ git clone git@ :
  3. 3. Homepage http://localhost:9001/home
  4. 4. Homepage http://localhost:9001/home Developer Tools base.css:9 float: right; background- color: ; <!DOCTYPE html>     <head>         <meta charset="utf-8">         <meta http-equiv="X-UA-Compatible" content="IE=edge">         <title>Homepage</title>         <meta name="description" content="Just another demo">         <meta name="viewport" content="width=device-width">         <link rel="stylesheet" href="css/normalize.css">         <link rel="stylesheet" href="css/base.css">     </head>     <body>         <h1>Hello, this is Robin’s demo site.</h1> <p>
  5. 5. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0%
  6. 6. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0%
  7. 7. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0%
  8. 8. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0%
  9. 9. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0% About us http://localhost:9001/about-us Blog http://localhost:9001/blog Contacts http://localhost:9001/contacts
  10. 10. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0% About us http://localhost:9001/about-us Blog http://localhost:9001/blog Contacts http://localhost:9001/contacts
  11. 11. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0% About us http://localhost:9001/about-us Blog http://localhost:9001/blog Contacts http://localhost:9001/contacts
  12. 12. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0% About us http://localhost:9001/about-us Blog http://localhost:9001/blog Contacts http://localhost:9001/contacts
  13. 13. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0% About us http://localhost:9001/about-us Blog http://localhost:9001/blog Contacts http://localhost:9001/contacts
  14. 14. Homepage http://localhost:9001/home #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background-color: ; font-style: bold; border-radius: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0% About us http://localhost:9001/about-us Blog http://localhost:9001/blog Contacts http://localhost:9001/contacts
  15. 15. 2013
  16. 16. 2005
  17. 17. 1996
  18. 18. You do not write CSS for yourself.
  19. 19. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 index.html 1,1 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1.css 1,1 CSS 1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 2.css 1,1 CSS 2 1 2 3 4 5 6 7 8 9 10 11 12 13 14 3.css 1,1 CSS 3
  20. 20. .intro div:nth-child(2) p:last-child
  21. 21. .sidebar .wrapper .design nav
  22. 22. paint out Cascade makes it a page. easy to
  23. 23. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 index.html 1,1 CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1.css 1,1 HTML 1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 2.css 1,1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 3.css 1,1 HTML 2 HTML 3
  24. 24. .sidebar .wrapper .design nav
  25. 25. btn btn-primary btn-lg <div class=" … </div> ">
  26. 26. CSS is a pattern book not a crayon set.
  27. 27. OOCSS @stubbornella
  28. 28. // Includes layout and typography @import url('layout.less'); @import url('article.less'); @import url('navigation.less'); @import url('buttons.less'); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.less 1,1 0% #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background- 1 2 3 4 5 6 7 8 9 10 11 12 13 14 base.css 1,1 #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background- 1 2 3 4 5 6 7 8 9 10 11 12 13 14 base.css 1,1 #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background- 1 2 3 4 5 6 7 8 9 10 11 12 13 14 base.css 1,1 #header h2.logotype { … } #header .logotype a { … } #layout_content maincap { … } #layout_content div.maincap h1 { … } #layout_content div.maincap h1.beta { #layout_content .maincap .ghostcap #box .banner:first-child a { float: right; background- 1 2 3 4 5 6 7 8 9 10 11 12 13 14 base.css 1,1
  29. 29. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz NOW FUTURE CODEBASE
  30. 30. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz NOW FUTURE CODEBASE
  31. 31. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz NOW FUTURE CODEBASE abcdefghijklmnopqrstuvwxyz IN 1 MIN
  32. 32. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz NOW FUTURE CODEBASE
  33. 33. It is OK not to be perfect.
  34. 34. Criticism good.is ~ @OliverJAsh
  35. 35. $ exit User @robinpokorny <robin@medvedi.eu> is now logged out. Use utility hand to raise a question.

×