How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
-
Upload
robin-pokorny -
Category
Technology
-
view
586 -
download
0
description
Transcript of How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
@ROBINPOKORNY
BEAUTYFuture-Readyinto aUgly OldHow to Turn Your
CSSClean
$ git clone git@ :
Homepage http://localhost:9001/home
Homepage http://localhost:9001/home
Developer Tools
base.css:9float: 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>
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%
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%
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%
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%
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
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
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
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
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
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
2013
2005
1996
You do not write CSSfor
yourself.
1 2 3 4 5 6 7 8 910 1112 1314 index.html 1,1
HTML
1 2 3 4 5 6 7 8 910 1112 1314 1.css 1,1
CSS 1
1 2 3 4 5 6 7 8 910 1112 1314 2.css 1,1
CSS 2
1 2 3 4 5 6 7 8 910 1112 1314 3.css 1,1
CSS 3
.intro div:nth-child(2) p:last-child
.sidebar .wrapper .design nav
paint outCascade makes it
a page.
easyto
1 2 3 4 5 6 7 8 910 1112 1314 index.html 1,1
CSS
1 2 3 4 5 6 7 8 910 1112 1314 1.css 1,1
HTML 1
1 2 3 4 5 6 7 8 910 1112 1314 2.css 1,1
1 2 3 4 5 6 7 8 910 1112 1314 3.css 1,1
HTML 2
HTML 3
.sidebar .wrapper .design nav
btn btn-primary btn-lg<div class="
…</div>
">
CSS is a
pattern booknot a
crayon set.
OOCSS@stubbornella
// 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 910 1112 1314 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 910 1112 1314 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 910 1112 1314 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 910 1112 1314 base.css 1,1
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
NOW
FUTURE
CODEBASE
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
NOW
FUTURE
CODEBASE
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
NOW
FUTURE
CODEBASE
abcdefghijklmnopqrstuvwxyz IN 1 MIN
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
NOW
FUTURE
CODEBASE
It is OK not to be
perfect.
$ exitUser @robinpokorny <[email protected]> is now logged out.
Use utility hand to raise a question.