5 ms·

I get TIMTOWYTDI, that it's good to have more than one way, but each seems equally inscrutable. Can you imagine explaining any of these to a novice who just wa

I get TIMTOWYTDI, that it's good to have more than one way, but each seems equally inscrutable. Can you imagine explaining any of these to a novice who just wants that box to be centered and stay centered? When they ask "Why is there no simple 'alignment:center' option for the named thing?", what can we say other than "but look at all this jargon with the word 'center' in it! Easy! Now go back to your selectors!" CSS always feels like less of a languages and more like a bunch of hacks crammed into the browser. And the inscrutibility leads to copy-pasta code: search for a sample, paste it, it works now, mostly... But when it breaks, newbie dev will struggle to untangle. (Ruefully, speaking from experience). I know, many folks love css, but I find it a big mental discontinuity from html and js. It's solving a different problem, sure, but I look forward to some future version of styling which might offer a more "readable" experience.

chrisweekly 6y ago
I sympathize. Been doing webdev since 1998 (before CSS). Most CSS in the wild is just awful and virtually unmaintainable. I can't recommend highly enough that you and everyone else (the overwhelming majority) who feels the same way head to https://every-layout.dev https://every-layout.dev to learn about "Axiomatic CSS". It explains and illustrates not just layout but virtually everything you need to know about leveraging standard CSS, building up from clearly-articulated and unimpeachable first principles. The axioms and examples on the free site are profoundly useful, and the $100 book / full site / component generator are more than worth it. Disclaimer: No affiliation, just a grateful customer hoping these ideas catch on.
- marlowe221 6y ago
  Thanks for posting this. As someone new to professional web development, stuff like this is a valuable resource.
- spinningslate 6y ago
  thanks - you've just sorted my Christmas project for me. I've tried to wrap my head around CSS layout several times. On each occasion, I've come away with a perplexed sense of "but.... surely it shouldn't be as hard as this?". Layout is about the relationship among elements. CSS - as far as I could see - is based on styling elements within containers. There's little or no ability to express peer-to-peer relationships directly. First example on every-layout and already I have a fresh perspective. For example, under stack [0]: "margin is really a property of the relationship between two proximate elements. " and then a solution for styling the relationship directly. [0]: https://every-layout.dev/layouts/stack/ https://every-layout.dev/layouts/stack/
shawnz 6y ago
It's designed around the idea that the user chooses the width of their browser and the page becomes as long as necessary to fit all that content by scrolling, just like a word document. Centering, especially vertical centering, is kind of hard to define in that context. When you start adding features to give web developers pixel-perfect control of the viewport then you impede other features like allowing the user to choose their own font sizes while still having everything render in a sensible way.
- anonymouse008 6y ago
  Apples AutoLayout already does this — and in a much more elegant way. I’ve been making MacCatalyst apps recently and have been searching hide and wide for a 1:1 UIKit/AutoLayout <> Web front end (aka a rats nest of js, css and html).
  - shawnz 6y ago
    I would argue AutoLayout has a way easier job: There are less backward-compatibility concerns, everyone is using the same GUI-based editor and there are many less device configurations to account for. It is also arguably less flexible than the Web in terms of the range of UIs that you could create.
  - stevedzreams 6y ago
    *searching high and wide :)
    - anonymouse008 6y ago
      Grazie — Sent from my iPhone and != proofread ;)
- dmitriid 6y ago
  It's designed around two ideas: 1. A page is tet + images. Complex layouts are very late invention for HTML 2. The whole layout can be done in a single pass. This was crucial for the 90-s era browsers because you wanted to be fast on rather underpowered machines. I think double-pass was permitted/mentioned in standards only around 2000/2001 with relation to tables (I forget what it was exactly). Centering an element vertically may require several passes (do the rest of the layout, layout the component, layout the component centrally, possibly reflow the rest of the document, etc.), and it was a big no-no
