6 ms·

Should be entitled "The tragic history of CSS episode n" where n is any number between 0 and infinity. CSS is a complete utter crap that failed to solve the pr

by 0x4a42 11y ago

Should be entitled "The tragic history of CSS episode n" where n is any number between 0 and infinity. CSS is a complete utter crap that failed to solve the problems for which it exists. Today CSS is a broken tool that still can't easily be used to design even the most basic layout without requiring a ton of hacks. Among a fews: - A broken box model that the W3C picked over the one from MS. For finally adding the MS's model years later leaving us with 2 boxe models and a broken compatibility. - Centering things? You have to use hacks even for this simple purpose. - Building grids? Let's have fun and pick the one you prefer : html tables, display table, floats, flexbox, css grids... - About Tables: 15 years ago everybody switche to tabless layouts for the purpose of separating markup from presentation. A few years later we got access to the table display mode in CSS because, well, not a single one from the other solution worked well to build layout. Qo we got offered the option to emulate html tables in CSS. - They added CSS animations. What animations have to do with styling and layout? Oh it's to compensate the bad performances we got when animating things with JS. Etc, etc, etc. CSS is just a complete mess.

mfoy_ 11y ago
I use CSS quite a bit and I still barely grok the myriad interactions between display, position, and float and nested variations thereupon. That's why I love Bootstrap.
deleted 11y ago
[deleted]
ghrifter 11y ago
I still can't believe you have to hack a margin: 0 auto; to center stuff still... Unless there's a new html element or css trick I'm unaware of? (like the `<center>` of old)?
- IshKebab 11y ago
  Yeah they actually finally fixed this with flexbox.
- floatboth 11y ago
  It's not really a hack – it does make sense. Make left and right margin automatic so it would be balanced automatically. There's flexbox, which allows vertical centering and other cool stuff.
- RobertKerans 11y ago
  `justify-content: center` when items are laid out on the x-axis, `align-items: center` when on y-axis
SonicSoul 11y ago
CSS is a complete utter crap that failed to solve the problems for which it exists really? to me it seems to work very well. When I compare it to doing layouts in desktop apps such as winforms or WPF, CSS is amazing. I am no expert in it, but 99% of the time it more than meets my needs and I love how I can easily override other websites styles with something like stylebot. Seems like your experience is 100% opposite. What would be a good solution in place of CSS ?
- pjmlp 11y ago
  Really?! I am yet to find anything like Grid and Relative layouts in CSS.
eridius 11y ago
> What animations have to do with styling and layout? What don't they have to do with it? CSS is all about defining the way the site looks. Animations, and especially transitions between states, is the exact same thing. Animations are just layout plus time.
devit 11y ago
It works fine for documents, which were the original target. It didn't work that well for applications or multi-element "content sites", but now with Flexbox it mostly does, and it continues to get better.
antod 11y ago
> CSS is a complete utter crap that failed to solve the problems for which it exists. Huh? Do you not remember/know what it was like to style webpages with FONT elements before CSS? CSS was a godsend. That was the separating content from presentation breakthrough. The problem for which it existed wasn't layout. CSS1 (1996) didn't even have anything in it for layout. >- About Tables: 15 years ago everybody switche to tabless layouts for the purpose of separating markup from presentation. Using tables for layout was the original hack. Likewise using floats to avoid it was also a hack. Neither of those features were designed for those purposes. You can possibly blame the CSS standard for being incomplete, but you can't blame it for designers creating elaborate hacks out of it. > A few years later we got access to the table display mode in CSS because, well, not a single one from the other solution worked well to build layout. Qo we got offered the option to emulate html tables in CSS. You make it sound like table display was added after the failure of other layout methods. Not so - table display was there right from the beginning when CSS first added layout (CSS2 in 1998). It was IEs failure to implement it for nearly a decade that meant nobody was aware of or could use it for many years.
- lmm 11y ago
  > Huh? Do you not remember/know what it was like to style webpages with FONT elements before CSS? CSS was a godsend. That was the separating content from presentation breakthrough. Have you tried using FONT recently? (Or indeed, any time this decade?) When you're generating your pages programmatically it's really easy to separate content and presentation concerns in code but then combine them when finally rendering the page. You can use a normal programming language which is much clearer than CSS selectors. CSS was necessary in the days of hand-written HTML, but once you have a CMS you might as well use FONT and inline styles (possibly using CSS just with single classes, as a kind of "cache" to avoid repeating the same inline styling block everywhere).
  - rubbingalcohol 11y ago
    What if you don't want to use a CMS?
    - 11y ago
