10 ms·

I wrote a (much shorter) article in a similar vein a few years ago: https://css-tricks.com/css-is-awesome/ https://css-tricks.com/css-is-awesome/ I find it fas

I wrote a (much shorter) article in a similar vein a few years ago: https://css-tricks.com/css-is-awesome/ https://css-tricks.com/css-is-awesome/ I find it fascinating (saddening, but fascinating) that so many programmers are so turned-off by CSS and find it so unintuitive. I almost want to set out on a research project to figure out why that is. My experience with it couldn't be more different. Here's one way of looking at CSS (which I didn't think of until just now): CSS is not a language you build something up out of. It's more like you're carefully taming a wild horse, or pruning a plant. You have to embrace the natural movement of the thing, and strategically redirect it only where necessary. If you come in with the mindset of constructing the world from scratch (which works in most programming languages), you're just going to be fighting the beast the whole way, and you're going to lose.

ianbooker 6y ago
CSS has a fundamentally different cognitive kalkül. You can do things fast, but if you do not have a deeper understanding, it can get pretty frustrating. At least historically. It is like asking a Python programmer to write Prolog. Anyone can write Prolog, but only if you are willing to learn. The difference is: Prolog is an optional choice for most, CSS is a must for certain applications..
jheruty 6y ago
I'll bite. I'm not a fan of CSS. I learned it well enough to build a decent UI toolkit (draggable modals, collapsible, etc.) I hate how CSS tries to mix layout and style. A million articles about not using tables for layout, and it took 20+ years to get a grid. I tried to do some fancy text and element alignment with CSS, and it was not having it (and, yes, I know about display: table). In the end I reverted to a table. It worked, and I moved on with life. It is ridiculously hard to draw things in absolute positions. In many cases, it is easier to do a tiny bit of math and compute the positions of objects, rather than have to define parent/child relationships. But for true absolute positioning, you have to throw divs into a "portal" of some sort, and move that object into the root element. This makes doing things like pretty drag and drop extremely painful. Browsers are buggy as hell, and often something works on everything but [insert your most hated browser]. That's a hint that the spec is too complicated. I agree with your assessment, in that if you try to construct the world from scratch, you'll be "fighting the beast the whole way." I disagree that this is positive quality of the thing.
- strenholme 6y ago
  >A million articles about not using tables for layout, and it took 20+ years to get a grid< To be fair, CSS 2.0 (from 1998) has “display: table” which allows table layout in pure CSS. [1] The problem was not CSS. The problem was Internet Explorer 6; “display: table” was not viable to use until the early 2010s when IE6 usage finally plunged. [1] Edit: CSS was designed for styled documents, such as online resumes or blogs. It was not designed to make interactive apps, which is why it doesn’t fit that paradigm well. Everyone thought Java applets would run the interactive web, and we would be making web applications in Java today if Microsoft had not killed Java on the web in the late 1990s with IE.
  - jheruty 6y ago
    In my experience, "display: table" is not really identical to the behavior of <table>. I gave up on it for my project, though unfortunately I don't remember the specifics. I think it's just a fundamental issue where CSS is trying to be both layout and style. Works great for basic document formatting, but once you try to do something complex, it all falls apart. Or, rather, it should fall apart, but we've spent the last couple decades duct taping it together. Every JavaScript framework ultimately hits a wall where it has to interact with CSS. It can't be abstracted away. I really do believe more money and effort should be spent looking for an alternative.
    - strenholme 6y ago
      The biggest thing missing in “display: table” is “colspan”, allowing a table cell to take up multiple columns of the table. That can be a big deal with some layouts. One workaround is to use “position: absolute” inside a CSS table cell to have an element which can span more than one table column.
      - nness 6y ago
        Why not use a <table>?