taphangum 6y ago
I know, many folks love css, but I find it a big mental discontinuity from html and js. It's solving a different problem This is actually the misconception that leads to confusion with (and ultimately, poorly written) CSS. It comes from a misunderstanding of what creating a web page actually is. As Alan Kay once remarked, “A change of perspective is worth 80 IQ points.” This is no less true with CSS. Most developers view CSS an annoying 'styling' language, that's 'not really a programming language'. Which separates it in your mind from the engineering frame of view that tends to excite you as a developer. This makes CSS tedious to use. In truth, HTML and CSS are parts of a holistic language of layout construction. They work in unison, not as individual components. Very much an engineering toolset. Just that the problems to be solved are more visual in nature than you're probably used to. Instead of seeing CSS as an annoying way to 'style' pages, see it instead as a visual programming language for constructing visual guides (UI's) for your user. You don't 'style' pages, you 'construct' and 'architect' them. It sounds weird to use these words, but they have a massive effect in changing your perception of what you're doing. And that has a massive effect on your impression and willingness to learn how to do it well. I think that understanding this is one of the key differentiators between developers who are good with CSS and those that struggle. Tools like TailwindCSS (that lead to a massive increase in both productivity with CSS as well layout maintanability) are based on this fundamental premise. I expand on this more in a recent post called "How To Get Better At CSS", which you can read here: https://planflow.dev/blog/how-to-get-better-at-css https://planflow.dev/blog/how-to-get-better-at-css Sidenote: I'm also working on a book that aims to help you gain mastery over CSS, showing you how to truly understand it, by learning how to debug its most common issues as well as re-framing how you see it in the way I've described above. You can check that out here: https://gumroad.com/l/Debbg/z823cp8 https://gumroad.com/l/Debbg/z823cp8.
- keb_ 6y ago
  > As the late great Alan Kay once remarked Alan Kay is still alive.
  - taphangum 6y ago
    I had been referencing someone else with another quote initially, forgot to remove that part. My mistake! Have now edited to fix.
warent 6y ago
> TIMTOWYTDI what?
- uses 6y ago
  there is more than one way to do it
- ultrafez 6y ago
  > There's more than one way to do it (TMTOWTDI or TIMTOWTDI, pronounced Tim Toady) is a Perl programming motto. https://en.wikipedia.org/wiki/There%27s_more_than_one_way_to_do_it https://en.wikipedia.org/wiki/There%27s_more_than_one_way_to...
  - karottenreibe 6y ago
    Why am I not surprised that this unreadable mess of an acronym is a Perl motto?
- mwexler 6y ago
  Sorry, showing my age and inability to spell and lack of appreciation of the pain of inscrutable acronyms... in a post about inscrutable languages. Ouch on me.
JxLS-cpgbe0 6y ago
I try to explain to my junior devs why a 3-column layout was considered the "holy grail" at the time. Why we needed Firebug. SWFObject. Why I can type -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" from memory. It was ridiculous! The last centering example (left with translate) was fun to explain to junior devs too.
onion2k 6y ago
Can you imagine explaining any of these to a novice who just wants that box to be centered and stay centered? Layout is a hard thing that looks easy until you get in to the details. This is no different to talking to a junior C developer about transferring data and them asking why there isn't just a single simple and robust way to send structured data from one server to another. We have JSON and Unix sockets so why do Protobufs need to be a thing. Because their lack of experience doesn't give them the depth of knowledge to understand why it's actually hard, that's why.

chrisweekly 6y ago

I sympathize. Been doing webdev since 1998 (before CSS). Most CSS in the wild is just awful and virtually unmaintainable. I can't recommend highly enough that you and everyone else (the overwhelming majority) who feels the same way head to https://every-layout.dev https://every-layout.dev to learn about "Axiomatic CSS". It explains and illustrates not just layout but virtually everything you need to know about leveraging standard CSS, building up from clearly-articulated and unimpeachable first principles. The axioms and examples on the free site are profoundly useful, and the $100 book / full site / component generator are more than worth it. Disclaimer: No affiliation, just a grateful customer hoping these ideas catch on.

marlowe221 6y ago
Thanks for posting this. As someone new to professional web development, stuff like this is a valuable resource.
spinningslate 6y ago
thanks - you've just sorted my Christmas project for me. I've tried to wrap my head around CSS layout several times. On each occasion, I've come away with a perplexed sense of "but.... surely it shouldn't be as hard as this?". Layout is about the relationship among elements. CSS - as far as I could see - is based on styling elements within containers. There's little or no ability to express peer-to-peer relationships directly. First example on every-layout and already I have a fresh perspective. For example, under stack [0]: "margin is really a property of the relationship between two proximate elements. " and then a solution for styling the relationship directly. [0]: https://every-layout.dev/layouts/stack/ https://every-layout.dev/layouts/stack/

shawnz 6y ago

It's designed around the idea that the user chooses the width of their browser and the page becomes as long as necessary to fit all that content by scrolling, just like a word document. Centering, especially vertical centering, is kind of hard to define in that context. When you start adding features to give web developers pixel-perfect control of the viewport then you impede other features like allowing the user to choose their own font sizes while still having everything render in a sensible way.

