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

[Andrew Baisden]

In my opinion CSS was much harder back in the day when everybody was forced to use floats and clearfix to put together a design. Or even worse in the dark days of web development when everybody used tables.

Now with flexbox and css grid its much easier.

[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-...

[Eckehard]

Mybe it´s worth looking back to the roots of CSS.

HTML and CSS have been invented in a time, where networks had a very limited capacity and people used acoustic modems on a telephone line to access the internet. HTML some features to make documents more readable (like headlines and bold face) with a minimal overhead, but you could not even use color (because people at CERN had only monochrome displays).

To make document more readable, CSS was the perfect solution. Instead of adding format information to every part of the document, CSS simply changes how the machine works: You only define once to make all headlines red, not for every headline you use.

This was really efficient so save bandwidth, but gave you some headache if you need special formatting for a single item. That is where the trouble starts: You need to define some qualifiers like id´s in HTML and use them in CSS (or - if you like - define some classES in CSS and use it in HTML). That gives you a serious amount of overhead, if you want to apply CSS to a single element and makes things hard to maintain. You can use inline styles instead, but that makes it even harder to maintain. And - may have some serious unwanted side effects too.

CSS has some serious design flaws. Most of all:

• definitions and identifiers always have a global scope (except inline styles).
• styles are evaluated in a very special way. The larger your ecosystem is, the harder it will be to determine, which style is finally applied to an element.

There have been several attempts to solve this, but most of them seem to solve one problem but give you two new headaches.

The only thing you can say about CSS is: It is like it is. I´m pretty sure that - if somebody had to invent a new internet from scratch on a current hardware - things would look very different from what we see today.

[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?

[Gabriel Pedroza]

I don't think is hard, I just think people, web developers mainly, need to spend more time having a good foundation on it in order to propagate into more difficult topics. IMO, css should almost be treated as its own programming language.

[DanK1368]

I'm quite new into web-development, and when I started applying css on my own i found what makes it hard in the beginning is that there are tons of properties to apply for styling, it can feel overwhelming. But as you work on more projects, there are certain properties that you will end up using almost always, like display: flex, justify-content, font-size etc. And as you use them more often you will understand how they behave, and also relate to one another.

I would also say, that what can make css hard to apply, is the structure of the html file. If the html is not structured properly, one might spend more time getting the correct layout done compared to if the html file was structured differently.

[Deon Rich]

Because CSS hates you. It hates all of us.

[Freddie]

Because you actually have to learn how it works. Not just which properties to use but also CSS-specificity and everything around html as a whole.

People don't want to learn and and expects frameworks to do everything for them.

[Merthod]

It's a cumulative thing since many years ago that never purges itself, thus making its solutions very inconsistent over time.

[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.