randomsearch 6y ago
This isn't fully formed in my mind yet so go easy: Intuition is linked to elegance, an elegantly designed language is intuitive. An elegant language is one that starts with a few core principles and from that derives the rest of the language. Lisp is an example of a programming language that does this beautifully well. Usually (always?) such core principles themselves are taken from mathematics. After all, maths is heavily engaged in the business of elegance. CSS doesn't feel like it's built in this way. When you read a tutorial it doesn't begin with: "these are the fundamental concepts of CSS", rather it feels more like a hodgepodge of lots of different ideas and when they intersect you end up with confusion. Part of that is for sure the nature of the evolution of CSS. But I don't see any "core" of CSS that you could extract that would be elegant and intuitive now. I think programmers develop this strong instinct for when things "make sense" in that they're intuitive and elegant. It's like taste. CSS leaves a bad taste. The best comparison I have for how it could be are the UI layouts of Java, Android, iOS. Java and Android aren't great tbh (don't have much experience with iOS) but at least you can see the design behind them. It feels like something should begin "there are these elements. each have a bounding box. to see how bounding boxes are calculating for text etc you can deep dive into docs. Anyway, these bounding boxes may also be enlarged (through padding etc.). Now, each box has three properties that define its interaction with other elements..." like a maths class and not "if X is inside Y then you can set Y to make X appear on the left if X has its margin set to Z" uggggg.
- strenholme 6y ago
  CSS was never meant to be used for applications. What happened was this: Once upon a time, there was only HTML. It could only make simple text pages. Then the internet revolution of the 1990s happened, and everyone wanted to put make their webpage look like a glossy pamphlet. So along came extra HTML tags, and the widespread abuse of <TABLE> and other tags added to HTML to make web pages look like glossy pamphlets. At the same time, CSS was developed so the HTML could stay clean and maintainble, and the layout of the “glossy pamphlet” look was in a separate file. HTML + CSS wasn’t designed to make an interactive app. It was designed to make a magazine article or an online resume. One would use Java (1990s) or Flash (first 2000s decade) for anything interactive. It was in the 2010s, long after Java applets stopped being widely supported, and when Flash was too proprietary and too insecure, that the ability to make a fully interactive app was tacked on to Javascript; this was not the original intent of Javascript nor of CSS. So, there is no real underlying design. It was something hacked on to a standard designed to share text documents. If Steve Jobs were alive today, I think Apple or someone else would create a new interactive standard without all of the baggage of HTML + CSS + Javascript. It’s like the problem we have had for years, where a modern x86_64 chip is a 64-bit extension of a 32-bit extension of an originally 16-bit chip; it’s only now with the M1 that we are finally using a more elegant and well-designed chip architecture for desktop computers.
earwaxauditor 6y ago
Them: CSS is unintuitive. You: Learning CSS is like taming a wild horse. I think you are in agreement.
- brundolf 6y ago
  Okay, to balance out the analogies let's say regular programming is like building a skyscraper brick by brick ;) The idea is that to some people, having total control and building something up piece by piece comes totally naturally, while understanding and then selectively guiding a thing that has a will of its own does not, even if in some since it's more "elegant"
resu_nimda 6y ago
Agreed. CSS is a more of an artistic design task than a programming one. You have to have the mindset of a sculptor, meticulously chipping away, fiddling with tiny bits as the figure gradually takes shape. Now that I think about it, I feel like this is what CSS Zen Garden was all about. You have to embrace the fact that you’re gonna sit there tweaking margins and experimenting with various incantations.
FriedrichN 6y ago
I have a feeling people like to hate on CSS because making GUIs is hard and tedious work in general and introducing bugs is way easier than fixing them. And since many applications nowadays run in your browser, people end up having to use CSS, thus getting blamed for the general pain it is to make a good GUI. I have used native GUI kits like Tk and Qt and found myself fiddling just about as much as I would with CSS. YMMV of course.
- dmitriid 6y ago
  YMMV but, almost every single GUI framework outside the web has: - virtual lists - customizable controls (including selects) - easy solutions for layouts of any complexity (CSS got flexbox in 2015, Qt had it in early 2000s) - a plethora of complex components out of the box (and most complex controls are rather trivial to implement yourself): date pickers, modals and dialog boxes, tree views, splitters, you name it. Yes, building GUIs is hard. But building GUIs on the web is approaching impossible. There's a reason why most GUI frameworks on the web only manage to implement the same paltry set of components: buttons, badges, inputs. Very rarely there's a date picker and a table. And... that's about it.
jjice 6y ago
Having worked with a variety of GUI frameworks on small projects for work (WPF, Windows Forms, Xamrin, Android, iOS), I think HTML and CSS are the best out there for easy of use. It definitely helps that it has so much history and documentation behind it, but if I could build my GUIs in standard HTML and CSS without being forced into Electron or something else and still have my choice for a backend language, I'd find building GUIs way more fun.
kstenerud 6y ago
The problem is that most CSS properties are contextual. They'll work one way in a certain hierarchy, and a different way in another. I've had issues where items would suddenly appear in REVERSED order if I changed the width of the container object (which would be fine if there were a CSS property "component-alignment: reversed", but there isn't). There are no enforced types. You can assign any value to any property name, even though invalid names will do nothing (and so typos cause hours of lost time). Some properties won't do anything unless they're done in conjunction with other properties, but you have no way of knowing that because there's no debug feedback mechanism. Even worse: some properties do nothing unless the SURROUNDING object has certain properties set to certain values. That's INSANE. There's very little logic, but much lore and arcane incantations to CSS, which is what makes it a bad system (much like the crotchety systems in the bad old UNIX engineer days of "if it was hard to write, it should be hard to understand"). I've worked with a number of UI systems, and the best ones are ALWAYS component based, where component properties ALWAYS behave the same way internally, and where you can COMBINE them into more powerful components. This is not what happens with CSS. Basic things like alignment, size, borders, padding, margins all behave in weird ways depending on the context, or the presence or absence of text, or rely on similar sounding but subtly different properties that only work in certain contexts and not others, with no debug information to tell you why it's not affecting anything. That's not cool. If someone were to invent a programming language that behaved this way today, they'd be laughed out of the room.
- eurasiantiger 6y ago
  What you’re saying is ”I don’t understand what ’cascading’ means in CSS”

ianbooker 6y ago

CSS has a fundamentally different cognitive kalkül. You can do things fast, but if you do not have a deeper understanding, it can get pretty frustrating. At least historically. It is like asking a Python programmer to write Prolog. Anyone can write Prolog, but only if you are willing to learn. The difference is: Prolog is an optional choice for most, CSS is a must for certain applications..

jheruty 6y ago

I'll bite. I'm not a fan of CSS. I learned it well enough to build a decent UI toolkit (draggable modals, collapsible, etc.) I hate how CSS tries to mix layout and style. A million articles about not using tables for layout, and it took 20+ years to get a grid. I tried to do some fancy text and element alignment with CSS, and it was not having it (and, yes, I know about display: table). In the end I reverted to a table. It worked, and I moved on with life. It is ridiculously hard to draw things in absolute positions. In many cases, it is easier to do a tiny bit of math and compute the positions of objects, rather than have to define parent/child relationships. But for true absolute positioning, you have to throw divs into a "portal" of some sort, and move that object into the root element. This makes doing things like pretty drag and drop extremely painful. Browsers are buggy as hell, and often something works on everything but [insert your most hated browser]. That's a hint that the spec is too complicated. I agree with your assessment, in that if you try to construct the world from scratch, you'll be "fighting the beast the whole way." I disagree that this is positive quality of the thing.

strenholme 6y ago
>A million articles about not using tables for layout, and it took 20+ years to get a grid< To be fair, CSS 2.0 (from 1998) has “display: table” which allows table layout in pure CSS. [1] The problem was not CSS. The problem was Internet Explorer 6; “display: table” was not viable to use until the early 2010s when IE6 usage finally plunged. [1] Edit: CSS was designed for styled documents, such as online resumes or blogs. It was not designed to make interactive apps, which is why it doesn’t fit that paradigm well. Everyone thought Java applets would run the interactive web, and we would be making web applications in Java today if Microsoft had not killed Java on the web in the late 1990s with IE.
- jheruty 6y ago
  In my experience, "display: table" is not really identical to the behavior of <table>. I gave up on it for my project, though unfortunately I don't remember the specifics. I think it's just a fundamental issue where CSS is trying to be both layout and style. Works great for basic document formatting, but once you try to do something complex, it all falls apart. Or, rather, it should fall apart, but we've spent the last couple decades duct taping it together. Every JavaScript framework ultimately hits a wall where it has to interact with CSS. It can't be abstracted away. I really do believe more money and effort should be spent looking for an alternative.
  - strenholme 6y ago
    The biggest thing missing in “display: table” is “colspan”, allowing a table cell to take up multiple columns of the table. That can be a big deal with some layouts. One workaround is to use “position: absolute” inside a CSS table cell to have an element which can span more than one table column.
    - nness 6y ago
      Why not use a <table>?

randomsearch 6y ago

This isn't fully formed in my mind yet so go easy: Intuition is linked to elegance, an elegantly designed language is intuitive. An elegant language is one that starts with a few core principles and from that derives the rest of the language. Lisp is an example of a programming language that does this beautifully well. Usually (always?) such core principles themselves are taken from mathematics. After all, maths is heavily engaged in the business of elegance. CSS doesn't feel like it's built in this way. When you read a tutorial it doesn't begin with: "these are the fundamental concepts of CSS", rather it feels more like a hodgepodge of lots of different ideas and when they intersect you end up with confusion. Part of that is for sure the nature of the evolution of CSS. But I don't see any "core" of CSS that you could extract that would be elegant and intuitive now. I think programmers develop this strong instinct for when things "make sense" in that they're intuitive and elegant. It's like taste. CSS leaves a bad taste. The best comparison I have for how it could be are the UI layouts of Java, Android, iOS. Java and Android aren't great tbh (don't have much experience with iOS) but at least you can see the design behind them. It feels like something should begin "there are these elements. each have a bounding box. to see how bounding boxes are calculating for text etc you can deep dive into docs. Anyway, these bounding boxes may also be enlarged (through padding etc.). Now, each box has three properties that define its interaction with other elements..." like a maths class and not "if X is inside Y then you can set Y to make X appear on the left if X has its margin set to Z" uggggg.

strenholme 6y ago
CSS was never meant to be used for applications. What happened was this: Once upon a time, there was only HTML. It could only make simple text pages. Then the internet revolution of the 1990s happened, and everyone wanted to put make their webpage look like a glossy pamphlet. So along came extra HTML tags, and the widespread abuse of <TABLE> and other tags added to HTML to make web pages look like glossy pamphlets. At the same time, CSS was developed so the HTML could stay clean and maintainble, and the layout of the “glossy pamphlet” look was in a separate file. HTML + CSS wasn’t designed to make an interactive app. It was designed to make a magazine article or an online resume. One would use Java (1990s) or Flash (first 2000s decade) for anything interactive. It was in the 2010s, long after Java applets stopped being widely supported, and when Flash was too proprietary and too insecure, that the ability to make a fully interactive app was tacked on to Javascript; this was not the original intent of Javascript nor of CSS. So, there is no real underlying design. It was something hacked on to a standard designed to share text documents. If Steve Jobs were alive today, I think Apple or someone else would create a new interactive standard without all of the baggage of HTML + CSS + Javascript. It’s like the problem we have had for years, where a modern x86_64 chip is a 64-bit extension of a 32-bit extension of an originally 16-bit chip; it’s only now with the M1 that we are finally using a more elegant and well-designed chip architecture for desktop computers.

earwaxauditor 6y ago

Them: CSS is unintuitive. You: Learning CSS is like taming a wild horse. I think you are in agreement.

brundolf 6y ago
Okay, to balance out the analogies let's say regular programming is like building a skyscraper brick by brick ;) The idea is that to some people, having total control and building something up piece by piece comes totally naturally, while understanding and then selectively guiding a thing that has a will of its own does not, even if in some since it's more "elegant"

resu_nimda 6y ago

Agreed. CSS is a more of an artistic design task than a programming one. You have to have the mindset of a sculptor, meticulously chipping away, fiddling with tiny bits as the figure gradually takes shape. Now that I think about it, I feel like this is what CSS Zen Garden was all about. You have to embrace the fact that you’re gonna sit there tweaking margins and experimenting with various incantations.

FriedrichN 6y ago

I have a feeling people like to hate on CSS because making GUIs is hard and tedious work in general and introducing bugs is way easier than fixing them. And since many applications nowadays run in your browser, people end up having to use CSS, thus getting blamed for the general pain it is to make a good GUI. I have used native GUI kits like Tk and Qt and found myself fiddling just about as much as I would with CSS. YMMV of course.

dmitriid 6y ago
YMMV but, almost every single GUI framework outside the web has: - virtual lists - customizable controls (including selects) - easy solutions for layouts of any complexity (CSS got flexbox in 2015, Qt had it in early 2000s) - a plethora of complex components out of the box (and most complex controls are rather trivial to implement yourself): date pickers, modals and dialog boxes, tree views, splitters, you name it. Yes, building GUIs is hard. But building GUIs on the web is approaching impossible. There's a reason why most GUI frameworks on the web only manage to implement the same paltry set of components: buttons, badges, inputs. Very rarely there's a date picker and a table. And... that's about it.

jjice 6y ago

Having worked with a variety of GUI frameworks on small projects for work (WPF, Windows Forms, Xamrin, Android, iOS), I think HTML and CSS are the best out there for easy of use. It definitely helps that it has so much history and documentation behind it, but if I could build my GUIs in standard HTML and CSS without being forced into Electron or something else and still have my choice for a backend language, I'd find building GUIs way more fun.

kstenerud 6y ago

The problem is that most CSS properties are contextual. They'll work one way in a certain hierarchy, and a different way in another. I've had issues where items would suddenly appear in REVERSED order if I changed the width of the container object (which would be fine if there were a CSS property "component-alignment: reversed", but there isn't). There are no enforced types. You can assign any value to any property name, even though invalid names will do nothing (and so typos cause hours of lost time). Some properties won't do anything unless they're done in conjunction with other properties, but you have no way of knowing that because there's no debug feedback mechanism. Even worse: some properties do nothing unless the SURROUNDING object has certain properties set to certain values. That's INSANE. There's very little logic, but much lore and arcane incantations to CSS, which is what makes it a bad system (much like the crotchety systems in the bad old UNIX engineer days of "if it was hard to write, it should be hard to understand"). I've worked with a number of UI systems, and the best ones are ALWAYS component based, where component properties ALWAYS behave the same way internally, and where you can COMBINE them into more powerful components. This is not what happens with CSS. Basic things like alignment, size, borders, padding, margins all behave in weird ways depending on the context, or the presence or absence of text, or rely on similar sounding but subtly different properties that only work in certain contexts and not others, with no debug information to tell you why it's not affecting anything. That's not cool. If someone were to invent a programming language that behaved this way today, they'd be laughed out of the room.

eurasiantiger 6y ago
What you’re saying is ”I don’t understand what ’cascading’ means in CSS”