4 ms·

I'm sure someone will come and say they disagree, but I find CSS extremely unintuitive as well. The primitives it has compose very poorly. There are too many wa

I'm sure someone will come and say they disagree, but I find CSS extremely unintuitive as well. The primitives it has compose very poorly. There are too many ways to do the same thing, each with their own weird quirks. Sometimes it's really hard to get it to render something simple. I mean... Just centering something on the screen is needlessly complicated. I wish CSS was more like a programming language, with a minimal set of primitives that are nicely composable, instead of 1000 bells and whistles that go in every direction.

tephra 6y ago
I agree with your comment mostly but just to note that it is no longer complicated to center things. .centered { display: flex; justify-content: center; align-items: center; } Indeed there are two (at least) more ways to both horizontally and vertically center something (using CSS Grid and the good old translate(-50%, -50%)) and with flex I always have a hard time remembering if it is justify-items or justify-content..
- divbzero 6y ago
  I’m chuckling because (a) parent is right that it’s easier than before, and (b) grandparent is right that it’s still infuriatingly obscure to anyone not fluent in CSS.
- strenholme 6y ago
  With “display: table”, “margin-left” and “margin-right” horizontally center the content. For example: <style> .foo { display: table; margin-left: auto; margin-right: auto; } </style> <div class=foo> <h1>Hello, world!</h1> </div> Here, it is only centered when “display: table” is present. e.g. this is not centered: <style> .foo { /* display: table; DISABLED */ margin-left: auto; margin-right: auto; } </style> <div class=foo> <h1>Hello, world!</h1> </div> Simple “display: table” two-column layout: <style> .all { display: table; margin-left: auto; margin-right: auto; } .sub { display: table-row; } .left { display: table-cell; } .right { display: table-cell; } </style> <div class=all> <div class=sub> <div class=left> <h1>Hello, world!</h1> Left side. </div> <div class=right> <h1>Right bar</h1> Right side. </div> </div> </div> There are ways to vertically center content, but since that wasn’t something CSS was designed to do (for the kinds of things where something vertically centered makes sense, we were supposed to be making web apps in Java), they are all clunky.
not_knuth 6y ago
Well, CSS is pretty old, and as such old, backwards-compatible specs do, it's utterly bloated. I tend to use CSS Grid and Flex almost exclusively, since they are a lot more intuitive than the block and inline combo. But then again if you look at the origin of CSS, it all makes sense. CSS was never developed to be used for app-like interfaces. At it's inception, it was intended as a style sheet for documents (specifically scientific documents). The original idea was that everybody would have their own CSS which they could then apply to HTML locally. Interestingly, 30 years later, HTML and CSS are used for almost anything but scientific documents and nobody uses a personal style sheet. The technology is really not well suited for the cases it is most often used for today and there is a superb blog post on the topic that has featured several times on HN: The Blog Post: https://eager.io/blog/the-languages-which-almost-were-css/ https://eager.io/blog/the-languages-which-almost-were-css/ HN 4 years ago: https://news.ycombinator.com/item?id=11994405 https://news.ycombinator.com/item?id=11994405 HN only 4 months ago: https://news.ycombinator.com/item?id=24118151 https://news.ycombinator.com/item?id=24118151
- antod 6y ago
  Nice blog about the early styling proposals which predate my webdev experience. For the newbies, back in the CSS 1 days, the intention was to create separate styling rules to make maintaining or changing styles easier. If you ever had to style HTML before CSS by wrapping each and every any colour or font change in HTML elements or embedding background colour attributes inside each table cell, you'll understand the pain it was addressing. The CSS 1 spec was relatively small and easy to understand - although pretty limited. I first seriously tried to make that work in the IE4 days. IE4 was almost kinda OK at CSS1, but NN4.x was just awful. Opera was (not surprisingly) the best at CSS, but nobody used it. The complex layout stuff came not log after in the much bigger CSS 2, but the nature of IE only badly implementing a fraction of it for a decade or more meant that most people just cargo culted IE work arounds and never really sat down to learn any of the principles. Not claiming they were great principles, just that there were some :)

tephra 6y ago

I agree with your comment mostly but just to note that it is no longer complicated to center things. .centered { display: flex; justify-content: center; align-items: center; } Indeed there are two (at least) more ways to both horizontally and vertically center something (using CSS Grid and the good old translate(-50%, -50%)) and with flex I always have a hard time remembering if it is justify-items or justify-content..

divbzero 6y ago
I’m chuckling because (a) parent is right that it’s easier than before, and (b) grandparent is right that it’s still infuriatingly obscure to anyone not fluent in CSS.
strenholme 6y ago
With “display: table”, “margin-left” and “margin-right” horizontally center the content. For example: <style> .foo { display: table; margin-left: auto; margin-right: auto; } </style> <div class=foo> <h1>Hello, world!</h1> </div> Here, it is only centered when “display: table” is present. e.g. this is not centered: <style> .foo { /* display: table; DISABLED */ margin-left: auto; margin-right: auto; } </style> <div class=foo> <h1>Hello, world!</h1> </div> Simple “display: table” two-column layout: <style> .all { display: table; margin-left: auto; margin-right: auto; } .sub { display: table-row; } .left { display: table-cell; } .right { display: table-cell; } </style> <div class=all> <div class=sub> <div class=left> <h1>Hello, world!</h1> Left side. </div> <div class=right> <h1>Right bar</h1> Right side. </div> </div> </div> There are ways to vertically center content, but since that wasn’t something CSS was designed to do (for the kinds of things where something vertically centered makes sense, we were supposed to be making web apps in Java), they are all clunky.

not_knuth 6y ago

Well, CSS is pretty old, and as such old, backwards-compatible specs do, it's utterly bloated. I tend to use CSS Grid and Flex almost exclusively, since they are a lot more intuitive than the block and inline combo. But then again if you look at the origin of CSS, it all makes sense. CSS was never developed to be used for app-like interfaces. At it's inception, it was intended as a style sheet for documents (specifically scientific documents). The original idea was that everybody would have their own CSS which they could then apply to HTML locally. Interestingly, 30 years later, HTML and CSS are used for almost anything but scientific documents and nobody uses a personal style sheet. The technology is really not well suited for the cases it is most often used for today and there is a superb blog post on the topic that has featured several times on HN: The Blog Post: https://eager.io/blog/the-languages-which-almost-were-css/ https://eager.io/blog/the-languages-which-almost-were-css/ HN 4 years ago: https://news.ycombinator.com/item?id=11994405 https://news.ycombinator.com/item?id=11994405 HN only 4 months ago: https://news.ycombinator.com/item?id=24118151 https://news.ycombinator.com/item?id=24118151

antod 6y ago
Nice blog about the early styling proposals which predate my webdev experience. For the newbies, back in the CSS 1 days, the intention was to create separate styling rules to make maintaining or changing styles easier. If you ever had to style HTML before CSS by wrapping each and every any colour or font change in HTML elements or embedding background colour attributes inside each table cell, you'll understand the pain it was addressing. The CSS 1 spec was relatively small and easy to understand - although pretty limited. I first seriously tried to make that work in the IE4 days. IE4 was almost kinda OK at CSS1, but NN4.x was just awful. Opera was (not surprisingly) the best at CSS, but nobody used it. The complex layout stuff came not log after in the much bigger CSS 2, but the nature of IE only badly implementing a fraction of it for a decade or more meant that most people just cargo culted IE work arounds and never really sat down to learn any of the principles. Not claiming they were great principles, just that there were some :)