DEV Community

Cover image for Why is CSS Hated On?
Gabriel Pedroza
Gabriel Pedroza

Posted on

Why is CSS Hated On?

I've seen a lot of posts about people despising css but I don't truly understand why. Is it the lack of foundation? Is it the specificity or the abundance of properties? If you guys want, I can create a multi-part series of CSS starting from the absolute basics to the advanced properties of CSS or I can create a huge cheat sheet on it for an easy bookmark. Let me know what you think of CSS in the comments and should I create an in-depth post or cheat sheet about it?

Discussion (32)

Collapse
facundocorradini profile image
Facundo Corradini

Cause it's out of their expertise. And even alien to their main way of thinking.

CSS has a logic behind it, but it's declarative nature makes it closer to linguistics than to the logical mindset of imperative programming or the spatial thinking of design.

People hating on CSS are either programmers or designers that are trying to shoehorn it into their way of thinking instead of taking the language for what it is: a language.

CSS describes the interface, provides suggestions for the browsers that at the end of the day have the final word on how things are rendered.
That is very different from drawing in a known-dimensions, fixed canvas as designers normally do, and even quite different from the set of logical instructions we write in traditional programming

Collapse
gabrielpedroza profile image
Gabriel Pedroza Author

That is very true and I didn't really think about that because truly, CSS is incomparable to any other language, whether programming or not. However, I do think CSS leans a lot more on rules and understanding on how some things just work than logic unless you are using SASS and making functions and for loops. Overall, thank you for explaining some things I didn't really consider when writing this ❤️

Collapse
facundocorradini profile image
Facundo Corradini • Edited on

Yeah, it's not like CSS is directly comparable to a spoken language, but the mechanism behind it are. Linguistic intelligence is linked to pattern and contexts recognition.

In all spoken languages a given word can have different meanings based on the context. Think for instance the word "lead". Without context, you can't really know what it means. You can't even know how to pronounce it.
Is it a lead as in “being in the lead”, the best position in a race? Maybe it’s lead, the toxic, radioactive metal we used to have in our house’s plumbing It may not even be meant as a noun but an adjective, as in "lead developer", meaning you’re in charge of the group. Or maybe as one of the 40 ways it’s used as a verb.

That same thing happens with CSS. A given instruction can mean a million different things, depending on the stacking context, the display property, block formatting context, etc.. even the relation of the given element with its siblings, parents and childs.

In CSS, just like in a spoken language, context is everything

Thread Thread
gabrielpedroza profile image
Gabriel Pedroza Author

I do understand what you mean by CSS needing context but from my current knowledge, it is not an absolute deal-breaker if you don't have any preconceived knowledge or context to it. For example, I can have about 5 props to this specific class selector and I can more or less depict what is happening to it. Granted, I will not know where or how it looks in the viewport because other selectors like the parent will have a direct impact on it but I am not totally in the dark of it either.

Thread Thread
facundocorradini profile image
Facundo Corradini

You can with a rule such as "color: red". The color is going to be red, unless overwritten in a high-specificity selector or something that takes priority on the cascade.

But how about something like "flex-basis: 200px"... that doesn't tell you anything on its own. Doesn't even tell you if it's width or height, as it would depend on the flex-direction. Doesn't really tell you how big it's going to be, as that would depend on the siblings' flex-basis, their flex shrink and flex grow values, the container width, the margin, padding and box-sizing, etc

Actually, it doesn't even tell you if it's going to do anything at all, as that depends on whether the parent is a flex container or not.

Thread Thread
gabrielpedroza profile image
Gabriel Pedroza Author

Yeah, now I do understand what you mean by CSS being extremely dependent on context. Now you saying that, it dawns on me that every single property could have the potential of not working if the html elements have inline-styles to it. Thank you for going out of your way and truly explaining this to me

Collapse
etienneburdet profile image
Etienne Burdet

Exactly, lot of people will disregard CSS as "not true programming", only as as strategy to hide the fact they can't use it properly when they face it.

I love the linguistic analogy. Everybody knows how to write, not everybody is Shakespear though… There is beauty to CSS (or similar declarative languages like LaTeX) and it's harder than it looks to find a simple, maintainable solutions, but it's a super efficient way of programming actually (entirely stateless!).

Now there is a second thing people hate: CSS is messed-up by three decades of browsers evolution. Some people will mix that reality—it's not a perfect world—with to dismiss the premise of the language—a declarative, stateless way to style.

Collapse
warwait profile image
Parker Waiters

Not the whole story, but here are some thoughts:

  • The web is so ubiquitous that a lot of non-programmers find themselves having to dabble in CSS but don't touch it enough to actually learn it.
  • CSS is a compile-to language. A lot of languages that actually have to run natively are pretty hard to use.
  • CSS used to be a lot worse, and experienced programmers are sometimes remembering a very old version of CSS where centering was pretty hard.
Collapse
gabrielpedroza profile image
Gabriel Pedroza Author

