5 ms·

you’re kind of missing my point. which is fine because i didn’t spend a whole lot of words explaining it. i am not saying table based design is bad. but we did

you’re kind of missing my point. which is fine because i didn’t spend a whole lot of words explaining it. i am not saying table based design is bad. but we did originally move away from it for legitimate reasons that seem to have been largely forgotten, and as a result we now have developers who build json theme files and react frameworks that wire “darkmode=true” individually through every component instead of just using css for what it was designed to do: to exactly be a theme configuration format. a lot of where things have gone wrong is CSS started to be used for layout, which was originally a hack, abusing the float property to do things it was never designed to do. and css has never gotten good at it, because fundamentally layout is about relationships between elements, while CSS is stuck only ever specifying properties ON elements. sure we have display table, flexbox and css grid, but css is an incredibly awkward and unnatural way to express those concepts. app frameworks deal with layout seperately from colors and fonts, which is how it should be done. and so this is why it’s all hacks and workarounds in css land. it doesn’t have to be this way. but it’s how it is.

ChrisMarshallNY 6y ago
I got the point, but I found it a convenient coat hook for my favorite ulster :). I can certainly agree with you. Some of the dynamically-generated markup can be a nightmare. "ZenPsycho." Great screen name.
orange8 6y ago
> a lot of where things have gone wrong is CSS started to be used for layout The layout is part and parcel of the style. CSS gives you 7 different layout modes to choose from (normal, table, float, positioned, multi-column, flex and grid). There is more than enough here to implement any sort of layout problem you face, from using 15 year old table and flex hacks to cleaner modern approaches like flex. > while CSS is stuck only ever specifying properties ON elements The "position: relative" (CSS1), float and flex are all about positioning elements relative to one another. Other properties like margin, align and float are also about positioning items relative to one another. > but css is an incredibly awkward and unnatural way to express those concepts I think CSS is pretty easy and straightforward to reason about, once you decide that it is worth investing some time and effort in learning. It really always surprises me how some really smart people just do not get CSS, and I think it is not about ability, but attitude. CSS is dismissed as "that thing for designers", and calling CSS a programming language is usually met with smirks. That is the real problem with CSS, its reputation.
- ZenPsycho 6y ago
  “float” and “normal” (what?) aren’t layout modes. the rest didn’t exist in css until relatively recently. postion: relative exists, yes, but it doesn’t do what you say it does. - it sets the top, left, bottom and right properties to be relative its own natural position. it doesn’t specify any relationship to any other element. the other properties you say specify layout relative other elements- don’t do what you think they do either. align and margin only effects an element’s content, margin only refers to other elements in edge cases, and float was only ever supposed to let you embed figures that text would wraparound. it’s use for layout was an abuse and not what it was designed for. Though i can see how it can seem like those elements seem like they refer to other elements, but that is just a consequence of the properties interacting with the document flow algorithm, which is there with or without css. while css now does have real layout modules: flexbox and grid, CSS wasn’t designed for layout and it just isn’t very good at it, especially if you compare it to say, cocoa autolayout, or the flexbox model in UI frameworks that were designed to do this stuff at the start instesd of having it awkwardly bolted on. and just what is document flow? is it a layout algorithm? no, it’s a greedy word wrap algorithm applied to boxes. that’s it. finally, 15 year old display: table and flex hacks? what are you smoking. ie8 was released in 2009 and didn’t uproot ie6 and ie7 until many years later. i had to have fallbacks for ie7 up to 2015. flex only became usable after 2015. it existed before that but not in all the browsers. the closest thing in css to what I am talking about is position:absolute, which implicitly refers an element to its nearest parent with either position relative or position absolute. i don’t get to identify which element or elements i would like to refer to directly. the only other thing is percentage unit which refers to a percentage of the paren’s width or height depending on which property it appears in- which was annoying enough they almost fixed it with vw and vh units which refer specifically to width and height of the viewport, but if i want a proportion of any other element’s dinensions my option is to use javascript or eat a bag of donkeys.
  - orange8 6y ago
    > “float” and “normal” (what?) aren’t layout modes. https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode > the rest didn’t exist in css until relatively recently. Out of the 7 layout modes, only the last two came into existence recently. The point is, when CSS was being designed as a declarative, domain specific programming language, it was designed to handle EVERYTHING to do with how things appear on a browser. Even when you specify styles using JS or directly in HTML, those are simple handed over to the browsers CSS engine. The HTML engine deals with markup, while the JS engine deals with behavior. If you want to talk directly and powerfully to the CSS engine, use CSS. That what it was designed to handle: everything to do with what you SEE in a browsers screen. > position: relative exists, yes, but it doesn’t do what you say it does. - it sets the top, left, bottom and right properties to be relative its own natural position. If I want to position elements absolutely within a container element, one way is to have the container "position: relative" and the child elements "position: absolute". The same effect can be achieved via flex or grid layouts. > it’s use for layout was an abuse and not what it was designed for. I am honestly flabbergasted by this assertion. The layout of something is part of its style. See https://en.wikipedia.org/wiki/Visual_design_elements_and_principles https://en.wikipedia.org/wiki/Visual_design_elements_and_pri... CSS was designed to handle all that. Layout is all about shape, space and form. > CSS wasn’t designed for layout and it just isn’t very good at it, especially if you compare it to say, cocoa autolayout, or the flexbox model in UI frameworks that were designed to do this stuff at the start instead of having it awkwardly bolted on. Whenever anyone dumps on CSS, HTML and JS, I simply remind them that they run the web, and the web is the most successful, open, flexible and used platform in existence. CSS is doing exactly what it was designed to do, and will outlive and outperform all those UI frameworks as it breaks out of the browser into desktop and mobile app space.

