your css is awesome
TRANSCRIPT
![Page 1: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/1.jpg)
YOUR CSS IS
AWESOME
![Page 2: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/2.jpg)
HELLO!
I am Jo FranchettiI’d like to give you 10 rules to make your css awesomeYou can find me at @thisisjofrank
![Page 3: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/3.jpg)
RULE 0:DO NOT BE ON FIRE
![Page 4: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/4.jpg)
RULE 1:THE LEAST SPECIFIC SELECTOR IS THE BEST
![Page 5: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/5.jpg)
<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>
![Page 6: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/6.jpg)
HOW MANY OF YOU WOULD SELECT THE A TAG LIKE THIS?
Be honest!
.nav ul li a {
}
![Page 7: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/7.jpg)
1. inline styles2. ids3. classes4. elements
SPECIFICITY
![Page 8: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/8.jpg)
.nav ul li a {
}
![Page 9: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/9.jpg)
.nav ul li a {color: green;
}
...
.nav__link {color: blue;
}
![Page 10: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/10.jpg)
1. inline styles2. ids3. classes4. elements
SPECIFICITY
![Page 11: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/11.jpg)
LEAST SPECIFIC SELECTOR
∎ Easy to override∎ Easy to change in the future∎ Gives markup structure, hierarchy of elements is
clear
.nav__link {color: blue;
}
![Page 12: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/12.jpg)
RULE 2:NO NESTING(UNLESS ABSOLUTELY NECESSARY!)
![Page 13: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/13.jpg)
![Page 14: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/14.jpg)
∎ Unnecessary levels of specificity∎ Difficult to override∎ Difficult to maintain∎ Nightmareish code created by your
preprocessor
NESTING
![Page 15: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/15.jpg)
Take this less than perfect HTML...
![Page 16: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/16.jpg)
Style it with some less than perfect
SCSS...
![Page 17: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/17.jpg)
OMG what have you created?!
![Page 18: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/18.jpg)
∎ If you must, keep it to maximum 3 levels∎ Allowable exceptions - Pseudo elements
( :before, :hover, etc )
NESTING/COMBINED CLASSES
![Page 19: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/19.jpg)
RULE 3:!important IS NOT YOUR FRIEND
![Page 20: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/20.jpg)
.nav ul li a {color: green;
}
...
.nav__link {color: blue;
}
![Page 21: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/21.jpg)
.nav ul li a {color: green;
}
...
.nav__link {color: blue!
important;}
![Page 22: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/22.jpg)
RULE 3:!important IS NOT YOUR FRIEND
USED !important
THERE, I FIXED IT
![Page 23: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/23.jpg)
∎ 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
![Page 24: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/24.jpg)
RULE 4:STANDARDISE YOUR FORMATTING
![Page 25: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/25.jpg)
![Page 26: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/26.jpg)
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; }
![Page 27: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/27.jpg)
∎ 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
![Page 28: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/28.jpg)
RULE 5:MAKE YOUR CSSMODULAR
![Page 29: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/29.jpg)
CSS MODULES ARE LIKE LEGO!
![Page 30: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/30.jpg)
MODULAR CSS∎ Base rules∎ Module styles∎ Layout styles
![Page 31: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/31.jpg)
BASE RULES∎ Applied with an element selector∎ No classes or IDs∎ Define default styles∎ Includes
□ Reset styles□ Typography□ Colour and size variables
![Page 32: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/32.jpg)
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...
![Page 33: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/33.jpg)
LAYOUT RULES∎ Layout rules define
where your modules go
∎ They are the ‘major components’ of the page
∎ Eg. Header, footer, sidebar.
![Page 34: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/34.jpg)
RULE 6:SPLIT YOUR MODULES INTO INDIVIDUAL FILES
![Page 35: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/35.jpg)
RULE 7:SPLIT YOUR MODULES INTO INDIVIDUAL FILESOooh
so organised!
![Page 36: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/36.jpg)
reset layout rulescolour palette
typography media queriessizing
helpers componentsextendables
![Page 37: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/37.jpg)
RULE 7:STICK TO A NAMING CONVENTION
![Page 38: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/38.jpg)
<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>
![Page 39: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/39.jpg)
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
![Page 40: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/40.jpg)
RULE 9:AVOID MAGIC NUMBERS
![Page 41: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/41.jpg)
MAGIC NUMBERS∎ Found yourself doing margin-top: -37px ?∎ Does the designer really need padding-left:
11px when you have a 10px variable?
![Page 42: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/42.jpg)
RULE 9:BOOTSTRAP ISN’T ALWAYS THE ANSWER
![Page 43: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/43.jpg)
GO FORTH & Any questions?You can find me at @thisisjofrankdo feel free to ask me questions on there too!
CSS WELL
![Page 44: Your CSS is Awesome](https://reader035.vdocuments.site/reader035/viewer/2022070516/58705aca1a28aba2118b6687/html5/thumbnails/44.jpg)
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