Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Incomplete List of Mistakes in the Design of CSS

wiki.csswg.org

Post reply on HN
Print view View original

31–40 of 154 posts

Re: Incomplete List of Mistakes in the Design of CSS

#31

Post by _hardwaregeek »

devwastaken wrote: post #20

I don't think things like syntax and schemes are the real bad parts. The real bad part is that CSS is in no way designed to be interacted with by anything but CSS. Just yesterday I was making a music player position bar, and using CSS transitions to have it smoothely update itself. Set the duration of the transition and it goes on. But what about when the transition takes effect? JS doesn't know when a style is actua…

Yep yep. CSS in JS removes some of the pain points but still, fundamentally, CSS cannot communicate with JS in a universal, elegant way. Honestly, CSS in general is awful. How did we only just get decent centering with flexbox? How is flexbox still inconsistent across browsers? (Try setting a child of a flexbox container to 100% height.) The days of needing separate constructs because of bandwidth are over. We need something to unify CSS and HTML and JS into a UI builder that doesn't make you want to tear your hair out when you have to center a div over another div and give it an animation.

Re: Incomplete List of Mistakes in the Design of CSS

#32

Post by extrapickles »

ZenPsycho wrote: post #6

here's my pet peeves: 1. CSS should not have adopted a hyphenated naming scheme for properties, since it makes it difficult to access css properties from javascript or other languages. 2. CSS should never have been used for layout, and nobody should have suggested it should be. CSS defines properties on individual elements, while layout fundamentally needs to define relationships between elements, which requires real…

For #5 use rem which is based off the document font-size rather than the current elements font size. What really needs to stop is the use of pixels and absolute font sizes for sizing everything as they never work on more than 1 device/zoom level/default font size.

Breaking layout into its own thing has its ups and downs. Basically you would have to break out what flexbox and grid do into a "layout" file, and come up with syntax that makes describing relationships easier than they currently are in CSS/LESS/etc. The downside to this would be that you have to chase UI bugs through 3 files rather than the current 2.

What CSS could use is a good clean as its grown organically for quite some time.

Re: Incomplete List of Mistakes in the Design of CSS

#33

Post by usaphp »

Zarath wrote: post #30

Wow I just started making websites of my own recently and have encountered so many things that are immensely infuriating about how the language is interpreted that I've been thinking about starting a list myself. They seem to favor implied behavior rather than explicitly defined behavior which is incredibly annoying. For example, space between inline-block elements that is not accounted for by margins. The fact that…

They seem to be confusing when you are just starting designing, but once you spend more time with it - most of it starts to make sense

> The fact that margin-top and margin-bottom percentages are computed based on the width of the parent element, not the height.

It's actually much better this way, imaging a block of text with varied content. If you had margins calculated based on a height - you will have a margin that depends on text content size, which is wrong, instead you want your margins to depend on a screen size width, not the content inside

> Collapsing margins

It's a great solution as well, imagine you have a div that you want to have margins on top and bottom of 20px. It makes perfect sense to collapse margins if you have say 2 of those div's running one after another, because you don't want them to have 40px margin, you only want 20px. So when there is another element that is not that div - you will still have your desired 20px margin.

Re: Incomplete List of Mistakes in the Design of CSS

#35

Post by Zarath »

usaphp wrote: post #33
Zarath wrote: post #30

Wow I just started making websites of my own recently and have encountered so many things that are immensely infuriating about how the language is interpreted that I've been thinking about starting a list myself. They seem to favor implied behavior rather than explicitly defined behavior which is incredibly annoying. For example, space between inline-block elements that is not accounted for by margins. The fact that…

They seem to be confusing when you are just starting designing, but once you spend more time with it - most of it starts to make sense > The fact that margin-top and margin-bottom percentages are computed based on the width of the parent element, not the height. It's actually much better this way, imaging a block of text with varied content. If you had margins calculated based on a height - you will have a margin tha…

> It's actually much better this way, imaging a block of text with varied content. If you had margins calculated based on a height - you will have a margin that depends on text content size, which is wrong, instead you want your margins to depend on a screen size width, not the content inside

So using width to compute a vertical margin is somehow a better solution? If I wanted a margin of a fixed size that doesn't dynamically change based on content, I would define it exactly using vh, or px.

> It's a great solution as well, imagine you have a div that you want to have margins on top and bottom of 20px. It makes perfect sense to collapse margins if you have say 2 of those div's running one after another, because you don't want them to have 40px margin, you only want 20px. So when there is another element that is not that div - you will still have your desired 20px margin.

