Ways to maximize misery with CSS

5

James Formica

Aaron Vanston

1

Cascading everything

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.

2

Specificity

http://www.standardista.com/css3/css-specificity/

 

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 

3

Monolithic CSS

< styles.css >

The only file you'll ever need

- some developer somewhere

Cognitive

overload

is

underrated

Miserable Tip:

4

Fixed widths

5

Generic classnames

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

ways to maximize misery with CSS

  • 375