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.
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.
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....
if you have a ul with some li and then on the li set display: inline then yes, margin will be ignored, but you can fix it by using inline-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 CSS
Yeah, 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 an h3 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.
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.
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
ulwith someliand then on thelisetdisplay: inlinethen yes,marginwill 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
lifollowed by a anh3element, 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.
You have clearly never tried to center something among several other divs.
Biggest CSS issue that has been kind of but not really fixed is the constant browser hacks needed.
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.