The first 2 points definitely make sense but CSS has been getting better over time. It is definitely not a programming language and maybe programmers think they can just write a few lines easily but it should almost be treated as one. Old CSS was very hard but we now have easy props like flexbox and grid to make responsive designs 100x easier. If a web developer is working with css, they can easily use the BEM naming convention and/or make modular css files to really make css "easier" to write and understand.

Collapse
damian_cyrus profile image
Damian Cyrus

I ♥ CSS. I just don't have time to catch all the new improvements that are supported by all major browsers at the time. 😅

I would throw another question to this, to make it a little less emotional: Why is X different?

From here on there will still be (flame) wars, but I have the feeling, that people don't hate the topic or object, but their own experience with it.

Some are reinventing things to make it more workable, and that is fine. You always want to make your work easier. Just look at all the CSS frameworks, CSS-in-JS inventions, and more crazy ideas you could never handle by a healthy brain, but it works for machines and software 🤷‍♂️

And it can't be hate when you did not loved it before, right? 🙃

Collapse
gabrielpedroza profile image
Gabriel Pedroza Author

Totally agree. There is so much css features and overall new things being added and different ways to write it but i see it like an 80-20 rule. 20% of what you learn in css (mainly fundamentals) will be used about 80% of the time.

Collapse
ben profile image
Ben Halpern
Collapse
gabrielpedroza profile image
Gabriel Pedroza Author

Programming is hard in general🥹

Collapse
peerreynders profile image
peerreynders • Edited on

When people talk about programming they are usually referring to imperative programming and CSS is declarative. Experience with imperative programming is no help with CSS or visual design.

It wasn't until ITCSS that I got a better grasp on the design philosophy behind CSS.

And frustratingly learning CSS doesn't move towards building design skills. Those are separate, unconnected skills and people don't usually practice design in the browser anyway. Web designers handing over designs to front-end developers smacks a bit of waterfall to me.

Right now everything is component-oriented and while CSS can be used for components it's much broader than that. As outlined by CUBE CSS it all starts with the page composition—that's an "outside-in" approach while components are an "inside-out" approach.

CSS was deliberately designed to let the global visual design "leak" into the blocks in order to create a more cohesive overall look.

Components tend to want to be autonomous and protective about their styling but often don't differentiate between their structure and skin (i.e. the global design should affect the skin but not the structure). So often components need to utilize design tokens in order to be consistent with the global, overall design.

Collapse
adam_cyclones profile image
Adam Crockett

CSS is great with a little help from some friends I still use post CSS and it's fine

Collapse
elitezen profile image
Elitezen

At first I strongly disliked CSS and it was one of the main reasons I stayed away from front-end development for a long time. I'd always end up creating a crooked and unaligned mess of a site whenever I attempted it. It wasn't until I took a step back and re-learned some of the basics - most importantly the box model - that I started to gain a strong understanding of the framework the language was laying out. Plain CSS still feel tedious which is why I use SASS now. but I believe anyone can conquer it if they take a few days to learn and understand it's core principals.

Collapse
edindevto profile image
Ed is Taking Note • Edited on

I love CSS ,and I think we should not consider CSS to be a programming language. CSS has nothing to do with programming. It's more like rules of settings. We may break the rules if we don't understand it enough. I heard people hate CSS simply because they don't thoroughly understand, and it's very likely that they may build some crazy things with wrong ways.
Unlike programming languages that keep changing a lot every year, once we know CSS rules, we can just follow it to do lots of things for years. It really pays off to fully understand CSS details, and that's why I love CSS.

Collapse
leob profile image
leob

They find it hard, and "hate" (or dislike, or whatever) is people's emotional reaction to the fact they find it hard and are unable to wrap their head around it.

There was another post about this subject, I added a comment there that might be relevant: dev.to/leob/comment/1p0gp

Collapse
aclarembeau profile image
aclarembeau

I would say, because it's a difficult one:

Sometimes, even things that look simple can be difficult. You can end up being frustrated, and have thoughts like: "Hey, I would just love to move that div". That makes you easily blame the language for being not good. But, the main question would be: can we design a more expressive language easily?

It's also hard to structure large programs with CSS, as you'll have to create a real "CSS architecture", using structures like ITCSS, BEM, etc... Many projects don't have it, and end up very hard to maintain. So, you can easily blame the language and tell "CSS is hard to maintain in the long run". But, the problem is that CSS needs to be structured to be maintainable (like any other language)

Collapse
shigetorum profile image
Edge

Most of the "hate" comes from people with lack fo experience in it, its easy to get frustrated in CSS.

But anyone who has some level of knowledge (not necesarily expertise) will tell you that CSS is purely logical. Most of it is made to make sense, and for small caveats, there's SASS, SCSS...

It's not really hate, just frustration.

Collapse
marinsborg profile image
Marinsborg.com

I don't hate it, I just did not bother to learn it well as a backend developer. Also, there are so many screen sizes that you need to support today.
However, I like to see what other people do with it and I like people's creativity.

Collapse
latobibor profile image
András Tóth • Edited on

In my own very subjective experience CSS gets a lot of roasting because of its early days. In the early 2000s there were many browser engines with half-baked implementation of the standards.

