Hacker News new | ask | show | jobs
by tomelders 1030 days ago
It boggles my mind. CSS isn’t hard anymore.
2 comments

Was it ever hard? Most of those utility classes have always been a line of CSS away
Alignment used to be a big problem with CSS. Before improvements like flexbox and grid, people used to struggle to do basic alignment, like horizontal or vertical centering, or simply spacing items apart. There were a lot of (ab)uses of floats, tables, and relative/absolute positioning used for layout

IE, Chrome, Firefox, and Opera had their own separate rendering engines. IE was also notorious for running with "quirks mode" out of the box which basically meant that IE was render pages in a non-standard way by default

It was possible to develop things correctly, of course. But resources, both in terms of availability of documentation as well as time, were not as easy to find as they are today

It was tedious, sure. CSS2, especially, was just powerful enough but unstandardized enough that nothing worked quite right universally. Now, I can jump into CSS3 and throw a flexbox down or a grid and just tell it exactly what I want, in 1/8 the code and it'll work across all major browsers.
What is the best way of learning modern css?
I recently enjoyed reading https://every-layout.dev. Even though I considered myself to be quite good at CSS, some of the ideas covered in that book (like thinking about how big your elements should be and let the browser handle the breaking instead of relying on media queries) was eye opening for me.
By having a reason to use it. Make something cool and complex and don't shy away from edge cases and best practices. Strive to improve every day and you will learn.
Interested too. I did several full courses and exercises on it (Freecodecamp, W3, Mdn, Codepip…) and I still struggle a lot to create clear UI and have each HTML element where I want them. I am looking at CSS frameworks (BEM, Tailwind) but I would like to master « vanilla » CSS.
It’s not a direct method, but really, you should try a) study the source code of the big ‘frameworks’ such as Bootstrap (especially if you dig into the comments & issues / patches that fixed worse practices with better practices) & b) hit F12 to start inspecting sites that are doing things interesting that you’d like to know about (but keep in mind they might not be experts & how you might improve it).