Incomplete List of Mistakes in the Design of CSS • Hacker News Board

Re: Incomplete List of Mistakes in the Design of CSS

#41

Post by _hardwaregeek » Thu, Oct 25, 2018, 3:36 AM UTC

combatentropy wrote: post #39

_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…

> 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.…

https://stackoverflow.com/questions/33636796/chrome-safari-n...

I'm referring to this. Got bitten by it recently.

> 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.

Interesting, I didn't know that. Still, CSS doesn't make a whole lot of sense to me. Here's a bunch of global state, some of which is hidden in gigantic minified files, now edit it!

Re: Incomplete List of Mistakes in the Design of CSS

#42

Post by _hardwaregeek » Thu, Oct 25, 2018, 3:36 AM UTC

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…

Plus the error handling is abysmal.

Re: Incomplete List of Mistakes in the Design of CSS

#43

Post by c-smile » Thu, Oct 25, 2018, 3:43 AM UTC

Fr units (fraction, measure of flexibility) shall be allowed on width,height,margin,padding and borders.

Instead of using flexbox I should just be able to write:

    label { width:1fr; } 
    input { width:2fr; }

to distribute the widths in 1:2 ratio.

Easy, obvious and has very good mental model - flexes are just springs where fr unit expresses their strength.

Re: Incomplete List of Mistakes in the Design of CSS

#44

Post by bsheir74 » Thu, Oct 25, 2018, 3:47 AM UTC

Css is fine. Not perfect but fine. It's an approachable way to style documents that look ok on different devices. It's best when used sparingly.

When I see people complain about css, they usually fall into a few camps. First theres the person who wants everything to look the same everywhere. They want web design to work like a print document. Sorry but thats now how it works.

And then theres people who are writing web apps, not documents. I feel sorry for those folks. Cuz css does suck for that, and there's no easy solution.

But for documents, css is fine. Although it wouldnt be as important if you all marked up your documents correctly in the first place.

Re: Incomplete List of Mistakes in the Design of CSS

#45

Post by pcmaffey » Thu, Oct 25, 2018, 3:48 AM UTC

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…

Yes, this is all right on. And it's being solved in modern component libraries that combine JS, HTML, and CSS into modular building blocks for UI's.

The key difference IMO in how to think about CSS nowadays is to move away from the paradigm of CSS as a global system, and instead, use it locally scoped to components. I like to think of CSS classes as a kind of local state. Most often, in layout components and whatnot, its static. Otherwise, in more dynamic situations, rather than messing with css properties directly (or passing vars via css-in-js), the component's js manages the "state" of the classes being applied by adding/removing.

When you start to think in this composable component framework, styles are just another component. And js is used to manage changes in state, which it is much more apt to do.

Re: Incomplete List of Mistakes in the Design of CSS

#46

Post by bsheir74 » Thu, Oct 25, 2018, 3:49 AM UTC

devwastaken wrote: post #40

VonGuard wrote: post #38

Earlier quoted context omitted.

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 { }

Agreed, and hoping that scss or less influences future versions of css!

Re: Incomplete List of Mistakes in the Design of CSS

#47

Post by c-smile » Thu, Oct 25, 2018, 3:54 AM UTC

flexbox, grid, table,etc. shall be values of some 'flow' or 'layout' property as they define layout model of element's content.

'display' values shall just define requirement of the element to its container: display:inline, display:inline-block require flow:text container and display:block require flow:vertical, flow:horizontal wrapper.

So it shall not be display:inline-table, display:inline-flexbox and the like.

Re: Incomplete List of Mistakes in the Design of CSS

#48

Post by c-smile » Thu, Oct 25, 2018, 3:57 AM UTC

It MUST be a way to reproduce HTML by CSS means solely. No way so far.

Re: Incomplete List of Mistakes in the Design of CSS

#49

Post by a1369209993 » Thu, Oct 25, 2018, 4:00 AM UTC

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…

6. display:none and position:fixed need to die in a raging inferno, or at least get moved to a seperate property that can be *{be-full-of-shit:no-dammit!important;}'d away in userContent.css or equivalent.

(See also pointer-events:auto!important;.)

7. Anything nontrivial involving tables/tds seems to be impossible to do properly and pointlessly obnoxious to do at all. Eg:

  
   foo
   Put this in the center as if tdtag wasn't here.

Re: Incomplete List of Mistakes in the Design of CSS

#50

Post by ZenPsycho » Thu, Oct 25, 2018, 4:03 AM UTC

mcphage wrote: post #22

ZenPsycho wrote: post #11

Earlier quoted context omitted.

originally CSS had no layout facilities. (as it should be, see other comment). Layout was hacked in to css by abusing the "float" property into doing things it was never meant to be doing.

> Layout was hacked in to css by abusing the "float" property into doing things it was never meant to be doing. So if CSS wasn’t supposed to do layout, despite that being what people needed, and if you weren’t supposed to use tables for layouts despite that being what worked... then what on earth were you supposed to be using for layout? I don’t recall any other serious options out there.

there weren’t any. the official w3c answer was basically “why on earth would you want to layout a webpage?! stop doing that!”

Ideology trumped practicality and we’re stuck with the consequences.

or another way of putting it is they viewed web browsers as something more like a feed reader/news reader. that the browser and user should have control of how the information is presented, not the individual websites, which should stick to plain vanilla semantic markup with no fancy stuff. CSS was only created to stop people mucking up documents with and which have no semantic value.

for a time mozilla had xul, but that was never an option for website layout.