DEV Community

Sherry Day
Sherry Day

Posted on

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!

Discussion (50)

Collapse
alohci profile image
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?

Collapse
jwhenry3 profile image
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.

Collapse
afif profile image
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.

Collapse
natescode profile image
Nathan Hedglin

This ^. As a traditional back-end developer, I was guilty of this every thing. Claimed CSS was a stupid tool, when the only stupid tool was me.

I spent the time to actually learn CSS since it's nothing like other types of programming and now it's enjoyable. Sure there are still issues and quirks but that's typical of all software development.

Most learn CSS poorly and immediately start using some framework like Bootstrap.

Collapse
latobibor profile image
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?

Thread Thread
natescode profile image
Nathan Hedglin

The alternative is that you have to *know and write" yet another class or which existing CSS you can reuse (good look finding it)

  1. It's already written for you
  2. utility classes are easily composable without making yet another class for a specific component.

Tailwind class naming conventions are dead simple to learn and tooling will give you intellisense that also shows the raw CSS each class uses.

If you're on a large project then writing more CSS for a new component often means wasting time looking for CSS to reuse or worse making even more unmaintainable CSS. Why people like writing more and more CSS classes is beyond me.

Conventions like BEM define your HTML structure in CSS, which is just wrong. CSS should be HTML agnostic as possible.

It's like high-order functions vs the fragile base class inheritance problem. You'll get large specific classes that aren't reusable and your CSS grows. Sure there is Sass and Mixins but that takes a lot of continued diligence that teams just usually don't have.

The answer ends up being a design system. Design systems should start with the simplest most general purpose classes and get more specific. Utility classes are the simplest most general purpose classes.

Tailwind is meant to be used to build a design system of atoms that can be used to build more complex components.

My team uses atomic design. We rarely write new CSS for components or layouts. We basically reuse existing components to build completely new pages rapidly.

We're composing general purpose components together to make new use-cases specific ones.

Hope that helps. Tailwind is really misunderstood and misused. I'm NOT saying it is a panacea. If used correctly it can be pretty awesome.

Thread Thread
latobibor profile image
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-...

Collapse
leob profile image
leob • Edited on

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
Collapse
eljayadobe profile image
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.)

Collapse
ianbromwich profile image
Mr Rager • Edited on

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.

Collapse
jsn1nj4 profile image
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. 🙃

Collapse
marissab profile image
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 😂

Collapse
hacker4world profile image
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

Collapse
maxfindel profile image
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).

Collapse
hacker4world profile image
hacker4world

But most people suggest that you learn css before a library

Collapse
pontakornth profile image
pontakornth

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.

Collapse
adamdsherman profile image
AdamDSherman • Edited on

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.
Collapse
iamschulz profile image
Daniel Schulz

It's a different paradigm.
Where more conventional languages are imperative (you describe how something should work), CSS is declarative (you describe, what you want as a result).
Most programmers are taught how to tell a computer how to do things, but not how to conceptualize a final result, that being traditionally more in the space of designers and artists. That means, you can probably jump easily from JS to PHP to C, but need to rethink a lot for CSS.

Collapse
eljayadobe profile image
Eljay-Adobe

I take no blame/credit for IE6! I was on IE10 and IE11.

At the time, Edge was so hush-hush that those of us on IE11 where completely unawares it was in the works. While working on IE10 and IE11, me and my coworkers often commented how IE should just start over... apparently someone up the chain in a position of authority had the same notion, and Edge was born.

(Some of the tech in IE was rock solid, like Triton engine and Chakra engine. For fun, we plumbed up Node.js to use Chakra instead of V8. Surprisingly easy to do, about 10 minutes of work.)

Collapse
anonymoustechdeveloper profile image
AnonymousTechDeveloper • Edited on

CSS has too many properties, and when I say 'too many', me means 'too many'. Like you always have multiple ways to achieve the same thing while working on CSS, so learning 'everything' is just next to impossible, or for me atleast. For example, if you want to horizontally center an element in a container, you can do margin: 0 auto; or you also have an option for position: relative; left: calc(50% - width px)...

Collapse
warwait profile image
Parker Waiters

One part is that CSS is a native language of the browser. Working directly with it is always going to be a little tougher than something carefully designed to compile to CSS — but then you have to deal with build tools. It's a frustrating tradeoff.

Collapse
efpage profile image
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.

Collapse
gabrielpedroza profile image
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.

Collapse
dank1368 profile image
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.

Collapse
imcheesecake profile image
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.

Collapse
conorsheehan1 profile image
Conor Sheehan • Edited on

It's write only. If you edit or remove something, you'll break a random page.

Joking aside, I'd say refactoring css is hard, and people often don't archtiect things in advance like they would with other parts of code, so it becomes a massive ball of tech debt.