matthewmacleod 11y ago
CSS is a complete utter crap that failed to solve the problems for which it exists. Today CSS is a broken tool that still can't easily be used to design even the most basic layout without requiring a ton of hacks. I don't agree with this. CSS is a warty tool with a mixed background, but modern CSS is pretty effective and pleasant to use, especially when combined with a preprocessor. A broken box model The W3C box is counter-intuitive, but bear in mind that nobody really expected CSS to be used for layout at the point it was initially selected, so I doubt it was considered that important. And in any case, it's fixed now, with box-sizing supported by like 98% of browsers globally. Centering things? You have to use hacks even for this simple purpose. No you don't. There are well-documented, consistent ways to centre in CSS. Vertical entering used to be difficult (for obvious reasons), but now we've got flexbox which solves that problem entirely. Building grids? Let's have fun and pick the one you prefer These all do different things and have different characteristics – so you can pick the one that most suited. Qo we got offered the option to emulate html tables in CSS. Not quite – we got the ability to build visually-table-like things that use table layout rules, but separated them from the semantic implication of tables. That's a good thing. They added CSS animations. What animations have to do with styling and layout? Animations are just the time axis of layout. It makes much more sense to define them and the transitions between them declaratively using CSS. Etc, etc, etc. CSS is just a complete mess. In contrast, I find that CSS is mostly a bit of a scapegoat. Sure, it's taken a while to become a comprehensive layout and styling tool – but combined with something like SASS, I absolutely love writing CSS.
- sltkr 11y ago
  > No you don't. There are well-documented, consistent ways to centre in CSS. Vertical entering used to be difficult (for obvious reasons), but now we've got flexbox which solves that problem entirely. So, what's the way to put something in the center?
  - iopq 11y ago
     and then you center things
