4 ms·

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 th

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
- 0x4a42 11y ago
  Pick the one that you find the more "sane": /* method1: flexbox hack */ .container { display: flex; /* opt into the new box model */ justify-content: center; /* "align" */ align-items: center; /* "valign" */ } /* method2: table hack */ .container { display: table-cell; text-align: center; vertical-align: middle; } /* method3: translate hack */ /* hack to fix bad rendering */ .container { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } /* center me */ .element { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } etc...
  - swhipple 11y ago
    Just to add to your post, the reason that there are multiple ways to "center something" is because tables and flexboxes have different behaviors, especially for multiple children, and the third case of arbitrary translation, but all can be made to give the same visual effect here -- the specific case of aligning and valigning a single child to the center of the parent. In my experience though, the flexbox model is the only example of DWIM in the majority of cases (the only surprise I've had was some situation with an overflowed child inside of a flexbox and requiring an explicit min-height: 0 [1]... something that seemed unintuitive, but modern browsers are beginning to support uniformly). [1] https://code.google.com/p/chromium/issues/detail?id=506893 https://code.google.com/p/chromium/issues/detail?id=506893
Eric_WVGG 11y ago
“Animations are just the time axis of layout.” That was very well put.
laumars 11y ago
You shouldn't need 3rd party server side code to manage and compile your front end style sheets though. I do like SASS as well, but the very fact that it needs to exist is testament to just how poorly designed CSS is for the modern web.

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
0x4a42 11y ago
Pick the one that you find the more "sane": /* method1: flexbox hack */ .container { display: flex; /* opt into the new box model */ justify-content: center; /* "align" */ align-items: center; /* "valign" */ } /* method2: table hack */ .container { display: table-cell; text-align: center; vertical-align: middle; } /* method3: translate hack */ /* hack to fix bad rendering */ .container { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } /* center me */ .element { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } etc...
- swhipple 11y ago
  Just to add to your post, the reason that there are multiple ways to "center something" is because tables and flexboxes have different behaviors, especially for multiple children, and the third case of arbitrary translation, but all can be made to give the same visual effect here -- the specific case of aligning and valigning a single child to the center of the parent. In my experience though, the flexbox model is the only example of DWIM in the majority of cases (the only surprise I've had was some situation with an overflowed child inside of a flexbox and requiring an explicit min-height: 0 [1]... something that seemed unintuitive, but modern browsers are beginning to support uniformly). [1] https://code.google.com/p/chromium/issues/detail?id=506893 https://code.google.com/p/chromium/issues/detail?id=506893

Eric_WVGG 11y ago

“Animations are just the time axis of layout.” That was very well put.

laumars 11y ago

You shouldn't need 3rd party server side code to manage and compile your front end style sheets though. I do like SASS as well, but the very fact that it needs to exist is testament to just how poorly designed CSS is for the modern web.