I got an email that went like this (lightly edited for readability):
CSS makes me sad.
I’ve been programming web apps for more than a decade now. I can architect the thing, load every required data, make all the hops and jumps until I have a perfectly crafted piece of markup with relevant info.
And then I need to put a box to the left of another box. Or add a scrollbar because a list is too big. Or, god forbid, center some text.
I waste hours and feel worthless and sad. This only happens with CSS.
I think this is a matter of practice. I bet you practice all of the other technologies involved in building the sites you work on more than you practice CSS. If it’s any consolation, there are loads of developers out there who feel exactly the opposite. Designing, styling, and doing web layout are easy to them compared to architecting data.
I have my doubts that CSS is inherently bad and poorly designed such that incredibly intelligent people can’t handle it. If there was some way to measure it, I might put my money on CSS being one of the easier languages to get good at, given equal amounts of practice time.
In fact, Eric Meyer recently published a CSS: The Definitive Guide, 4th Edition, which is more than twice as thick as the original version, yet says:
CSS has a great deal more capabilities than ever before, it’s true. In the sense of “how much there potentially is to know”, yes, CSS is more of a challenge.
But the core principles and mechanisms are no more complicated than they were a decade or even two decades ago. If anything, they’re easier to grasp now, because we don’t have to clutter our minds with float behaviors or inline layout just to try to lay out a page.
One way to digest that might be: if you feel snakebitten by past CSS, it’s time to try it again because it’s gotten more capable and, dare I say, easier.
We can also take your specifics one-by-one:
And then I need to put a box to the left of another box.
Try flexbox!
See the Pen GyZMrj by Chris Coyier (@chriscoyier) on CodePen.
Or add a scrollbar because a list is too big.
Or, god forbid, center some text.
The overflow
property is great for handling scrollbar stuff. You can even style them. And we have a whole guide on centering! Here’s a two-fer:
See the Pen Centered Scrolling List by Chris Coyier (@chriscoyier) on CodePen.
Best of luck!
I long for styling scrollbars in Firefox. Not being able to do this makes me sad.
As a “Backend-developer” I’ve always felt the same. We were always so afraid of taking part in designing the website and actually working with CSS to be particular until I was “forced” to work on a heavy-Frontend project all alone .. and then I started to like it .. now I’ve spent some months working with it and bug-fixing here and there and now I can finally say that ” It wasn’t as bad as I thought “.
I think the underlying concepts of CSS (the declarative syntax, the cascade, selectors, media queries) are really great and well-designed. But for a long time we did not have the right tools for block and page layout. But with things like flexbox, grid, and the upcoming box alignment module, we are getting there. Finally.
5 years ago he would be absolutely correct. Designers had to memorize a series of unintuitive hacks to layout pages. Today we have Flexbox which is completely logical and easy to use.
Only if you do use it EXCLUSIVELY. Else it gets ugly pretty quick.
And because lots of sites are still constructed with regular float-based grids, nobody having the time to completely reinvent the wheel over and over again, this is going to happen for quite some time.
cu, w0lf.
“I think this is a matter of practice.” — 100% agree. And I’m one of those people who find CSS the “easy” part. Sure… sometimes it doesn’t behave and I have to struggle with it to get a complex layout right. But CSS is my comfort zone. I write PHP, I write javascript… I have a certain amount of comfort with coding and scripting like that. But I think I’m more a “HTML & CSS Specialist who does those some of those other things, too.” More of a “designer/developer” as opposed to a “developer/designer” if we can split hairs on the title.
Funny enough, I have worked with hard-core back-end programmers who have differing attitudes about their own CSS capabilities. Some think, “CSS is easy, I am full-stack and can do everything, especially something as easy as CSS,” and, meanwhile, they don’t really know how it works in terms of the cascade and specificity and things like that. They UNDERSELL how much there is to know. And then others OVERSELL how hard it is, saying, “I can totally command a database through any code base out there, but I am awed at how you are able to make it looks good and I could never do that.”
I think the truth is right in the middle, and it really all depends on what you do the most and where your strength lies.
But I think that’s a good thing. My programming partners and I help each other out. “Hey, I took this to a certain point, but I can’t get this array to return the right string; can you help me out?” “Sure, but I can’t get this other part to align with the content to the right of it, can you help me out there?”
Your guide for centering in CSS shows exactly the problem with CSS.
We want to center an element inside another element,
this is a simple and BASIC request which should be simple,
but in CSS it’s NOT.
In your guide there are 12 different cases (if I counted correctly) and in most of them you have to go through hoops and use code that is complicated and hard to maintain…
CSS might be a language but for a user who only want to layout their elements it’s too complicated.
Nadav