Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@ROBINPOKORNY
BEAUTY
Future-Ready
into a
Ugly Old
How to Turn Your
CSS
Clean
$ git clone git@ :
Homepage
http://localhost:9001/home
Homepage
http://localhost:9001/home
Developer Tools
base.css:9
float: right;
background-
color: ;
<!DOCTYPE html>
    <hea...
Homepage
http://localhost:9001/home
#header h2.logotype { … }
#header .logotype a { … }
#layout_content maincap { … }
#lay...
Homepage
http://localhost:9001/home
#header h2.logotype { … }
#header .logotype a { … }
#layout_content maincap { … }
#lay...
Homepage
http://localhost:9001/home
#header h2.logotype { … }
#header .logotype a { … }
#layout_content maincap { … }
#lay...
Homepage
http://localhost:9001/home
#header h2.logotype { … }
#header .logotype a { … }
#layout_content maincap { … }
#lay...
Homepage
http://localhost:9001/home
#header h2.logotype { … }
#header .logotype a { … }
#layout_content maincap { … }
#lay...
Homepage
http://localhost:9001/home
#header h2.logotype { … }
#header .logotype a { … }
#layout_content maincap { … }
#lay...
Homepage
http://localhost:9001/home
#header h2.logotype { … }
#header .logotype a { … }
#layout_content maincap { … }
#lay...
Homepage
http://localhost:9001/home
#header h2.logotype { … }
#header .logotype a { … }
#layout_content maincap { … }
#lay...
Homepage
http://localhost:9001/home
#header h2.logotype { … }
#header .logotype a { … }
#layout_content maincap { … }
#lay...
Homepage
http://localhost:9001/home
#header h2.logotype { … }
#header .logotype a { … }
#layout_content maincap { … }
#lay...
2013
2005
1996
You do not
write CSS
for
yourself.
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...
.intro div:nth-child(2) p:last-child
.sidebar .wrapper .design nav
paint out
Cascade makes it
a page.
easy
to
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...
.sidebar .wrapper .design nav
btn btn-primary btn-lg
<div class="
…
</div>
">
CSS is a
pattern book
not a
crayon set.
OOCSS
@stubbornella
// Includes layout and typography
@import url('layout.less');
@import url('article.less');
@import url('navigation.less');...
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
NOW
FUTURE
CODEBASE
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmn...
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
NOW
FUTURE
CODEBASE
abcdefghijklmnopqrstuvwxyz IN 1 MIN
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
NOW
FUTURE
CODEBASE
It is OK not to be
perfect.
Criticism
good.is
~ @OliverJAsh
$ exit
User @robinpokorny <robin@medvedi.eu>
is now logged out.
Use utility hand to raise a question.
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
Upcoming SlideShare
Loading in …5
×

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

1,434 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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.

×