DEV Community

What do you hate the most in CSS and why?

Natalia on July 31, 2019

A lot of people hate CSS and styling. Like it's a rule that CSS is bad and unlearnable for them. And I'm not one of them. I love it (sorry not sorry for being weirdo :P ). But I want to know what you hate in CSS? And why? What is your point of view?

Collapse
 
stereobooster profile image
stereobooster

I don't hate CSS, but I find a lot of it confusing:

  • global scope, so change in one file would cause a change in different
  • specificity is ok, but !important and the fact that some properties are inherited and some are not :/
  • CSS visual formatting model - it got much better with flexbox and CSS grid
  • margins/paddings - it got better with box-sizing: border-box;
  • no debug tools - it got better with Firefox and Chrome dev tools, but sometimes you need to get through 10 elements before you find what actually shifts your element
Collapse
 
nerdy_girl profile image
Natalia

I was thought that if you are using !important that means you f*cked something up earlier :P But I know there are some edge cases :)
And I've never used box-sizing: border-box; tbh. I never needed that O.o

About global scope - yes, that's disgusting sometimes that why it's so important to keep everything structured so much. And I really love libraries like CSSModules which helps with that a bit :)

Collapse
 
stereobooster profile image
stereobooster

if you are using !important that means you f*cked something up earlier :P But I know there are some edge cases :)

The problem is that it could be not me, it could be somebody else on the team (and reviewer haven't noticed it), or it is 3rd party code. The presence of the feature itself means that somebody would use it eventually.

Collapse
 
ulitroyo profile image
Uli Troyo • Edited

Nope, you're not going to hear that from me either! I agree there was a point where CSS was very fiddly, and it drove non-techy designers and non-artsy devs alike pretty crazy. But... times have changed a lot. Flexbox and Grid are widely supported, and should form part of everyone's layout arsenal, as I'm sure you agree. No, I'll go even further—Grid and Flexbox should probably be the starting point of almost every design, going forward. Every dev should burn two or three grid-based layouts into their brains and just reach for them every time, assuming they remain unmotivated to outright play around with them for the sheer fun of it.

That said, I do have a few real remaining bones to pick with CSS; it still doesn't cover a number of use cases that I've found annoying. The promise of CSS to completely decouple styling and layout from content has not yet been 100% fulfilled, and because it does so much right otherwise, it bothers me when it fails. For example, if you have long article, there's no way to split it naturally into page-like viewport-high multi columns without introducing JS. Also, a number of properties don't work with inline SVGs like you might figure they would, especially (in my case) box-shadow. The inability to target text overflow at the word level has also messed me up in the past, though maybe this is less CSS and more HTML/JS.

These are advanced use-cases, though, and it bugs me when people complain about solved problems like basic layouts. Not that I'm completely unsympathetic, just that it's overblown.

Collapse
 
nerdy_girl profile image
Natalia

Someone who understands me. Finally!😍 I'm glad that I'm not alone on this styling world 🙌
And more seriously - well I wasn't working in the era of 'bad css' but I hear a lot that it's difficult, flex or grid is not clear (🤷), etc.
I agree that some things can be tricky like layouts, margins, after/before. But I believe that basics can be learned in less than a week if you really want it need it.

Collapse
 
ulitroyo profile image
Uli Troyo • Edited

It did use to be tricky, I'll admit!

  • Before the box-sizing: border-box property, padding used to add to the overall size of a container, so if you had a div that was 300px with a padding of 5 px, you would need to remember that your div would now be 310px.

  • Before Grid and Flexbox, everyone would have to play around with float properties and z-indexing, which is sometimes a little like trying to keep oil bubbles in water neatly organized.

  • And before fr-units and maybe the calc function (which itself is mathy and thus not really ideal), you used to have to do weird math yourself, like if you had three columns you might have to manually subtract percentages from gaps and wind up with things like "31. 3333% 5px 31.3333% 5px 31.3333%".

It's the reason why people reached for pre-made grid systems like the infamous and then-handy 960 Grid (which hilariously still exists, though I guess that's good from a historical viewpoint), and later for CSS frameworks like Bootstrap and Foundation... which sadly, a lot of people still do, and which drives CSS senseis Jen Simmons and Rachel Andrew crazy.

