DEV Community

Why is people so bad at css?

Gracrys on March 03, 2022

In many communities i have been, exists certain dislike towards writing css, people get frustrated, or tend to settle towards a certain technology ...
Collapse
 
lexlohr profile image
Alex Lohr

It's the same reason that so few people hand craft SVG files: you have to be part designer, part coder when doing that.

To let the cascade work for you instead of working against it, you need to have a mental model of the structure you want to style. Most developers don't want to bother with mental models, they want styles to be one-dimensional and imperative.

Lastly, CSS doesn't feel like a programming language, so it's frowned upon.

I personally like to get the most out of the languages I use, so I'm in favor of using CSS correctly, but I can accept that other people don't want that.

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

CSS doesn't feel like a programming language

Interestingly, this is exactly why I like CSS. It's very well adapted to its specific domain and has some very neat paradigms.

It's puzzling to me how some people would rather write a loop to set styles on individual element rather than just defining a rule and letting the browser do its thing.

Sometimes it really does seem to me like most developers who dislike CSS really just don't want to put in the time to learn it. Imperative programming is the type of hammer that makes everything look like a nail, and I just wonder why people are so fond of hitting their own thumbs.

Collapse
 
lexlohr profile image
Alex Lohr

It's puzzling to me how some people would rather write a loop to set styles on individual element

We had that before CSS; it was called JavaScript Style Sheets (JSSS) and I think we're rather lucky it never made it standard.

Collapse
 
jwp profile image
John Peters

I use CSS only because it's been forced on me. Kind of like Javascript was. At least Javascript is a real language. Visual Studio Code proves that.

Collapse
 
lexlohr profile image
Alex Lohr

Strange because a part of visual studio code is written in... CSS.

Thread Thread
 
jwp profile image
John Peters

Yes they were forced too.

Thread Thread
 
lexlohr profile image
Alex Lohr

How would you know that? Have you asked all of them? Or are you just projecting your bias against CSS on them?

Thread Thread
 
jwp profile image
John Peters

Not projecting any bias just stating a fact. If anyone wants style css MUST be used.

Thread Thread
 
lexlohr profile image
Alex Lohr

You could use tools like tailwind to reduce your direct exposition to CSS if you wanted to. It's not a dependency for vs code, though. So I'm not sure if your "fact" is actually factual.

Thread Thread
 
jwp profile image
John Peters

It's a tool on top of css, developed because css is dumb. Have you ever asked 'why are there so many Css tools'?

Thread Thread
 
lexlohr profile image
Alex Lohr

It's actually a library that abstracts parts of CSS away, similar to MVC frameworks that abstracts away DOM operations. And there are far more (complex) JS tools than there are CSS tools.

And you're wrong, CSS isn't dumb, but simple, and the kind of simplicity out of which complexity may arise, which is why many developers don't like it, yourself included.

Collapse
 
siddharthshyniben profile image
Siddharth

CSS is hard for most developers as they are used to IDEs autocorrecting your code, getting helpful popups when you do something wrong, etc. In CSS? You do something wrong, nothing. Trial and error is the main way to do stuff. You need to be designer and coder when you write CSS.

CSS isn't really straightforward. You don't have many algorithms to follow; most of the time you may have to eyeball it.

There are people who genuinely enjoy CSS. I wish I was one of them.

Collapse
 
lexlohr profile image
Alex Lohr

For properties, you usually get auto-correct. If you use CSS modules, you can even import class names to make sure they're correct.

CSS is easy to learn, difficult to master, which is frustrating once you learned but not yet master it.

Collapse
 
jwp profile image
John Peters

Because css is a DSL, it is not a true language and has zero refactoring support.

DSLS were; at one time, everywhere and everything. Today they are relics causing the issues we see in css.

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

it is not a true language

You must have a very interesting definition of "language", would you mind sharing it with us?

zero refactoring support.

Again, what is your definition of "refactoring"? It certainly isn't the definition most other developers use.

Today they are relics causing the issues we see in css.

And what would those issues be? CSS has its problems, just as any other language, but nothing even remotely close to offsetting the benefits the language brings with it.

Collapse
 
ravavyr profile image
Ravavyr

lol, every point they made is because they are a programmer, not a web developer.

Thread Thread
 
jwp profile image
John Peters

If css is so great why is there Tailwind. Bootstrap et. al., Less and Scss? Answer: css is a pos.

Thread Thread
 
ravavyr profile image
Ravavyr

This is the dumbest answer of the week.
You can't say CSS is a POS just because you're bad at it.
This is a sign of a bad developer. You don't like something, just because you don't know how to use it.

Tailwind and Bootstrap etc etc only exist because devs made tools that made things easier to use. The problem appeared when newbies started only learning the tools and then complain when they run into bugs the tools can't handle.

Much of CSS is based on user experience, a program can't tell if a human being is enjoying the experience [at least not yet] , it can only make sure the code follows certain rules.

The tools help some, but we don't need them when we know how to write CSS properly. This is something that takes time and people have little patience as you've just exhibited.

It's like buying IKEA because you don't want to go to Home depot to buy the wood and build your table yourself. Obviously if you've built enough tables, you won't bother going to IKEA. And it's not WRONG to just buy a prebuilt table, but don't complain when one of the legs is slightly wobbly later on and you can't fix it.