The cascading part of CSS definitely doesnt help this. Scoping styles to components helps, but still doesn't resolve it completely.

Collapse
babib profile image
𝐁𝐚𝐛𝐢 ✨

Honestly the best way to get a grasp of things is to practice...a lot.

When given a blank page, there several different ways to get to one destination. Doing a lot of hands on projects familiarizes you to the different routes.

You obviously won't be able to remember everything (and why should you?) but you'd have an idea in how to go about things

Collapse
wilbertcaba profile image
wilbertcaba

I get it. When I was starting I felt that friction, but it became second nature with time. What I don’t get is how some JS developers think CSS is difficult after all the friction they went thru learning JS, knowing that’s part of the process. It’s all about going to the court to practice your hoops to become better. Be humble to yourself and the process. It’ll pay off.

Collapse
eshimischi profile image
eshimischi • Edited on

I made my very first html page with css styles 28 years ago, thru all this time since that technologies changed much but i see nothing what is so complex about styling your web page even with new features CSS has in 2022. First try simple things, when make it challenging with preprocessing like SASS/SCSS, custom variables, frameworks like Tailwind. No need to kill all the rabbits at once, Experience comes with practice

Collapse
felixselter profile image
FelixSelter

My problem is I never learned it properly.
I thought myself coding on my own and completed projects that interested me. With time I learned important features through repetitively googling stuff.

With css that approach does not work well. I know I want that feature. I google how to make it. Everything works and is fine. Then I google something different which works fine on its own as well. But combined they break each other and Im missing the knowledge to fix it. Very frustrating

I spend quite some time on a few frontend project and it feels like Im getting better. Understanding flex and grid layout really did the trick for me.

Collapse
stephenbrooks220413 profile image
Stephen A Brooks

In my opinion it takes skill and precision to make css or sass work to make it awesome on every website. Javascript can pretty much do the same, but using both can be really useful and show how skilled you are. It will make React easier for you to.

Collapse
jwp profile image
John Peters

Css is hard: 'all I want is this thing to be here when that happens...' simple wish but requires internals knowledge and or methodology in the sea of recommendations of how to do it.

Sifting through the years of articles often leaves more confusion than before. This means we have to discover what works for us. That is complicated because different screen sizes render differently. Even different browsers render differently. Css offers few magic bullets for that problem. We are forced to manually code up Css for each size.

A few tools, such as SCSS and the Grid or Flexbox help but it still requires skills to gain mastery. Practice is the only way there along with reading sites
like CssTricks.

Finally, CSS is a DSL which I consider to be a half baked language. Because of this, it has virtually no ability to refactor. This is the primary reason for messy CSS and monolithic messes.

CSS is to me the worst part of all Website development. I dislike it greatly.

Collapse
jmau111 profile image
jmau111

It's hard because it does not work like other languages and errors are much difficult to spot.

It's not device agnostic. Even if there are fantastic tools to autoprefix rules and lint files, the rendering can vary a lot from one device to another.

Unlike with many other languages, you cannot control things 100%. Don't get me wrong. You can build very precise layouts and pixel-perfect designs, especially with modern CSS, but it's pretty hard, perhaps impossible, to cover all the terminals and rendering engines.

Collapse
andrewbaisden profile image
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.

Collapse
merthod profile image
Merthod

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

Collapse
collimarco profile image
Marco Colli

CSS is hard:

  • to keep organized
  • because it's responsive
Collapse
josue_quinones profile image
Josue Quinones

Im only learning HTML right now but cant wait to get i to CSS

Collapse
rosscarrick profile image
Ross

It's hard for people because they initially think it's easy. So easy that they don't bother to learn the fundamentals. That leads to redundant styles and more HTML than we need.

CSS and HTML are usually the first to get messy on a project. Because of the above, and reviewers spending more time on other changes. So the mess gets merged, making it even harder next time around.

Collapse
babib profile image
𝐁𝐚𝐛𝐢 ✨

True! You've stated it so brilliantly

Collapse
cryptotwentytwo profile image
Michael Stark

!important

Makes it hard 😂

Collapse
landb profile image
Branko Stancevic

CSS for me is just a tool that you can learn like anything else in programming... Understanding how CSS impact on the page's feel and look and on top of that performance - is just another level.

Collapse
saptakbhoumik profile image
SaptakBhoumik

CSS is dead simple but making something beautiful with it is hard

Collapse
zippcodder profile image
Deon Rich

Because CSS hates you. It hates all of us.

Collapse
brojenuel profile image
Jenuel Oras Ganawed

Learn flex and grid,, specially flex... This is very important when layouting a card a page or whatever.. the colorful design can come later..

Collapse
seek4samurai profile image
Gourav Singh Rawat

No matter how hard it is, just grind and keep learning!!! Good luck.