5 ms·

There are dozens of them at http://www.csszengarden.com http://www.csszengarden.com. Enjoy!

by jachee 7y ago

tomnipotent 7y ago
I looked through a dozen examples, they all look like below: http://www.csszengarden.com/220/220.css http://www.csszengarden.com/220/220.css None of these satisfy the aforementioned qualities. None of them look better, IMO, then an equivalent SASS/SCSS version that likely make most of these even more readable.
- Blaiz0r 7y ago
  That is what a single, efficient, well organised CSS file looks like!
  - tomnipotent 7y ago
    A single, efficient, well organized SCSS/SASS file still looks much better.
    - jachee 7y ago
      And has to be "compiled" into an incomprehensible, bloated, inefficient mess of a new actual CSS file, before it can be used, rather than simply served by a web server.
meerita 7y ago
CSS Zen Garden was, in my opinion, one of the best experiments on web development to demonstrate the flexibility of development that existed in HTML and CSS, but not to demonstrate that you would never again need to touch up your HTML code whatever the project. In 2003 –when this project was born– the average weight of the CSS files was 6KB. Today (2019) we are at an average of ~500KB, so using the CSS Garden argument card is, in my opinion, wrong. First, because it never adapts to the reality of developments, second because the difference in code size required is higher when new development parameters are taken, based mostly on philosophies such as BEM or others. CSS Garden is an HTML doc, with just 54 CSS classes, against more than 2000 classes that can be found in other modern projects.
- shantly 7y ago
  > Today (2019) we are at an average of ~500KB This. Stuff like this is why the modern web feels so slow and eats absurd amounts of memory. Think how big that is in memory once it's turned into some data structure that can be queried & modified by Javascript, and re-calculated, and consulted again as screen size changes, and so on. And think how much memory has to be allocated to effect that transformation in the first place. And cycles burned actually doing it. Well, that and no-one cares about shipping massive media files with the initial page anymore (remember thumbnails? Anyone? No?) And, you know, just all of Javascript. But still. This is a problem. I think when your CSS passes short-story length you maybe need to re-evaluate what you're doing. Consider sitting down to write a short story, like a 5,000-10,000 word thing you could sell to a genre mag. It's not all that short. It's a fuckload of text, actually, if you are facing having to write it. That's a lot of CSS. So much any sane person would hate to have to sit down and read it beginning to end. Should be more than enough, even for complex layouts, even for fancy pages, even for responsive. 500K is almost half a Moby Dick, for comparison. There's no possible way your team even knows what most of it does.
  - meerita 7y ago
    That's the way it is. I have found examples with CSS that exceed 2MB. That makes it literally impossible to change the design, maintenance or understanding of the architecture itself. That's why functionally programming CSS eliminates all those problems. Almost 2020 and we have not yet evolved to this style of development.

There are dozens of them at http://www.csszengarden.com http://www.csszengarden.com. Enjoy!

by jachee 7y ago

There are dozens of them at http://www.csszengarden.com http://www.csszengarden.com. Enjoy!

I looked through a dozen examples, they all look like below: http://www.csszengarden.com/220/220.css http://www.csszengarden.com/220/220.css None of these satisfy the aforementioned qualities. None of them look better, IMO, then an equivalent SASS/SCSS version that likely make most of these even more readable.

Blaiz0r 7y ago
That is what a single, efficient, well organised CSS file looks like!
- tomnipotent 7y ago
  A single, efficient, well organized SCSS/SASS file still looks much better.
  - jachee 7y ago
    And has to be "compiled" into an incomprehensible, bloated, inefficient mess of a new actual CSS file, before it can be used, rather than simply served by a web server.

meerita 7y ago

CSS Zen Garden was, in my opinion, one of the best experiments on web development to demonstrate the flexibility of development that existed in HTML and CSS, but not to demonstrate that you would never again need to touch up your HTML code whatever the project. In 2003 –when this project was born– the average weight of the CSS files was 6KB. Today (2019) we are at an average of ~500KB, so using the CSS Garden argument card is, in my opinion, wrong. First, because it never adapts to the reality of developments, second because the difference in code size required is higher when new development parameters are taken, based mostly on philosophies such as BEM or others. CSS Garden is an HTML doc, with just 54 CSS classes, against more than 2000 classes that can be found in other modern projects.

shantly 7y ago
> Today (2019) we are at an average of ~500KB This. Stuff like this is why the modern web feels so slow and eats absurd amounts of memory. Think how big that is in memory once it's turned into some data structure that can be queried & modified by Javascript, and re-calculated, and consulted again as screen size changes, and so on. And think how much memory has to be allocated to effect that transformation in the first place. And cycles burned actually doing it. Well, that and no-one cares about shipping massive media files with the initial page anymore (remember thumbnails? Anyone? No?) And, you know, just all of Javascript. But still. This is a problem. I think when your CSS passes short-story length you maybe need to re-evaluate what you're doing. Consider sitting down to write a short story, like a 5,000-10,000 word thing you could sell to a genre mag. It's not all that short. It's a fuckload of text, actually, if you are facing having to write it. That's a lot of CSS. So much any sane person would hate to have to sit down and read it beginning to end. Should be more than enough, even for complex layouts, even for fancy pages, even for responsive. 500K is almost half a Moby Dick, for comparison. There's no possible way your team even knows what most of it does.
- meerita 7y ago
  That's the way it is. I have found examples with CSS that exceed 2MB. That makes it literally impossible to change the design, maintenance or understanding of the architecture itself. That's why functionally programming CSS eliminates all those problems. Almost 2020 and we have not yet evolved to this style of development.