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

transcript

@ROBINPOKORNY

BEAUTYFuture-Readyinto aUgly OldHow to Turn Your

CSSClean

$ git clone git@ :

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>

#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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 base.css 1,1 0%

You do not write CSSfor

yourself.

1 2 3 4 5 6 7 8 910 1112 1314 index.html 1,1

1 2 3 4 5 6 7 8 910 1112 1314 1.css 1,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

.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

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%

#box .banner:first-child a {float: right; background-

1 2 3 4 5 6 7 8 910 1112 1314 base.css 1,1

abcdefghijklmnopqrstuvwxyz

FUTURE

CODEBASE

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

FUTURE

CODEBASE

FUTURE

CODEBASE

abcdefghijklmnopqrstuvwxyz IN 1 MIN

FUTURE

CODEBASE

It is OK not to be

perfect.

Criticismgood.is

~ @OliverJAsh

$ exitUser @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

Technology