4 ms·

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 tha

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.
- goto11 6y ago
  Yes and no. The "flex" display model was developed by Mozilla all the way back when they crated XUL for defining GUI's. So this part of the spec was specifically developed for GUI's rather than documents.
goto11 6y ago
This is more a failure of the tutorials than of CSS itself though. CSS has a pretty simple and elegant core. You just have to understand the problems it was designed to solve. - Readable documents at any screen dimensions or resolution (i.e. you should not need to scroll horizontally back and forth to read each line just because you have a smaller screen.) - Incremental rendering - the document could be rendered as the data arrives over the network. - The user should be able to increase the text size. The "normal flow" layout model is designed in such a way that these constraints are fulfilled by default. You can make a layout which only works on a screen of a particular size, or where the user have to scroll horizontally for every line, but you have to do it deliberately. I'd say the fundamentals of CSS is to understand the "normal flow" and the box model.
- randomsearch 6y ago
  > CSS has a pretty simple and elegant core. Where can I read about this - has someone written "CSS: the good parts", for example?
  - goto11 6y ago
    Dunno if this exists. Maybe I should write one? The CSS 2 spec was actually a good introduction to the fundamentals, but it is 20 years out of data now, and the new modular specs does not works well as a tutorial.
  - sanderdlm 6y ago
    I like this page: https://www.taniarascia.com/overview-of-css-concepts/ https://www.taniarascia.com/overview-of-css-concepts/
  - nicoburns 6y ago
    "box model" is the term to google.
- ivanche 6y ago
  I'm not convinced. Literally none of these 3 bullet points are problems with plain HTML since at least 1993 or so - it's responsive by default, incremental by default and user agents are free to zoom in or out at will by default.
chrisweekly 6y ago
I hear you and think you make great points. Thankfully, there IS a resource and approach to using CSS properly, embracing the nature of the browser environment and building up from profoundly well-researched and -articulated first principles. The approach is called "Axiomatic CSS", and the website is https://every-layout.dev https://every-layout.dev. Disclaimers: 1. No affiliation, just a grateful follower. 2. The site includes a mix of free and paid content. The free content includes the axioms you're seeking, and compelling examples of their use. The paid content includes a book and access to the full suite of composable layout primitives, and a component generator. Best $100 business expense of my 22+ year career in web development.
- randomsearch 6y ago
  This actually looks really great, thanks for sharing!

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.

goto11 6y ago
Yes and no. The "flex" display model was developed by Mozilla all the way back when they crated XUL for defining GUI's. So this part of the spec was specifically developed for GUI's rather than documents.

goto11 6y ago

This is more a failure of the tutorials than of CSS itself though. CSS has a pretty simple and elegant core. You just have to understand the problems it was designed to solve. - Readable documents at any screen dimensions or resolution (i.e. you should not need to scroll horizontally back and forth to read each line just because you have a smaller screen.) - Incremental rendering - the document could be rendered as the data arrives over the network. - The user should be able to increase the text size. The "normal flow" layout model is designed in such a way that these constraints are fulfilled by default. You can make a layout which only works on a screen of a particular size, or where the user have to scroll horizontally for every line, but you have to do it deliberately. I'd say the fundamentals of CSS is to understand the "normal flow" and the box model.

randomsearch 6y ago
> CSS has a pretty simple and elegant core. Where can I read about this - has someone written "CSS: the good parts", for example?
- goto11 6y ago
  Dunno if this exists. Maybe I should write one? The CSS 2 spec was actually a good introduction to the fundamentals, but it is 20 years out of data now, and the new modular specs does not works well as a tutorial.
- sanderdlm 6y ago
  I like this page: https://www.taniarascia.com/overview-of-css-concepts/ https://www.taniarascia.com/overview-of-css-concepts/
- nicoburns 6y ago
  "box model" is the term to google.
ivanche 6y ago
I'm not convinced. Literally none of these 3 bullet points are problems with plain HTML since at least 1993 or so - it's responsive by default, incremental by default and user agents are free to zoom in or out at will by default.

chrisweekly 6y ago

I hear you and think you make great points. Thankfully, there IS a resource and approach to using CSS properly, embracing the nature of the browser environment and building up from profoundly well-researched and -articulated first principles. The approach is called "Axiomatic CSS", and the website is https://every-layout.dev https://every-layout.dev. Disclaimers: 1. No affiliation, just a grateful follower. 2. The site includes a mix of free and paid content. The free content includes the axioms you're seeking, and compelling examples of their use. The paid content includes a book and access to the full suite of composable layout primitives, and a component generator. Best $100 business expense of my 22+ year career in web development.

randomsearch 6y ago
This actually looks really great, thanks for sharing!