DEV Community

Discussion on: If you could start over from scratch, how would CSS work?

Collapse
 
le_newtype profile image
Nicholas ―M―

Remember when everything was essentially tables for layouts? 🙃 Or float based? Seeing people saying “centering is easy!” is both heartwarming and makes me feel like I’m 26 going on 80.

Anyway~

In my humble opinion, these would be some things I would include if we could take today’s knowledge and apply it to CSS from the get-go:

  1. Easier support for horizontal and vertical alignment. Grid and Flexbox weren’t always around, and when you had clients that INSISTED on using IE 7, even after it was officially declared to be dead, you are left with a lot of bad memories of shady hacks and cutting corners to make the browser act like it can think vertically, rather than horizontally. This is obviously much easier today, but it definitely wasn’t always something in everyone’s toolbox. Applying the knowledge of today, having this would be a no-brained

  2. Variables: another thing that may seem obvious, because this is becoming common place, css variables were not always a thing. Instead, I was taught to use SCSS for scalabitly and reusability. Going back, these dudes should be included in a redo

  3. Uniform spec interpretation: vendor prefixes are becoming less common, but there are still differences in how browsers render. Firefox handles margin and padding kind of differently without box-sizing, IE supported filters, then dropped them in a new version, and Opera Mobile apparently doesn’t support anything fun, according to caniuse. Even recently, I struggled with a task at work to add gradients around an image so it looks like it fades out of the background. Problem is, Safari interprets transparent gradients as black, where as Chrome and FF think of it as invisible (which is what I wanted). Neither are wrong intrinsically, but they’re different ways of reading the spec that quite honestly ruined my life for 3 days.

4 Nesting: it just makes sense