burnte 11y ago
I'm sorry, you're just completely incorrect. I'm a <insert HTML/CSS/JS worker title here> and literally do this every day. The Box model issue is being fixed with flexbox; centering is getting there too, gridding is improving; CSS animations are ENTIRELY about style and not to do with JS, it's to state hey, anything style related should be CSSable, not required another language. CSS is evolving just like any other language. I'd suggest if you really think this about CSS, you're doing it wrong. CSS was painful for a long time, but still light years ahead of HTML styling. This is how tools evolve.
- 0x4a42 11y ago
  >I'm sorry, you're just completely incorrect. I'm a <insert HTML/CSS/JS worker title here> and literally do this every day. That's cool. I'm too HTML/JS/CSS dev (among other) and I'm not "just completly wrong". >The Box model issue is being fixed with flexbox; It could have been fixed 15 years ago. And when it appeared it broke a ton of librairies developped during those years, like CSS grids and stuffs like jQueryUI which still has some incompatibilites. It's no fun at all if you have to maintains some older projets are if you are building services for regions were IE 8/9/10 are still used. Even in Europs for some markets you still get about 8% of those 3 versions of IE. > centering is getting there too, gridding is improving; Getting there? After 15+ years? We are talking about "centering" and "grids"! And still not there yet. This is just crazy. >CSS animations are ENTIRELY about style and not to do with JS, it's to state hey, anything style related should be CSSable, not required another language. Just try something basic : animate an element along a sinusoidal path in CSS. Look at the code you get . Then try the same in JS. > CSS is evolving just like any other language. I'd suggest if you really think this about CSS, you're doing it wrong. CSS was painful for a long time, but still light years ahead of HTML styling. This is how tools evolve. CSS was less painful a few years ago when they were less devices and web applications were simpler. Now with all the differents devices screen size, the need of advanced applications CSS just doesn't make it. Responsive layout using media-queries just adding broken hack on top of the Web stack.
  - toyg 11y ago
    > Getting there? After 15+ years? We are talking about "centering" and "grids"! And still not there yet. This is just crazy. No, this is what happens when multiple competitors have to agree on a complex evolving standard. Result: they all drag their feet one way or the other, each release breaks all sorts of stuff, and so on. That's because interoperability with competitors is NOBODY'S PRIORITY when all actors are well-established (the youngest browser engine is khtml/webkit, started in 1998; seen any new engine recently? Didn't think so.). In fact, the largest the market-share, the greater the incentive to add more incompatibilities in order to keep your lock-in as strong as possible. So yeah, CSS can be maddening, and in many ways it's not entirely succeeded (you mention mobile, that was quite a failure), but it wasn't because of problems with the standard itself, or at least not entirely.
nilved 11y ago
This isn't really specific to CSS, the web is just a terrible place.
madeofpalk 11y ago
> Centering things? You have to use hacks even for this simple purpose. To be fair, that was solved a while ago with flexbox, which now has next to universal adoption. If youre targeting a browser that doesn't support flexbox, you're going to have a lot of other hacks in place as well.
olavk 11y ago
Jut to put you rant in context, the CSS color names were not decided by CSS, they were adopted from presentational HTML. The initial stage of CSS was to provide an alternative to presentational HTML (font tags, bgcolor attribute etc.) by supporting at least the equal presentational power in a style sheet language. Since HTML already had color names, CSS also needed them in order to allow easy porting of style information from HTML to CSS.

by 0x4a42 11y ago

mfoy_ 11y ago

I use CSS quite a bit and I still barely grok the myriad interactions between display, position, and float and nested variations thereupon. That's why I love Bootstrap.

deleted 11y ago

[deleted]

ghrifter 11y ago

I still can't believe you have to hack a margin: 0 auto; to center stuff still... Unless there's a new html element or css trick I'm unaware of? (like the `<center>` of old)?

IshKebab 11y ago
Yeah they actually finally fixed this with flexbox.
floatboth 11y ago
It's not really a hack – it does make sense. Make left and right margin automatic so it would be balanced automatically. There's flexbox, which allows vertical centering and other cool stuff.
RobertKerans 11y ago
`justify-content: center` when items are laid out on the x-axis, `align-items: center` when on y-axis

SonicSoul 11y ago

CSS is a complete utter crap that failed to solve the problems for which it exists really? to me it seems to work very well. When I compare it to doing layouts in desktop apps such as winforms or WPF, CSS is amazing. I am no expert in it, but 99% of the time it more than meets my needs and I love how I can easily override other websites styles with something like stylebot. Seems like your experience is 100% opposite. What would be a good solution in place of CSS ?

pjmlp 11y ago
Really?! I am yet to find anything like Grid and Relative layouts in CSS.

eridius 11y ago

> What animations have to do with styling and layout? What don't they have to do with it? CSS is all about defining the way the site looks. Animations, and especially transitions between states, is the exact same thing. Animations are just layout plus time.

devit 11y ago

It works fine for documents, which were the original target. It didn't work that well for applications or multi-element "content sites", but now with Flexbox it mostly does, and it continues to get better.

antod 11y ago

> CSS is a complete utter crap that failed to solve the problems for which it exists. Huh? Do you not remember/know what it was like to style webpages with FONT elements before CSS? CSS was a godsend. That was the separating content from presentation breakthrough. The problem for which it existed wasn't layout. CSS1 (1996) didn't even have anything in it for layout. >- About Tables: 15 years ago everybody switche to tabless layouts for the purpose of separating markup from presentation. Using tables for layout was the original hack. Likewise using floats to avoid it was also a hack. Neither of those features were designed for those purposes. You can possibly blame the CSS standard for being incomplete, but you can't blame it for designers creating elaborate hacks out of it. > A few years later we got access to the table display mode in CSS because, well, not a single one from the other solution worked well to build layout. Qo we got offered the option to emulate html tables in CSS. You make it sound like table display was added after the failure of other layout methods. Not so - table display was there right from the beginning when CSS first added layout (CSS2 in 1998). It was IEs failure to implement it for nearly a decade that meant nobody was aware of or could use it for many years.

lmm 11y ago
> Huh? Do you not remember/know what it was like to style webpages with FONT elements before CSS? CSS was a godsend. That was the separating content from presentation breakthrough. Have you tried using FONT recently? (Or indeed, any time this decade?) When you're generating your pages programmatically it's really easy to separate content and presentation concerns in code but then combine them when finally rendering the page. You can use a normal programming language which is much clearer than CSS selectors. CSS was necessary in the days of hand-written HTML, but once you have a CMS you might as well use FONT and inline styles (possibly using CSS just with single classes, as a kind of "cache" to avoid repeating the same inline styling block everywhere).
- rubbingalcohol 11y ago
  What if you don't want to use a CMS?
  - 11y ago

matthewmacleod 11y ago

CSS is a complete utter crap that failed to solve the problems for which it exists. Today CSS is a broken tool that still can't easily be used to design even the most basic layout without requiring a ton of hacks. I don't agree with this. CSS is a warty tool with a mixed background, but modern CSS is pretty effective and pleasant to use, especially when combined with a preprocessor. A broken box model The W3C box is counter-intuitive, but bear in mind that nobody really expected CSS to be used for layout at the point it was initially selected, so I doubt it was considered that important. And in any case, it's fixed now, with box-sizing supported by like 98% of browsers globally. Centering things? You have to use hacks even for this simple purpose. No you don't. There are well-documented, consistent ways to centre in CSS. Vertical entering used to be difficult (for obvious reasons), but now we've got flexbox which solves that problem entirely. Building grids? Let's have fun and pick the one you prefer These all do different things and have different characteristics – so you can pick the one that most suited. Qo we got offered the option to emulate html tables in CSS. Not quite – we got the ability to build visually-table-like things that use table layout rules, but separated them from the semantic implication of tables. That's a good thing. They added CSS animations. What animations have to do with styling and layout? Animations are just the time axis of layout. It makes much more sense to define them and the transitions between them declaratively using CSS. Etc, etc, etc. CSS is just a complete mess. In contrast, I find that CSS is mostly a bit of a scapegoat. Sure, it's taken a while to become a comprehensive layout and styling tool – but combined with something like SASS, I absolutely love writing CSS.

sltkr 11y ago
> No you don't. There are well-documented, consistent ways to centre in CSS. Vertical entering used to be difficult (for obvious reasons), but now we've got flexbox which solves that problem entirely. So, what's the way to put something in the center?
- iopq 11y ago
   and then you center things

burnte 11y ago

I'm sorry, you're just completely incorrect. I'm a <insert HTML/CSS/JS worker title here> and literally do this every day. The Box model issue is being fixed with flexbox; centering is getting there too, gridding is improving; CSS animations are ENTIRELY about style and not to do with JS, it's to state hey, anything style related should be CSSable, not required another language. CSS is evolving just like any other language. I'd suggest if you really think this about CSS, you're doing it wrong. CSS was painful for a long time, but still light years ahead of HTML styling. This is how tools evolve.

0x4a42 11y ago
>I'm sorry, you're just completely incorrect. I'm a <insert HTML/CSS/JS worker title here> and literally do this every day. That's cool. I'm too HTML/JS/CSS dev (among other) and I'm not "just completly wrong". >The Box model issue is being fixed with flexbox; It could have been fixed 15 years ago. And when it appeared it broke a ton of librairies developped during those years, like CSS grids and stuffs like jQueryUI which still has some incompatibilites. It's no fun at all if you have to maintains some older projets are if you are building services for regions were IE 8/9/10 are still used. Even in Europs for some markets you still get about 8% of those 3 versions of IE. > centering is getting there too, gridding is improving; Getting there? After 15+ years? We are talking about "centering" and "grids"! And still not there yet. This is just crazy. >CSS animations are ENTIRELY about style and not to do with JS, it's to state hey, anything style related should be CSSable, not required another language. Just try something basic : animate an element along a sinusoidal path in CSS. Look at the code you get . Then try the same in JS. > CSS is evolving just like any other language. I'd suggest if you really think this about CSS, you're doing it wrong. CSS was painful for a long time, but still light years ahead of HTML styling. This is how tools evolve. CSS was less painful a few years ago when they were less devices and web applications were simpler. Now with all the differents devices screen size, the need of advanced applications CSS just doesn't make it. Responsive layout using media-queries just adding broken hack on top of the Web stack.
- toyg 11y ago
  > Getting there? After 15+ years? We are talking about "centering" and "grids"! And still not there yet. This is just crazy. No, this is what happens when multiple competitors have to agree on a complex evolving standard. Result: they all drag their feet one way or the other, each release breaks all sorts of stuff, and so on. That's because interoperability with competitors is NOBODY'S PRIORITY when all actors are well-established (the youngest browser engine is khtml/webkit, started in 1998; seen any new engine recently? Didn't think so.). In fact, the largest the market-share, the greater the incentive to add more incompatibilities in order to keep your lock-in as strong as possible. So yeah, CSS can be maddening, and in many ways it's not entirely succeeded (you mention mobile, that was quite a failure), but it wasn't because of problems with the standard itself, or at least not entirely.

nilved 11y ago

This isn't really specific to CSS, the web is just a terrible place.

madeofpalk 11y ago

> Centering things? You have to use hacks even for this simple purpose. To be fair, that was solved a while ago with flexbox, which now has next to universal adoption. If youre targeting a browser that doesn't support flexbox, you're going to have a lot of other hacks in place as well.

olavk 11y ago

Jut to put you rant in context, the CSS color names were not decided by CSS, they were adopted from presentational HTML. The initial stage of CSS was to provide an alternative to presentational HTML (font tags, bgcolor attribute etc.) by supporting at least the equal presentational power in a style sheet language. Since HTML already had color names, CSS also needed them in order to allow easy porting of style information from HTML to CSS.