YOUR CSS IS

AWESOME

HELLO!

I am Jo FranchettiI’d like to give you 10 rules to make your css awesomeYou can find me at @thisisjofrank

RULE 0:DO NOT BE ON FIRE

RULE 1:THE LEAST SPECIFIC SELECTOR IS THE BEST

<nav class="nav"><ul class="nav__list">

<li class="nav__list__item"> <a href="#events" class="nav__link">What's on</a> </li> ... </ul></nav>

HOW MANY OF YOU WOULD SELECT THE A TAG LIKE THIS?

Be honest!

.nav ul li a {

}

1. inline styles2. ids3. classes4. elements

SPECIFICITY

.nav ul li a {

}

.nav ul li a {color: green;

}

...

.nav__link {color: blue;

}

1. inline styles2. ids3. classes4. elements

SPECIFICITY

LEAST SPECIFIC SELECTOR

∎ Easy to override∎ Easy to change in the future∎ Gives markup structure, hierarchy of elements is

clear

.nav__link {color: blue;

}

RULE 2:NO NESTING(UNLESS ABSOLUTELY NECESSARY!)

∎ Unnecessary levels of specificity∎ Difficult to override∎ Difficult to maintain∎ Nightmareish code created by your

preprocessor

NESTING

Take this less than perfect HTML...

Style it with some less than perfect

SCSS...

OMG what have you created?!

∎ If you must, keep it to maximum 3 levels∎ Allowable exceptions - Pseudo elements

( :before, :hover, etc )

NESTING/COMBINED CLASSES

RULE 3:!important IS NOT YOUR FRIEND

.nav ul li a {color: green;

}

...

.nav__link {color: blue;

}

.nav ul li a {color: green;

}

...

.nav__link {color: blue!

important;}

RULE 3:!important IS NOT YOUR FRIEND

USED !important

THERE, I FIXED IT

∎ Only for use when you know that you will never want to override the value in the future (how often does that happen?!)

∎ It is not a quick fix solution, take a step back and look at your CSS structure, is it too specific?

∎ Will create bigger problems for you in the future.

!important

RULE 4:STANDARDISE YOUR FORMATTING

EASIER TO READ?

OR.nav__list {

width: 600px;margin: 10px 20px;padding: 10px;

background-color: #669900;}

.nav__list ul li a { width: 600px; margin: 10px 20px; padding: 10px; background-color: #669900; }

∎ Use multi line! It will help with version control and general legibility

∎ Indent your attributes∎ Choose a type of indentation and stick with it∎ Use a CSS linter

This will help keep your attributes in a sensible order, will keep units and shorthand in track and will flag parsing errors

FORMATTING

RULE 5:MAKE YOUR CSSMODULAR

CSS MODULES ARE LIKE LEGO!

MODULAR CSS∎ Base rules∎ Module styles∎ Layout styles

BASE RULES∎ Applied with an element selector∎ No classes or IDs∎ Define default styles∎ Includes

□ Reset styles□ Typography□ Colour and size variables

MODULE STYLES∎ Break your design up into discrete sections∎ A module can be a single element, a group of

elements or a group of groups, you decide what works for your design

∎ Eg. Navigation bar, carousel, dialog box, article, spaceship...

LAYOUT RULES∎ Layout rules define

where your modules go

∎ They are the ‘major components’ of the page

∎ Eg. Header, footer, sidebar.

RULE 6:SPLIT YOUR MODULES INTO INDIVIDUAL FILES

RULE 7:SPLIT YOUR MODULES INTO INDIVIDUAL FILESOooh

so organised!

reset layout rulescolour palette

typography media queriessizing

helpers componentsextendables

RULE 7:STICK TO A NAMING CONVENTION

<nav class="nav"><ul class="nav__list">

<li class="nav__list__item"> <a href="#events" class="nav__link">What's on</a> </li> ... </ul></nav>

NAMING YOUR STYLES

∎ Check out the BEM naming convention∎ Choose a convention and stick to it∎ Makes your styles easier to debug and

search∎ Simpler for multiple people to work on

RULE 9:AVOID MAGIC NUMBERS

MAGIC NUMBERS∎ Found yourself doing margin-top: -37px ?∎ Does the designer really need padding-left:

11px when you have a 10px variable?

RULE 9:BOOTSTRAP ISN’T ALWAYS THE ANSWER

GO FORTH & Any questions?You can find me at @thisisjofrankdo feel free to ask me questions on there too!

CSS WELL

RESOURCESJo’s talk on BEM and SMACSS (with speaker notes) - https://docs.google.com/presentation/d/1Vb3_OkFVh3j-qkH6ZoZIEy2XDY7I23LPfAMkiMRDqJA

A great article on specificityhttps://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

CSS Helphttps://css-tricks.comhttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started