4 ms·

On a related note, CSS is indeed harder than most think. That being said, I’ve been using CSS going on 20 years now and have seen a lot trends cone and go. One

On a related note, CSS is indeed harder than most think. That being said, I’ve been using CSS going on 20 years now and have seen a lot trends cone and go. One current trend is that there seems to be a lot of unnecessary complexity. SCSS, for example, is indeed powerful, but most sites and web apps I’ve worked on don’t need it and could basically have the entire component-based layout structure rewritten with a single, efficient, well-organized standard CSS file that doesn’t need to be built from 30-odd separate SCSS files. The same goes for so-called transpiled Javascript “languages” such as Coffeescript and Typescript. These, for the most part, add unnecessary layers of abstraction and complexity, making it far more difficult to debug. By using these abstractions, we developers are also doing ourselves a big disfavor because we are often not learning the underlying technology that the browser actually understands. Of course I get that there are domain-specific problems that these tools are trying to solve, but they are often inappropriately employed simply because they’re trendy. With some apps I’ve worked on, it’s anbalagous to using a farm tractor when all you really needed was a lawnmower.

tomnipotent 7y ago
> a single, efficient, well-organized standard CSS I still haven't seen a single, efficient, well-organized standard CSS file in 20 years, so I think I'll stick to the well-proven SCSS/SASS build pipelines that add considerably more upside than downside. If you're a paid professional, there's no excuse to be doing things the "old way" in 2019.
- jachee 7y ago
  There are dozens of them at http://www.csszengarden.com http://www.csszengarden.com. Enjoy!
  - 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.
cageface 7y ago
I was skeptical at first but after using it in real projects I’m a convert to the functional style of css espoused by libraries like tailwind. It’s not a silver bullet for css problems but it’s much better than the component based approach of other paradigms.
meerita 7y ago
I wrote two pieces regarding Functional CSS http://minid.net/2019/04/07/the-css-utilitarian-methodology/ http://minid.net/2019/04/07/the-css-utilitarian-methodology/ and more arguments on its defense http://minid.net/2019/08/12/in-defense-of-functional-css/ http://minid.net/2019/08/12/in-defense-of-functional-css/. You also have a framework on Sass for starting developing websites with this https://github.com/meerita/utilcss https://github.com/meerita/utilcss

tomnipotent 7y ago

> a single, efficient, well-organized standard CSS I still haven't seen a single, efficient, well-organized standard CSS file in 20 years, so I think I'll stick to the well-proven SCSS/SASS build pipelines that add considerably more upside than downside. If you're a paid professional, there's no excuse to be doing things the "old way" in 2019.

jachee 7y ago
There are dozens of them at http://www.csszengarden.com http://www.csszengarden.com. Enjoy!
- 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.

cageface 7y ago

I was skeptical at first but after using it in real projects I’m a convert to the functional style of css espoused by libraries like tailwind. It’s not a silver bullet for css problems but it’s much better than the component based approach of other paradigms.

meerita 7y ago

I wrote two pieces regarding Functional CSS http://minid.net/2019/04/07/the-css-utilitarian-methodology/ http://minid.net/2019/04/07/the-css-utilitarian-methodology/ and more arguments on its defense http://minid.net/2019/08/12/in-defense-of-functional-css/ http://minid.net/2019/08/12/in-defense-of-functional-css/. You also have a framework on Sass for starting developing websites with this https://github.com/meerita/utilcss https://github.com/meerita/utilcss