Collapse
 
optimisedu profile image
optimisedu

Relics are people who don't keep up with the evolution of CSS - language features such as variables and calculation.

Collapse
 
jwp profile image
John Peters

No comment other than, I can tell you like DSLs. Go for it!

Thread Thread
 
lexlohr profile image
Alex Lohr

But DSLs are the new languages of the web, be it JSX, svelte, Vue, angular, etc., whether you like it or not. If you don't like them, maybe you want to go into another branch of development than web.

Thread Thread
 
jwp profile image
John Peters

Tell me, how are they DSLs?

Thread Thread
 
lexlohr profile image
Alex Lohr

The domain is content markup, but they are not exactly (X)HTML, though they share a similar look; especially attribute values with {} show the difference.

Collapse
 
ravavyr profile image
Ravavyr

OP here is a bit to heavy-handed, demanding everyone do beautiful work when it comes to CSS and HTML.
You have to remember, the skin and bones of the frontend don't generally carry a website. The backend data is far more valuable and important. The larger a company gets, the more they care about that instead.
Those of us who do frontend code often find ourselves neglected with changes coming in as an afterthought to everyone else....UNTIL something breaks, then all hell breaks loose and we get yelled at.

CSS is easy. HTML is easy.
Both take a long time to master and even once you master them there will be exceptions that leave you cursing and scratching your head for hours.
Once you understand them though, you wonder why others can't.

The problem is that most developers [i generalize only because it's true] suck at both.

I can't count the number of times I've seen sites without correct meta tags [charset and viewport are imperative]

Sites without structured data or semantic elements [That's for SEO btw, THE single most important thing on a frontend site you want search engines to find]

Sites without CSS overrides for things like iframe/image max-width:100%; webkit-appearance:none; box-sizing:border-box; [these are basic things every site needs to avoid iframes and images extending beyond their parent and to make sure buttons and inputs display correctly on all browsers and devices. box-sizing being most important so 100% width actually means 100%]

There's a lot more, but i can't spell it all out here.

Most devs just don't know these rules and because they lack HTML and CSS fundamentals [just throwing that in to pick on hardcore programmers], they can't write good, clean and functional frontends that don't make people rip their hair out.

Most devs, again with the generalizing, i know, use bootstrap,tailwind, less/sass, and so on and so on and rely too much on these tools to do the thinking for them as far as CSS goes. So when they encounter a real world problem where they don't have access to those tools [or often even if the tools are there but someone else built it], they can't solve the actual problem.

Aside from the languages, a really hard skill to learn is when to look at an existing website, and decide "This CSS is utter crap, my choices are, rebuild it all, or just write a buncha overrides with !important to get the task done and move on".
Instead i've seen devs spend days trying to fix a tiny bug because they didn't want to "hack it". Guess what, in the real world we have budgets and timelines and that "hack" will last the 2-5 years it takes before they finally rebuild that site.

Collapse
 
hakimio profile image
Tomas Rimkus • Edited

The biggest issues with CSS I see are the following:

  • Features are only added and never removed, never deprecated. This makes CSS overwhelming to anyone who is just starting to learn it. CSS has a lot of legacy features, I would personally mark as "deprecated".
  • There are no "official"/"standard" guidelines explaining how to achieve certain common objectives using CSS. You have multiple old/clunky ways for legacy browser and you have new better ways for modern browsers. Without any official guidelines, a lot of people keep using old/overly complicated way instead of learning a new better way. For the same reason, people tend to prefer using UI libraries/frameworks where you have one clearly defined and documented way to success.
  • Different browsers interpret certain CSS rules slightly differently and without actually testing on all of them, you can not be sure that it will work exactly the same. This is not the case with UI libraries, where you are sure to get the same result in all browsers. There should be stricter CSS standards, making sure that there is no source of confusion and there is only one correct way CSS should be implemented.
  • Accessiblity/"Aria" can be quite tricky to implement correctly. Without clear and strict guidelines to achieve common tasks with full accessibility, people will always prefer UI libraries where they don't have to worry about it since the UI library creators already took care of accessibility for them.
Collapse
 
imcheesecake profile image
Freddie

Love the article and I agree with everything you say. I've been using pure CSS for as long as I can remember and now I could easily create my own Bootstrap/Tailwind/MUI for any project I get, but I would never do that JUST because most developers couldn't describe flexbox or grid to save their lives.

You don't have to like using CSS, you don't even have to be good at it but understanding how it works is as essential as any other "language" when you're writing code. Hell, even if you just learn the specificity you should be fine.
But I see way to many new developers who just relies on bootstrap in school and never learns how it actually works, and then when they enter the real world they get a slap in the face because they have to relearn everything from scratch.

I recommend everyone to at least skim through this book if they want to learn more

Collapse
 
devkiran profile image
Kiran Krishnan

I agree with you. As a backend developer, I always hack the CSS to make the things works. Never tried to learn the basics, most of the time the intention was to 'fix' it.

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

It's easy like other languages :) believe me

Collapse
 
lexlohr profile image
Alex Lohr

You can lint your css.

Collapse
 
hectorrperez profile image
HectorPerez

Excellent article. all very true