Ask HN: How to bypass learning CSS?

On a serious note, yes, CSS can indeed be dreadful. I learnt CSS back in 2001 when geocities.com/username was the equivalent of today's username.github.io. The web was simpler and wacky. My approach back then was to design simple websites and then tweak it little by little by adding CSS. Much like learning shell scripting, I think it takes a lot of practice to become fluent in CSS. After encountering a lot of weird issues and learning to resolve them or work around them, one learns to be able to write good CSS quickly that does what is desired while avoiding all its surprises and pitfalls.

My biggest learning moments while learning CSS were also some of the most frustrating moments, e.g., very long words breaking float containment, floats breaking div containment, etc. and then searching blogs on the web (Stack Overflow did not exist yet) to find a fix! A typical fix would look like black magic, e.g., add 'overflow: hidden' for Firefox and IE7, add another 'display: block' for IE6, and hope for the best!

After writing HTML and CSS in this manner like a caveman for those 4 years initially, Firebug arrived in 2005. Firebug, the precursor to today's integrated developer tools, was a game changer! I no longer needed to set backgrounds and borders around every HTML element to figure out how they were rendered and what was breaking. Firebug allowed me to inspect the box model and reason about it with ease. Using the browser developer tools and becoming fluent with the CSS box model is critical to learning CSS these days, I think. In fact, these days, I just open the browser developer tools and edit the styles on the fly to see the results live without having to refresh or rebuild the page. Learning CSS has become easier than before, although not as easy as I would like.

After about two decades of making fancy layouts with CSS, I have now gone back to making really simple web pages that just show a header, the content, and a footer. It feels much calmer this way! Yes, I know that MVPs these days are not built like this anymore. Nevertheless, starting simple and doing simple tweaks, at least for a hobby project could be a good way to learn CSS in my opinion!

[1] https://i.imgur.com/9qzBYbH.jpeg

I find that a lot of front end developers don't really understand the box model and everything they do is just learned patterns.

Once you understand how things are laid out then it becomes so much more fun and easy.

Now the hard part is the actual design but I wouldn't say that's your job as a developer unless you want to be a designer. Some of the funnest front end work I've done is taking someone's Sketch file and implementing it in CSS. Seeing things come together into an interactive web page.

If you don't want to write CSS or do any design then use a component library like bootstrap, tailwind, etc. Especially for an MVP.

But if you want something more bespoke then get someone to design a web page with documentation of all the sizing like font sizes, margins, padding etc. And learn to implement that, it's a lot easier than many people think. Especially now that you don't need to care about IE.

1. https://css-tricks.com/snippets/css/complete-guide-grid/

2. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

3. Googling 'css ' because there is just too much syntax for an occasional user to commit all of it to memory.