What makes CSS so hard?

CSS can be really challenging — but it's hard for me to nail down what exactly makes it so. Would love to spark a conversation!

Comments

[Nicholas Stimpson]

Maybe it's because you've not been taught it properly? Did you learn the foundations first and build your knowledge steadily on top of them? Or do you just grab a bag of properties and start applying them to elements until your page looks right?

[Justin Henry]

I don't know how the OP will take this statement, but it does seem a bit condescending. CSS is not something you can perfectly tackle every time. You can improve on it with steady practices of using frameworks and organization, but there will always be something getting in your way (like another library's styles using !important or being applied at unexpected places).

The most difficult thing about CSS is that the order of importance, inclusion, and extension is extremely important, and most people do not have a proper way to make sure it is applied correctly 100% of the time. It's not necessarily about "not being taught properly", as "properly" is difficult to do if the 3rd party libraries don't do it "properly" either.

[Temani Afif]

but it does seem a bit condescending --> It's not but it's indeed the truth. I came here in a hope to find such a message and you reply also confirms what Nicholas said.

Frameworks and other tools are not doing the job correctly by promoting bad practices and wrong advises. Beginners will, unfortunately, get trapped there so the conclusion is --> you've not been taught it properly

When a framework is telling you that the future is to write inline styles and to stop separating the style from the content then for sure CSS will be very hard.

If on a Twitter a lot of "Grifters" are claiming that you can learn CSS in 1 Week and become a Front End developer in 3 months then for sure you will get frustrated and find CSS hard because it's impossible to learn CSS in 1 Week.

[leob]

There are multiple reasons for that.

I think one of the reasons is that it requires a different mental model compared to "normal programming" - programming in a language like Javascript or PHP is imperative - "first do this then do that" ... CSS is declarative - you declare the desired end result, and somehow the "engine" figures out how to get that result.

But what if the result isn't what you intended? With a language like Javascript or PHP there are ways to debug it - with CSS much less so, you then need to mentally 'debug' why CSS would have arrived at result B while you wanted A. And to do that you need to know the "rules" used by CSS - and the rules are many and complex, because CSS is huge.

One of the most complex topics in this regard with CSS is layout - CSS has at least 3 completely different layout "engines" built in (off the top of my head, "float", "flex box" and "grid", and probably I forgot one) each with their own set of rules. Just look at the number of Stackoverflow posts where people ask how to center something vertically, it's astronomical. Until "flex box" came along the ways to do this were often very unintuitive (using negative margins or something like that).

Second reason is because it was originally not designed with "app" development in mind - it was purely for document layout. Web 1.0 was static with simple layouts and minimal interactivity, then with Web 2.0 people were trying to do things with it for which it wasn't designed - hence the multitude of complex hacks that are typical for CSS (see remark above about vertically centering something).

Third reason is because it evolved a lot over the years (and is still evolving) - see example above with the layout models - originally there was only "float", then "flex" was added, then "grid". And one of the reasons why it evolved is because of the previous point - because it was starting to get used for things that it wasn't originally designed for, like developing "apps" - things then started to get added to the CSS standard to fill those gaps and shortcomings.

And the final reason why it's complex is just because it's huge - means it takes a long time to master. And the reason why it's huge is partially because of what I just mentioned - the standard evolved and new things got added - but, old things never get removed, so CSS keeps growing and growing.

So to summarize why I think CSS is hard to master:

• requires a different mental model (declarative versus imperative); hard to debug
• we're doing things with it for which it wasn't designed; leads to complex hacks
• it keeps evolving and things keep getting added; multiple ways to do something
• and it's huge, and growing; new stuff gets added, but old stuff never gets removed

[Ian B]

I think people assume that it's really easy, when in fact it's pretty complex.

I'd say learn the basics first, get into dev tools and see how other sites do the things you want to learn. I find making components in Codepen or a separate project help you not get overwhelmed when focusing on something that seems complex (as the cascade part of CSS is part of the complexity)

I really like the content by joshwcomeau.com he explains stuff so well, so you understand the fundamentals on why things work. This article in particular is awesome, helps you understand layout algorithms.

[Eljay-Adobe]

At one time, the team that I was on became very CSS savvy, since it was important for our product that the UI worked well, and the UI leaned on CSS heavily.

(The product was called Internet Explorer. It used to be popular, once upon a time. The team I was on worked on the F12 developer tools for IE10 and IE11.)

[Elliot Derhay]

That is a great way to describe this madness 😵‍💫

I'm tempted to frame this and stick it on the wall behind me in my office...with attribution of course. 🙃

[Marissa B]

Make it authentic with a brightly colored offset border and clipped text to show you were screwing with the alignment while making it 😂

[hacker4world]

Css feels a lot low level and it's challenging to make sth look great from scratch, that's why tou see libraries trying to simplify the process such as tailwind and bootstrap like you see react for javascript

[Max F. Findel]

I totally agree. If you're just starting out or you don't consider yourself an expert, libraries like Tailwind and Bootstrap really give you constraints and help you get started. Later on you can get more creative once you get the hang of it (with or without libraries).

[hacker4world]

But most people suggest that you learn css before a library

[András Tóth]

With the bootstrap direction I cringe every time I see people use flex as class-es. Basically you have to know and write flex to be able to use the flex utility classes. Then why not write flex in a stylesheet in the first place?

[ADS-BNE]

In my opinion:

• Usually many avenues to achieve the same result
• Inheritance (elements inheriting styles from other elements)
• Multiple views (mobile, tablet, desktop)
• Many, many styles to remember
• Multiple libraries can muddy the water

Here's my tips for working with CSS:

• Use your browser's inspector to test solutions quickly on the fly
• Don't forget to use the "Computed" tab in the Inspector to track down specific styles.
• Get to know BEM and SASS (and/or LESS).
• Avoid using IDs as much as you can.
• Avoid going too deep with style inheritance.
• Avoid being to specific with your classes. Eg dont have a contact-form-send-button class. Have a button--submit class instead.
• If you're using classes as identifiers for Javascript, do not have them share CSS styles. Eg for classes that are connected to a Javascript function I append them with js- eg : js-close-btn.
• Always style for mobile first
• Don't place media queries in the middle of your classes. Have medium, large etc styles grouped in their own media queries further down on the 1 file. Aim to have only 1 media query for each size per file.

[Pontakorn Paesaeng]

Difference between devices and browsers. I tried to do mobile-first design and it's very wide on desktop. Some elements must be hidden when the viewport reaches a specific width or height. Some elements are totally different on mobile and desktop. For example, a navigation bar may be just a horizontal bar on desktop but a bar with dropdown on mobile. There are so many things to consider.

[András Tóth]

My experience with bootstrap and design systems were a super overblown CSS ruleset, over a Mb bundled for every team's frontend part. So people crossing parts in the application meant to download those CSS bundles.

Of course, if people would have better knowledge over CSS and CSS tooling they could have just broken it up to have a separate CSS for just the design system, and one for their own app.

Then you have another problem of however modular and smart is your system, UX and UI design will figure out something unique: you should make exceptions for the customers. So in the end you will have a big, bloated design system for every use case, yet you are regularly writing exceptions, overrides and custom elements for actual use cases.

On the other side, a design system and existing elements are extremely productive. But it requires some really great CSS developers to find the right balance.

There is also a problem of CSS being a lowly thing that people just don't learn properly. And then they start to force the same methodologies that only work in the language they have learned them (e.g. a Java class oriented system in Java, a functional approach in JS). But CSS is designed totally differently, you can't "reuse" the same tricks from other languages.

every-layout.dev/rudiments/global-...