You built up your site in Internet Explorer 6? How cute 🤩. Now it looks like crap in Firefox... One browser had default margins and paddings, the other didn't, things that were not exactly specified by the standards (like negative margin values) got implemented in widely different ways and so on.

With the unreliability of the effects of the declarations, it soon became a running joke to struggle with CSS, and people often felt it is witchcraft instead of engineering. Witchcraft in the sense that you have to inherit a recipe for a concoction from somebody as you have no chance figuring it out yourself: "Well, you know, what you wrote is OK in this browser but now just copy-paste this block to make it work in everything else."

Though language itself was mostly logical (there are still issues coming from the huge vocabulary you need to learn), but its support was not; you had to learn a ton of non-reusable workarounds, that made it unpopular. (I wrote about non-reusable knowledge: it is a must to be an effective engineer, but you hate gaining every bit of that knowledge...)

That was one source of unpopularity. The another one was a missing dimension of freedom. CSS was intended to describe documents in an effective, overridable way: with a couple of great rules you could style a huge amount of documents with very little code.

But the same thing did not work when you had multiple teams working in a big application. When one team had its implemented its own notification-dot and then another team their own notification-dot declarations, the resulting conflict meant that things were breaking without warning. The language itself did not have a trivial, explicit way to express isolation from other's code (with the advent of CSS layers, we might have this ability).

And in a big corporation isolation is important thing as people does not have the time to ask every team's every developer if it OK, that they will have a .notification-dot class.

Then people started "fixing" CSS by inventing abominations that went against the nature of cascade and caching, like forcing CSS to be created during JS runtime to be tightly linked to the one component it was used for. This essentially robbed the browser engine to effectively cache stylesheets and speed up rendering.

But in 2022 the standard got adopted pretty well, most browser engines are gone and there are very good training materials. So it is time to embrace the cascade and write smart, fluid designs. (Tip: Every Layout -> one of my favorite new sources).

Collapse
eljayadobe profile image
Eljay-Adobe

CSS is fabulous, and powerful.

Haters gonna hate.

Collapse
atulcodex profile image
Atul Prajapati

I still love CSS

Collapse
johannes5 profile image
Johannes5

I just despise having to open a document and change some values (and sometimes even having to refresh the page) before seeing a result. That's like making Typewriter art.

Don't blame a designer wanting to create components in a design tool, where he can drag, resize and otherwise use interfaces that represent the desired behaviour better than a bunch of css keys that have to coexist in the right way (with multiple gotchas to look out for).

Luckily, there is a tool called Plasmic.app which not only generates components for, but keeps their design (in Plasmic Studio) in sync with your codebase. And also allows you to "register" pre-existing components to configure them in Plasmic or insert public components like Antd. And you can directly feed components with content from your CMS without having to touch code at all.
And if you decide using their "Codegen" option (React only), you have little to be desired in terms of customisability. Your own, let's say "Modal" component, wraps a "PlasmicModal" component. Which you wont touch directly(because it will be overwritten), but you can manipulate its elements and variants and slots(content) via props.

Collapse
bmassioui profile image
Bouchaib MASSIOUI

I could say that the most of them are surly Software Developer which is normal to despising CSS in my opinion (am one of them ...:) ), they are mostly mastering all what about the Business Logic and nothing else. They love consuming existing UI component for front instead of understanding what each color refers to unlike Website developer they are familiar with building a design from scratch .... like using bootstrap, Semantic UI ...

Collapse
ianhobbs profile image
ian hobbs

Neither. There are great resources for learning CSS out there, books blogs posts. I was thinking recently that working effectively with CSS is to work with 'knowing' browser behavior. Knowing the cycles of load, layout, paint. delay etc. We are wrestling with multiple vendor approaches to visualizing content and that is often seen as a kind of war with all kinds of forces. Network speeds, loading sequence, display resolution etc. It's messy and complex and the css rules are "advisory" or hints for the browser.

I suspect that some coders like dry and hard guaranteed outcomes of their code. CSS lives in a messy world of drama and negotiation of forces outside the code.

I think a stick-man cartoon of CSS vs browser might be a better investment of time. :)

Collapse
paulnthompson84 profile image
Paul Thompson • Edited on

Because it's:

  • declarative
  • rule/algorithmically based (so it helps to know them, but not everyone bothers)
  • global (some people don't like global scope, the cascade, author scoping systems)
  • doesn't yet have adequate error messages/feedback for developers
  • deceptively simple

But I ❤ it.

Collapse
abbeyperini profile image
Abbey Perini
Collapse
hacker4world profile image
hacker4world

Css seems very low level, you have to modify the smallest things to make something look good that's why you see frameworks trying to simplify the process

Collapse
diballesteros profile image
Diego (Relatable Code)

Fear of the unknown. Like almost everything in life it has its quirks. But theres a pattern to everything. Its just about dedicating time to learn how it works and then the hate will go away.

Collapse
brojenuel profile image
Jenuel Oras Ganawed

but I believe their are more people who love CSS. Unless if we talking about work flow, specially comparing css, scss, sass, tailwind, windicss.