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

51–60 of 154 posts

Re: Incomplete List of Mistakes in the Design of CSS

#51

Post by c-smile »

Brajeshwar wrote: post #34

“New ideas will come along, but they will extend CSS rather than replace it. I believe that the CSS code we write today will be readable by computers 500 years from now.” — Håkon Wium Lie, co-creator of CSS.

Yeah and that puts enormous pressure on what we put there.

That flexbox, half-baked and overcooked at the same time. And display:grid at the same time but using completely different concept of flexibility (fr units in grid) and some strange property in flexbox.

What, the hell, this means:

    div {
      width:400px;
      flex:2;
    }
? Just a humiliation of CSS box model.

Re: Incomplete List of Mistakes in the Design of CSS

#52

Post by ZenPsycho »

TheDong wrote: post #37
fouc wrote: post #29

Earlier quoted context omitted.

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.

It’s not a serious problem to work around, but it is another instance where the web architects designed all these different languages without thinking all that deeply about how they would work together. and so i need

    .style[“background-color”]

    .style.width=mywidth+”px”
and (sigh)

    href=“/search?q=hello%20world&another=query%20parameter”
the latter of which is, while it's the correct way to write html, is so stupid that most browsers silently error correct the less insane (but technically wrong) version

    href=“/search?q=hello world&another=query parameter”

Re: Incomplete List of Mistakes in the Design of CSS

#53

Post by ZenPsycho »

extrapickles wrote: post #32
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…

That's all well and good but rems only became broadly usable relatively recently, and I've had to make web pages a lot longer than that. And also fix webpages written well before that.

Re: Incomplete List of Mistakes in the Design of CSS

#54

Post by irrational »

_hardwaregeek wrote: post #41
combatentropy wrote: post #39

Earlier quoted context omitted.

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

>Here's a bunch of global state, some of which is hidden in gigantic minified files, now edit it!

Well, there's your problem. I'd recommend reading about things like atomic css, BEM, OMACSS, etc.

Re: Incomplete List of Mistakes in the Design of CSS

#55

Post by irrational »

JJMcJ wrote: post #7
mcphage wrote: post #5

(1) it should have been designed around what people actually try to do: three column layouts with headers and footers, aligning content in the middle, pinstriping (this one isn’t as popular anymore), drop shadows, etc. Instead, all of these things required either hacky workarounds, or stepping outside of CSS entirely. The first decade of CSS was “look at all these things you can do that you don’t want to, and you can…

> three column layouts with headers and footers I was appalled when I saw what was needed to make this use case, used by 1/2 he web pages in existence.

Do you mean using tables, float/clear, flexbox, or grid? Or all of the above?

Re: Incomplete List of Mistakes in the Design of CSS

#56

Post by combatentropy »

Most of these are nitpicks. Some are preferences that I would oppose.

CSS is inspired by the style sheets of yore, of typeset publications made by ink-smeared metal pressed into paper. A magazine or newspaper might have a "style sheet" that said things like, "Paragraphs shall be 10-point Caslon" and "all second-level headings shall be hanging headings, outdented 5 picas." Before web browsers got a hold of them, stylesheets had already entered the electronic world in desktop-publishing software like QuarkXPress and even Microsoft Word.

The problem they were trying to solve was, how do you update the look and feel your website easily? This was in the days when most websites were static HTML files, and updating all your articles meant changing a file for every page. The most famous and beautiful example of the power of Cascading Style Sheets is CSS Zen Garden. In 2003 Dave Shea provided an unstyled page of HTML, and then designers from around the world contributed stylesheets that transformed the page into wildly different designs (http://www.csszengarden.com/).

Re: Incomplete List of Mistakes in the Design of CSS

#57

Post by rimliu »

uryga wrote: post #26
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…

> CSS defines properties on individual elements, while layout fundamentally needs to define relationships between elements I couldn't agree more! Does anyone know a language/toolkit/something that gets layout right? I remember getting excited by Grid Stylesheets [1] but the project seems dead now... [1] https://github.com/gss/

I do. It's CSS. There is a nifty feature display: grid. And also display: flex.

Re: Incomplete List of Mistakes in the Design of CSS

#58

Post by _hardwaregeek »

irrational wrote: post #54
_hardwaregeek wrote: post #41

Earlier quoted context omitted.

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

>Here's a bunch of global state, some of which is hidden in gigantic minified files, now edit it! Well, there's your problem. I'd recommend reading about things like atomic css, BEM, OMACSS, etc.

That's why I use CSS in JS :D. But we're just putting abstractions/stopgaps over a fundamentally flawed design. Not to mention, since everybody uses a different standard for isolation, CSS in JS is not compatible with BEM is not compatible with SASS, etc.

Re: Incomplete List of Mistakes in the Design of CSS

#60

Post by irrational »

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.

In the beginning... the web was never envisioned to be what it is today. The notion that anybody would want to do layout like publishing software didn't cross anyone's mind. Originally the web didn't even have images! It was just text and links. It was just a way to pass text documents around easily. Of course, then the designers came along and said "I want it to look like this" and webmasters (as we were called back then) had to figure out some way to do it. The only realistic way to more or less do it was to use tables (which, of course, was not their intent, but when all you have is a hammer...)
Post reply on HN