But I agree—I think plenty of devs are not giving themselves enough credit and just learning modern CSS.

Thread Thread
 
deciduously profile image
Ben Lovy

trying to keep oil bubbles in water neatly organized

I have never heard this put better.

Collapse
 
eperedo profile image
Eduardo P. Rivero • Edited

I used to hate it, but mostly because of two reasons (not really css's fault)

  1. When you try to learn css you do not find an "official docs". You end it up jumping between blogs, books and stackoverflow and worst of all wondering if what are you learning is "the right way" to do it.
    Different to other technologies: You want to learn react? Well go to reactjs.org, what about vue? vuejs.org and so on.

  2. Browser support 5/10 years ago was crazy slow. You read about flexbox, css grid and other great new features? Well prepare your polyfills to give a decent experience to users that like old browsers.

But IMO today css is the best technology in the web platform. Finishing some styles and see the design comes to real is one of the best feelings as a web developer!

Collapse
 
nerdy_girl profile image
Natalia

Well yep, that's true. "Official docs" are crap for a beginner. I think the entry threshold is really high because of that :(

Collapse
 
alohci profile image
Nicholas Stimpson

Specifications are generally not written to be learnt from directly, at least unless you're a field expert. In fact, the CSS specs are mostly far more readable than, say, the ECMAScript specifications.

The problem is the quick win, beloved by us all, and especially those used to HTML. The ultimate genius of HTML is it low barrier to entry, Write "Hello World" in a text editor, save it, open it in a browser and it displays that text. Add <!DOCTYPE html><title>My Page</title> before it and it'll even pass a validator. Hey, I'm a web developer, me!

So the desire for the quick win in CSS for beginners, and the consequent need for tutorial writers to supply it, means that the fundamentals of CSS get totally skipped by beginners. While most CSS writers would benefit for a proper grounding in the concepts that underpin CSS (I know I did), obtaining it is a challenging exercise, and I only got there by reading and re-reading the CSS 2.1 spec many times. There's definitely a gap for a reader-friendly explanation of CSS concepts, but would anyone read it?

Collapse
 
ahferroin7 profile image
Austin S. Hemmelgarn

The difficulty of reusing styling. In essence, I'm very much of the opinion that CSS should natively have functionality equivalent to the @extend and @mixin/@include functionality in SASS.

I quite regularly have situations where elements with class A will always have class B as well, but the reverse is not also true, and class B is in a third-party library so I can't directly reuse it's styling without duplicating it. This is actually one of the biggest things that's pushed me towards using SASS in the first place instead of plain CSS (that, and it lets me ship a single style-sheet with everything, thus reducing the number of render-blocking resources).

Collapse
 
alohci profile image
Nicholas Stimpson • Edited
  1. That so much of the 2003 draft of the Generated and Replaced Content spec died without being implemented. There was so much cool stuff in there, especially ::outside(1), ::outside(2) etc. which would have helped considerably in avoiding having to create wrapper divs to produce a whole range of effects. ::inside(n) would be so useful too.

  2. Absence of SASS style mixins, which would allow for declaration-sets to be combined and re-used.

Collapse
 
nerdy_girl profile image
Natalia

I hate tables so much! I prefer to create divs instead of tables! I just ... can't use them. Can't make them responsive enough!

Collapse
 
alohci profile image
Nicholas Stimpson • Edited

The responsiveness of tables is problematic, for sure. But I don't think CSS can be blamed for that. It is inherent in what a table is, and the necessity of that organisation of the data for correct accessibility that means that there will always be limitations to the flexibility of their presentation.

Thread Thread
 
nerdy_girl profile image
Natalia

True, CSS is not guilty. But it's not helping with managing them either :(

Collapse
 
desi profile image
Desi

I hate that grid is so hard to make responsive! I felt like I wanted to build weareanxio.us in grid because it feels more "modern" than flexbox, but I can't seem to make it as nicely responsive, so now I'm going to redo it in flexbox because that seems faster than continuing to try to figure out grid responsiveness. 😓

Collapse
 
muffenme profile image
Mike Blais • Edited

I hate CSS scrollbars that looks like Apples Macintosh OS X Lion or newer scrollbars. These are very ugly and missing the arrow on top and bottom. I also don't like auto hide scrollbars.