CSS has a lot of issues. Now that we have a few decades of knowledge, how would you do things differently.
And I'm talking about web styling in general, doesn't have to be "cascading stylesheets" or anything like what we currently have.
CSS has a lot of issues. Now that we have a few decades of knowledge, how would you do things differently.
And I'm talking about web styling in general, doesn't have to be "cascading stylesheets" or anything like what we currently have.
For further actions, you may consider blocking this person and/or reporting abuse
Karl Esi -
Giuliano1993 -
Gautam Vaja -
Rahil Vahora -
Oldest comments (65)
Thanks Christian for your wisdom and insight.
Wait, people don't like CSS? To me, CSS actually seems like one of the most well done parts about the web platform. Not only from readability but it makes really good tradeoffs between verbosity and character count that makes CSS really really easy to read when written well. When writing CSS we have to describe complex relationships between elements, their state, and their relationship to other elements. With CSS, we are able to accomplish this with incredible ease.
The only parts I would change are:
- Make CSS cascade more and support nesting style blocks (like S[A/C]SS)
- Allow HTML Imports so we can write CSS in a
<style>
and not forced to use JS- Take a another look at existing properties and reevaluate them.
You have clearly never tried to center something among several other divs.
Flexbox is the best thing ever happened to CSS. β€οΈ
Agreed. Makes things so easy. Makes me hate the world a little for wading through the preflexbox world.
What happens to css grid then?
Late reply sorry, but nothing. Grid and Flex are to be used in tandem with one another.
Biggest CSS issue that has been kind of but not really fixed is the constant browser hacks needed.
The issue here is not character count, but predictability. The way(s) CSS works makes it so that there is lots of unintended and unexpected interactions.
Well, thatβs the definition of design.
I'm curious, what have you run into that was unpredictable?
Off the top of my head: adding margins that are ignored because other positioning takes precedence (Iβm not talking about specificity here).
Iβm curious that you donβt know what I mean with my previous remark, since unpredictability is pretty much a staple of CSS, so much so that itβs spawned jokes like mobile.twitter.com/thomasfuchs/sta....
I'd say the weirdest thing I've run into in that regard is margin collapse - like, why?
if you have a
ul
with someli
and then on theli
setdisplay: inline
then yes,margin
will be ignored, but you can fix it by usinginline-block
. All inline elements ignore vertical margin. But this is more an "issue" with the expected vs actual result of the layout engine and not from CSSYeah, although what I was referring to is the way only the bigger margin is considered in some situations - you'd usually expect elements' margins to add up
The selector with the most specificity is the one that gets applied. If you have a element in an element in an element etc and they all have a margin then the margin does add up.
Margin collapse makes a lot of sense in textual content heavy documents. A typical example might be a
li
followed by a anh3
element, and generally the header would have an ample top margin, so there is no need to combine the trailing margin of the list with the leading margin of the header, it would simply lead to excessive white-space.Useful for the kind of documents HTML was developed for, but not so useful once intricate visual designs and layouts enter the scene.
I agree with you, Meghan. Most of the hardship comes from not understanding how to do something in a simple way with CSS. As soon as we got rounded corners designers wanted something else we couldn't do easily. Haha
Had some fun with some of that unexpected behavior recently, apparently if you set overflow to auto on one axis (e.g.
overflow-x
), you can't set the other axis to visible. And it's in the spec, so it's definitely intentional πThere is so much I would bin I canβt even begin. But top of the list, like way top would be no cascade. Itβs such an impractical way of re-using code and over long periods in busy projects always leads to a knotted ball of string.
Way more practical is styling each component and encouraging component re-use.
I would kill it with fire.
For me, I think inline styles can be a little more powerful.
Never inline styles!
if you are writing a typical website then sure another file for CSS makes sense, but for web apps where each component will be independent then Inline styles are good too.
True. Like React ;)
I think now my only use for inline styles is styling stuff through JavaScript, which goes to the inline style
Here's a post that doesn't answer this question but might provide some food for thought:
The Bootstrapping Mindset
Eric Normand
That was definitely a great read, and I definitely didn't try to top comment the thread by just saying CSS is great. I totally see where they're coming from, and tbh I don't think the web can do what Eric talked about. At least yet. Houdini has some good promise to make CSS a lot better and Custom Elements (with more browser support) might make HTML more expressive.
caniuse.com/#feat=css-paint-api
caniuse.com/#feat=custom-elementsv1
I think one of the biggest drawbacks and reason for the discomfort with why the web is bootstrap-lacking is that even though The Web was first made public until 1991, The Extensible Web only began in 2013. So there's this 20 year difference between how long we've been able to make web pages and how long we've made bootstrapping even remotely possible on the web. Thus, realistically the "modern" web is only ~5 years old. And if you look at just how much the web has changed only in those past 5 years it gives me a lot of hope for what we as a community will be able to do in the next 20 years now that everyone's on board :D
I like most of it, the cascade, the powerful selectors, the attributes. I would make only one change Instead of !important, I would have created pseudo selectors to increase or decrease specificy :+id.class.tag and :-id.class.tag, where id, class and tag are optional representations of the amount of increase and decrease. I also would have made the specificy of inline styles that of an id selector, so that it could be easily overwritten with :+1.0.1
I feel like there should be a constraint: any replacement has to have the same feature set, including things like the ability to define user-agent stylesheets to overwrite the styling on any page.
This, sadly, gets lost with many of the modern approaches I see...
Considering the 'recent' grid and flexbox I think we're in a decent spot regarding CSS. I still do hate specificity in some cases (and !important can burn) but we're in a really great spot now compared with IE6 when I started developing.
Starting from fresh I only have three things on my list:
While I enjoy flexbox and especially grid, but I recently started using Elm and find the approach taken by the style-elements package very insightful. Layout and positioning is not really "style" it's architecture. Separating layout and style into different tools makes a lot of sense to me.
CSS Grid, FlexBox, Sass π₯
The way Sass currently works.
I'm not a big Doctor Who fan but the TARDIS seems like it would be the best way to go, find the exact moment IE6 was conceived and just bloop it out of existence.
There would have been less need to cascade failure.
Other than that, ++Sass
properties would be final.
once you assigned e.g. color:red, you are not allowed to override it in more specific selectors
I'd like to fix style collisions in general. Probably get ret rid of global scopes and maybe an overhaul of specificity rules.
"CSS has a lot of issues." Which ones?
I feel that a lot of developers didn't learn CSS properly.
To me (as someone who naturally gravitates more towards the back-end of the stack) my biggest annoyance with CSS is that I find it all to be magic words. Nothing has a predictable effect, because how a property influences an element depends on what kind of element it is, what kind of elements it is a child of, what properties those parents have, etc etc etc. So when I set out to achieve a specific goal, it feels like I'm just trying random combinations of magic words on the element, its parents, its children and every other thing in the DOM until I find the "spell" that does what I want.
I used to center and align stuff using Bootstrap. Now that I've learned Flexbox and CSS Grid, I've found less use of Bootstrap. Though I don't use Grid that much. Flexbox is more useful for my projects.
Same here.