Your CSS is Awesome
-
Upload
joanna-franchetti -
Category
Technology
-
view
171 -
download
0
Transcript of Your CSS is Awesome
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