API CSS

I canexplain

Why CSS Sucks

for you.

You are trapped by

CSS dogma

or

You don’t know the

basic rules.

Rule #1

Cascading

You know that.

But, how to stop it?

ul li {…}

ul li {…} ul li li {…}

ul li {…} ul li li {…} ul li li li {…}

¯\_(ツ)_/¯

Try this:

ul > li {…}

or

Useclassed div

.list-item {…}

Trust me, It works.

Rule #2

Specificity

What’s that?

Forexample:

<h1 class=“blue red pink”>

Which color is applied?

Pink?

Maybe

You can’ttell until

you go to check the Specificity.

.blue {color:blue}

.red {color:red}

.pink {color:pink}

If so,

h1

.blue {color:blue} h1.red {color:red} .pink {color:pink}

If so,

h1

Why?

.blue {color:blue} h1.red {color:red} .pink {color:pink}

h1.red {…}is more specific.

Orderdoesn't matter.

Unless

Specificities are all equal,

orderdo

matter.

Take care ofSpecificity.

Rule #3

Browsersare not

all same.

They are slightly

different.

Use the normalize

css.

http://necolas.github.io/

normalize.css

If you know the basics,

probablyyou heard

the CSS dogma,

Naming Convention.

“Class name should bea semantic phrase …

to prepare for modify the style in the future.”

like this,

.red {…}

.red {…}

.red {…} .caution {…}

.caution {…}

.caution {…}

more semantic

Forget this.

This idea is too old.

and against the software

development approach.

O.C.P.

Open/Closed Principal

“software entities should be open for

extension, …

but closed for modification.”

It’s true.

Trust me. (again)

You can't modify the existing

classes.

You can’t.

.caution {…}

.caution {…}

.caution {…} .color-red {…}

.color-red {…}

.color-red {…}

open for extension

closed for modification

.extention-modifier {…}

This is called

API CSS

Learn this.

Your CSS sucks

for more detail

http://byodkm.com/

apicss

Thank you.