I just want the code to behave as I instructed it. If I say this div should have 20px of margin on top and bottom, then it should. Don't go behind my back and say "we know better" and delete it. There seem to be plenty of ways to achieve only 20px on successive divs without resorting to what is basically undocumented behavior that explicitly contradicts what is programmed in the file. For example, I could just give all divs 20px of margin-top, and then style :last-child with 20px margin-bottom. This is almost certainly a better solution than resorting to collapsing, at least in my opinion.

Re: Incomplete List of Mistakes in the Design of CSS

#37

Post by TheDong »

fouc wrote: post #29
ZenPsycho wrote: post #6

here's my pet peeves: 1. CSS should not have adopted a hyphenated naming scheme for properties, since it makes it difficult to access css properties from javascript or other languages. 2. CSS should never have been used for layout, and nobody should have suggested it should be. CSS defines properties on individual elements, while layout fundamentally needs to define relationships between elements, which requires real…

1. hyphenated for css, camelCase for javascript, underscores for API (i.e. php or ruby). Makes it easy to differentiate what's what.

If that's a serious problem for you, setup your vim to use a different color for variables based on the current filetype.

Re: Incomplete List of Mistakes in the Design of CSS

#38

Post by VonGuard »

_hardwaregeek wrote: post #31
devwastaken wrote: post #20

I don't think things like syntax and schemes are the real bad parts. The real bad part is that CSS is in no way designed to be interacted with by anything but CSS. Just yesterday I was making a music player position bar, and using CSS transitions to have it smoothely update itself. Set the duration of the transition and it goes on. But what about when the transition takes effect? JS doesn't know when a style is actua…

Yep yep. CSS in JS removes some of the pain points but still, fundamentally, CSS cannot communicate with JS in a universal, elegant way. Honestly, CSS in general is awful. How did we only just get decent centering with flexbox? How is flexbox still inconsistent across browsers? (Try setting a child of a flexbox container to 100% height.) The days of needing separate constructs because of bandwidth are over. We need s…

The thing i hate about CSS is how unstructured it can be. You just sorta list whatever you want and it's suddenly a style sheet. No headers, no footers, no must includes.... DO I use quotes around this value? Do I not? Does white space matter? It's the most intimidating language I've ever used just because it feels so open and uncontrolled and nonsensical... I always thought CSS was some leftover abomination from the days of Netscape.

Re: Incomplete List of Mistakes in the Design of CSS

#39

Post by combatentropy »

_hardwaregeek wrote: post #31
devwastaken wrote: post #20

I don't think things like syntax and schemes are the real bad parts. The real bad part is that CSS is in no way designed to be interacted with by anything but CSS. Just yesterday I was making a music player position bar, and using CSS transitions to have it smoothely update itself. Set the duration of the transition and it goes on. But what about when the transition takes effect? JS doesn't know when a style is actua…

Yep yep. CSS in JS removes some of the pain points but still, fundamentally, CSS cannot communicate with JS in a universal, elegant way. Honestly, CSS in general is awful. How did we only just get decent centering with flexbox? How is flexbox still inconsistent across browsers? (Try setting a child of a flexbox container to 100% height.) The days of needing separate constructs because of bandwidth are over. We need s…

> Try setting a child of a flexbox container to 100% height.

Isn't this the default?

   align-items: stretch
--- https://css-tricks.com/snippets/css/a-guide-to-flexbox/

> The days of needing separate constructs because of bandwidth are over

That wasn't the reason for stylesheets. It was for ease of changes. For example, to change the color of the headings on all of your HTML pages, you would change just the stylesheet. This was when each web page was a static HTML file. Few websites used programming languages to render pages. So the benefit today is less.

But I guess if you don't care about that nor bandwidth then you can use inline style attributes.

Re: Incomplete List of Mistakes in the Design of CSS

#40

Post by devwastaken »

VonGuard wrote: post #38
_hardwaregeek wrote: post #31

Earlier quoted context omitted.

Yep yep. CSS in JS removes some of the pain points but still, fundamentally, CSS cannot communicate with JS in a universal, elegant way. Honestly, CSS in general is awful. How did we only just get decent centering with flexbox? How is flexbox still inconsistent across browsers? (Try setting a child of a flexbox container to 100% height.) The days of needing separate constructs because of bandwidth are over. We need s…

The thing i hate about CSS is how unstructured it can be. You just sorta list whatever you want and it's suddenly a style sheet. No headers, no footers, no must includes.... DO I use quotes around this value? Do I not? Does white space matter? It's the most intimidating language I've ever used just because it feels so open and uncontrolled and nonsensical... I always thought CSS was some leftover abomination from the…

LESS is more how CSS should look like for styling. It's amazing we don't have embedding of rules yet.

parent {

   child {

    }
}

is just so much more development friendly than

parent {

}

parent child {

}

Post reply on HN