Knowing CSS is mastery to front end development

I disagree with many of the comments here. CSS is not too complicated. It's a good way to style HTML elements.

There are some popular abstractions to writing CSS such as Tailwind. Although I do see it misguiding a lot of people. When you don't know CSS but want a webpage, use a template instead. If you want deep custom styling you will need to understand CSS. Tailwind is just a collection of predefined utility classes which you then over use, breaking a few clean code principles along the way, but you get a decent looking website without writing all the utility classes yourself, which can be helpful especially in larger team projects.

There are improvements to this problem such as DaisyUI.

But regardless, they do require some understanding of CSS. And if you do understand some CSS, getting to the next level and learning how to write scalable CSS is not much harder. The simple requirement of having global and scoped styling is a given in every modern framework.

This is partly what led me to create a guide on writing modern scalable HTML and CSS: https://webdev.bryanhogan.com/

- Tailwind (wow, the website is laggy): https://tailwindcss.com/

- DaisyUI: https://daisyui.com/

- Some modern framework, e.g. Astro: https://astro.build/

It's astonishing to me how many front end developers refuse to learn how to use vanilla CSS and Javascript, and the lengths they go to avoid touching them. I think of a lot of modern web tooling as a giant mech suit developers climb into to do battle with the underlying technologies of the web. There's so many layers of abstraction between you and the medium you work in, you can go your whole career without learning how to build a website yourself.

The original justification was 'scaling' (a word that stands behind a lot of bad behavior, actually), because you cannot just write bare CSS for a large production website, obviously. But then it creeps down the ladder until pretty soon your hobby website is a 20 megabyte SPA with 500 NPM packages backing it.

I’m forking Shopify’s polaris-react library for my personal use and some of the components are clearly made to people who don’t know how to use CSS.

For example, there’s a component called “InlineStack” which is just a javascript wrapper for a div with flex. This stuff drives me nuts.

CSS for styling is straight forward (which makes sense since ‘CSS’ is cascading ‘styling’ sheets)

CSS for layout takes sometime getting use too.

For me, the benefit of any css framework is not in prepackaged styles - it’s in simplifying layout for desktop/tablet/phone.

For me TailwindCSS actually was helpful in learning CSS. You still apply the same core CSS fundamentals. If you created a complex layout in Tailwind, you can also do it in normal CSS. I look up the exact rules behind their classes frequently in their docs.

If you just copy classes and don't care to understand them, it's a different story of course.

The mastery to front end development is understanding the semantics of HTML.

At every single company I worked for, I had to teach people to stop using div tag for everything. You can style things however you want, or even create components that the browser does not allow you to style (as long as you have fallbacks).

"Knowing" CSS in these days is nearly impossible. There are so many language features. Don't get me wrong: CSS today is cool and nearly anything is possible (can Doom run wirh CSS by the way?), but I work as frontend dev for years and I have not the feeling I really know CSS in depth

Frankly, I feel like it goes even further than CSS. People don't really talk about HTML that much, probably just because it doesn't change as much as JS frameworks, etc. But that doesn't mean you should ignore it completely and just use a bunch of divs!

When you start digging into all the different HTML elements and aria guidelines (for example, the differences between `<nav />` and `<menu role="menubar" />`), I think development starts to be a bit more clear, because you start to see how your tools are intended to be used. I think it also makes decisions around CSS styling more clear. And as a bonus, your code just starts becoming more accessible, which is nice.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

This is why I fully moved to flutter. Everything, including styling, is just a widget. It’s surprisingly liberating to write boring C# looking code that accurately describes a UI component without inheritance, overrides, style compiling, etc

Between Tailwind and LLM generation I doubt I'll ever write more than a handful of CSS lines by hand in any future project I work on. CSS has, for me, become like the ASM output of the compilers I use. The result is good enough 99.999% of the time for me and I want to work at a higher level of abstraction.

Wow, so much hate against CSS here. I like CSS. I first learnt CSS in 1999 or something. Granted, it has grown much more complex (and powerful) since then, it has a lot of quirks, but it's not that bad.

Lately, I've built simple websites and small web apps in vanilla Javascript and CSS, without using any framework, and it's much more enjoyable than years ago.

I agree wholeheartedly. And IMO, CSS isn’t even difficult, it just requires you to properly and effectively visualize the cascade to handle downstream effects.

My problem is when people start using cognitive crutches such as LESS and SASS, which bloat the CSS immensely with insanely redundant styling. I once took a generated CSS file from a “professional” and cut it down from over 500kb to less than 180Kb with zero loss of functionality or presentation. One HTML widget had separate - and absolutely identical - CSS for each and every single one of the 25+ pages it was present on. That was 250+ lines of CSS, instantly evaporated by consolidating down to one common class and two special cases that had extra stuff. Which is insane.

At this point, if you know how the box model works and the difference between margin and padding, you're ahead of 50% of "frontend developers".

I agree. But I feel like nowadays knowing CSS is not necessary to land a job in FED - while knowing frameworks as React/Next/Vue/whatever is.

The comments here remind of the "Git isn't hard to understand" humblebrags that we hear again and again on this forum, surrounded by a sea of honest and justified criticism.

If lots of people complain about understanding your product - intelligent people - then your product is hard to understand. Why is the important question.

CSS is not the performance bottleneck.

CSS is also not difficult. Tailwind is absolute nonsense imo.

Either write some good simple plain css, use a framework with scoped css which already completely eliminates the need for tailwind, or use JavaScript css properties (with a slight performance penalty).

The performance issues are because of use of heavy frameworks, unoptimised images and 1000 ads and trackers which nobody asked for (except management of course).

Css is a garbage api. Styling things should not be this hard. We are stuck with it because of tech debt. That’s most of web technology today.

> To me, the main reason is different: You won’t be a master at frontend development if you don’t understand underlying mechanisms of a language.

True for any paradigm, not just frontend.

> Custom icons for an input field? Welp, it’s not that easy for privacy reasons to add a pseudo-class here in certain cases.

What exactly are those privacy reasons? And by custom icon for input field is meant replacing the cursor with e.g. an svg?

For better or worse, I’ve been using Tailwind since it was released. I’m not even sure I remember intermediate to complex CSS. Better places to spend time. I’m really grateful for what that team has done.

CSS is one of those things you can become very effective with, without knowing it all. I really don’t think you need to know it all.

I also think it has a lot of tools you don’t always need. Don’t go crazy with selectors!

Why CSS Modules are so unpopular?

CSS is still a masochistic mess that should be replaced

htmx

CSS: The AI's Achilles Heel

AI has maketh CSS obsolote

Master Css then get the AI to do it.