I worked with CSS for a long time before I actually learned what the principles behind it were. The cascade, specificity, inheritance and box model are crucial to understanding how and why CSS works (or doesn’t work).
You’re right about Flexbox and Grid making things a lot easier. As I get longer in the CSS-tooth, the importance of using the right units is becoming clearer, but that’s quite a large topic and context-specific.
My main focus is JavaScript specialising in frontend UI with React. I like to explore different frameworks and technologies in my spare time. Learning languages (programming and real life) is a blast.
Location
London
Education
Bachelor of Design Innovation in Media Design, Victoria University of Wellington
Fonts set with rem are easier to control than em, and if you use that then em becomes a really handy method of specifying space around those elements. I’ve been experimenting with variations on font-size: calc(1rem + 0.3vw); as a way of setting font sizes that don’t need media queries.
Then there are things like trying to use max-width instead of width etc. Really depends on the context. 🙌
My main focus is JavaScript specialising in frontend UI with React. I like to explore different frameworks and technologies in my spare time. Learning languages (programming and real life) is a blast.
Location
London
Education
Bachelor of Design Innovation in Media Design, Victoria University of Wellington
I worked with CSS for a long time before I actually learned what the principles behind it were. The cascade, specificity, inheritance and box model are crucial to understanding how and why CSS works (or doesn’t work).
You’re right about Flexbox and Grid making things a lot easier. As I get longer in the CSS-tooth, the importance of using the right units is becoming clearer, but that’s quite a large topic and context-specific.
Interesting to hear how your understanding evolved over time, I think I had a similar experience.
With regards to units, I see beginners using pixels for everything! Do you have any tips on choosing which units to use and why?
Such a big topic! That said...
Fonts set with
rem
are easier to control thanem
, and if you use that thenem
becomes a really handy method of specifying space around those elements. I’ve been experimenting with variations onfont-size: calc(1rem + 0.3vw);
as a way of setting font sizes that don’t need media queries.Then there are things like trying to use
max-width
instead ofwidth
etc. Really depends on the context. 🙌I know it’s a big topic but thanks for sharing those great tips. The
font-size
calculation looks great.I’m loving
vw
andvh
units at the moment for making things more responsive.