Front-end developer from Melbourne, Australia.
Ways to maximize misery with CSS
Notes: CSS has cascade in its name, so we should use it, at every possible time right?
That's right! At all times, I repeat at all times cascade everything!
Notes: Move all your custom and bespoke CSS to a parent selector (lets say body)
Display: gif moving specific styles into one selector
Notes: This will ensure you’re not entirely sure where the style is from!
Display: putting in a plain p tag and it suddenly having styles from somewhere else
Notes: If you need to remove the default styling you will need to override all the properties, and attempt to get it back to where you need it.
This also brings us to our next point....
Display: adding a class to remove all these extra and strange styles.
Notes: Increasing specificity of selectors as early as possible
Deeply nesting is key here.
Display: an animation of selectors "popping" onto a selector increasing specificity.
Notes: In the event that styles are still not applying, jump straight for an !important
Display: animate, !important on, finally making the style appear on screen
Notes: Remember the key here is to increase specificity as early as possible and as much as possible, keep those nasty cascaded styles at bay. A good practice for this is to override styles using inline styles.
We want to make sure the only way to override these styles is to continue to nest or increase specificity ever further
Display: Animate us changing the styles again via inline
< styles.css >
The only file you'll ever need
- some developer somewhere
What this talk is based off
Video screenshot, book screenshot
What you should actually take away from this talk
ways to maximize misery with CSS
By Aaron Vanston