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,615 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
  • I have done a couple of papers through ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ they have always been great! They are always in touch with you to let you know the status of paper and always meet the deadline!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Yes you are right. There are many research paper writing services available now. But almost services are fake and illegal. Only a genuine service will treat their customer with quality research papers. ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thank you for sharing this interesting information here. Great post. And I agree with you that it is really hardly to find a student who enjoys executing college assignments. All these processes require spending much time and efforts, that is why i recommend all the students use the professional writing service ⇒ www.HelpWriting.net ⇐ Good luck.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Unlock Her Legs - How to Turn a Girl On In 10 Minutes or Less... ♣♣♣ http://ishbv.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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.

×