anonymouse008 6y ago
Apples AutoLayout already does this — and in a much more elegant way. I’ve been making MacCatalyst apps recently and have been searching hide and wide for a 1:1 UIKit/AutoLayout <> Web front end (aka a rats nest of js, css and html).
- shawnz 6y ago
  I would argue AutoLayout has a way easier job: There are less backward-compatibility concerns, everyone is using the same GUI-based editor and there are many less device configurations to account for. It is also arguably less flexible than the Web in terms of the range of UIs that you could create.
- stevedzreams 6y ago
  *searching high and wide :)
  - anonymouse008 6y ago
    Grazie — Sent from my iPhone and != proofread ;)
dmitriid 6y ago
It's designed around two ideas: 1. A page is tet + images. Complex layouts are very late invention for HTML 2. The whole layout can be done in a single pass. This was crucial for the 90-s era browsers because you wanted to be fast on rather underpowered machines. I think double-pass was permitted/mentioned in standards only around 2000/2001 with relation to tables (I forget what it was exactly). Centering an element vertically may require several passes (do the rest of the layout, layout the component, layout the component centrally, possibly reflow the rest of the document, etc.), and it was a big no-no

taphangum 6y ago

I know, many folks love css, but I find it a big mental discontinuity from html and js. It's solving a different problem This is actually the misconception that leads to confusion with (and ultimately, poorly written) CSS. It comes from a misunderstanding of what creating a web page actually is. As Alan Kay once remarked, “A change of perspective is worth 80 IQ points.” This is no less true with CSS. Most developers view CSS an annoying 'styling' language, that's 'not really a programming language'. Which separates it in your mind from the engineering frame of view that tends to excite you as a developer. This makes CSS tedious to use. In truth, HTML and CSS are parts of a holistic language of layout construction. They work in unison, not as individual components. Very much an engineering toolset. Just that the problems to be solved are more visual in nature than you're probably used to. Instead of seeing CSS as an annoying way to 'style' pages, see it instead as a visual programming language for constructing visual guides (UI's) for your user. You don't 'style' pages, you 'construct' and 'architect' them. It sounds weird to use these words, but they have a massive effect in changing your perception of what you're doing. And that has a massive effect on your impression and willingness to learn how to do it well. I think that understanding this is one of the key differentiators between developers who are good with CSS and those that struggle. Tools like TailwindCSS (that lead to a massive increase in both productivity with CSS as well layout maintanability) are based on this fundamental premise. I expand on this more in a recent post called "How To Get Better At CSS", which you can read here: https://planflow.dev/blog/how-to-get-better-at-css https://planflow.dev/blog/how-to-get-better-at-css Sidenote: I'm also working on a book that aims to help you gain mastery over CSS, showing you how to truly understand it, by learning how to debug its most common issues as well as re-framing how you see it in the way I've described above. You can check that out here: https://gumroad.com/l/Debbg/z823cp8 https://gumroad.com/l/Debbg/z823cp8.

keb_ 6y ago
> As the late great Alan Kay once remarked Alan Kay is still alive.
- taphangum 6y ago
  I had been referencing someone else with another quote initially, forgot to remove that part. My mistake! Have now edited to fix.

warent 6y ago

> TIMTOWYTDI what?

uses 6y ago
there is more than one way to do it
ultrafez 6y ago
> There's more than one way to do it (TMTOWTDI or TIMTOWTDI, pronounced Tim Toady) is a Perl programming motto. https://en.wikipedia.org/wiki/There%27s_more_than_one_way_to_do_it https://en.wikipedia.org/wiki/There%27s_more_than_one_way_to...
- karottenreibe 6y ago
  Why am I not surprised that this unreadable mess of an acronym is a Perl motto?
mwexler 6y ago
Sorry, showing my age and inability to spell and lack of appreciation of the pain of inscrutable acronyms... in a post about inscrutable languages. Ouch on me.

JxLS-cpgbe0 6y ago

I try to explain to my junior devs why a 3-column layout was considered the "holy grail" at the time. Why we needed Firebug. SWFObject. Why I can type -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" from memory. It was ridiculous! The last centering example (left with translate) was fun to explain to junior devs too.

onion2k 6y ago

Can you imagine explaining any of these to a novice who just wants that box to be centered and stay centered? Layout is a hard thing that looks easy until you get in to the details. This is no different to talking to a junior C developer about transferring data and them asking why there isn't just a single simple and robust way to send structured data from one server to another. We have JSON and Unix sockets so why do Protobufs need to be a thing. Because their lack of experience doesn't give them the depth of knowledge to understand why it's actually hard, that's why.