ChrisMarshallNY 6y ago

I got the point, but I found it a convenient coat hook for my favorite ulster :). I can certainly agree with you. Some of the dynamically-generated markup can be a nightmare. "ZenPsycho." Great screen name.

orange8 6y ago

> a lot of where things have gone wrong is CSS started to be used for layout The layout is part and parcel of the style. CSS gives you 7 different layout modes to choose from (normal, table, float, positioned, multi-column, flex and grid). There is more than enough here to implement any sort of layout problem you face, from using 15 year old table and flex hacks to cleaner modern approaches like flex. > while CSS is stuck only ever specifying properties ON elements The "position: relative" (CSS1), float and flex are all about positioning elements relative to one another. Other properties like margin, align and float are also about positioning items relative to one another. > but css is an incredibly awkward and unnatural way to express those concepts I think CSS is pretty easy and straightforward to reason about, once you decide that it is worth investing some time and effort in learning. It really always surprises me how some really smart people just do not get CSS, and I think it is not about ability, but attitude. CSS is dismissed as "that thing for designers", and calling CSS a programming language is usually met with smirks. That is the real problem with CSS, its reputation.

ZenPsycho 6y ago
“float” and “normal” (what?) aren’t layout modes. the rest didn’t exist in css until relatively recently. postion: relative exists, yes, but it doesn’t do what you say it does. - it sets the top, left, bottom and right properties to be relative its own natural position. it doesn’t specify any relationship to any other element. the other properties you say specify layout relative other elements- don’t do what you think they do either. align and margin only effects an element’s content, margin only refers to other elements in edge cases, and float was only ever supposed to let you embed figures that text would wraparound. it’s use for layout was an abuse and not what it was designed for. Though i can see how it can seem like those elements seem like they refer to other elements, but that is just a consequence of the properties interacting with the document flow algorithm, which is there with or without css. while css now does have real layout modules: flexbox and grid, CSS wasn’t designed for layout and it just isn’t very good at it, especially if you compare it to say, cocoa autolayout, or the flexbox model in UI frameworks that were designed to do this stuff at the start instesd of having it awkwardly bolted on. and just what is document flow? is it a layout algorithm? no, it’s a greedy word wrap algorithm applied to boxes. that’s it. finally, 15 year old display: table and flex hacks? what are you smoking. ie8 was released in 2009 and didn’t uproot ie6 and ie7 until many years later. i had to have fallbacks for ie7 up to 2015. flex only became usable after 2015. it existed before that but not in all the browsers. the closest thing in css to what I am talking about is position:absolute, which implicitly refers an element to its nearest parent with either position relative or position absolute. i don’t get to identify which element or elements i would like to refer to directly. the only other thing is percentage unit which refers to a percentage of the paren’s width or height depending on which property it appears in- which was annoying enough they almost fixed it with vw and vh units which refer specifically to width and height of the viewport, but if i want a proportion of any other element’s dinensions my option is to use javascript or eat a bag of donkeys.
- orange8 6y ago
  > “float” and “normal” (what?) aren’t layout modes. https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode > the rest didn’t exist in css until relatively recently. Out of the 7 layout modes, only the last two came into existence recently. The point is, when CSS was being designed as a declarative, domain specific programming language, it was designed to handle EVERYTHING to do with how things appear on a browser. Even when you specify styles using JS or directly in HTML, those are simple handed over to the browsers CSS engine. The HTML engine deals with markup, while the JS engine deals with behavior. If you want to talk directly and powerfully to the CSS engine, use CSS. That what it was designed to handle: everything to do with what you SEE in a browsers screen. > position: relative exists, yes, but it doesn’t do what you say it does. - it sets the top, left, bottom and right properties to be relative its own natural position. If I want to position elements absolutely within a container element, one way is to have the container "position: relative" and the child elements "position: absolute". The same effect can be achieved via flex or grid layouts. > it’s use for layout was an abuse and not what it was designed for. I am honestly flabbergasted by this assertion. The layout of something is part of its style. See https://en.wikipedia.org/wiki/Visual_design_elements_and_principles https://en.wikipedia.org/wiki/Visual_design_elements_and_pri... CSS was designed to handle all that. Layout is all about shape, space and form. > CSS wasn’t designed for layout and it just isn’t very good at it, especially if you compare it to say, cocoa autolayout, or the flexbox model in UI frameworks that were designed to do this stuff at the start instead of having it awkwardly bolted on. Whenever anyone dumps on CSS, HTML and JS, I simply remind them that they run the web, and the web is the most successful, open, flexible and used platform in existence. CSS is doing exactly what it was designed to do, and will outlive and outperform all those UI frameworks as it breaks out of the browser into desktop and mobile app space.