4 ms·

Fast forward a few years and > <H1><FONT COLOR=red>...</FONT></H1> …every single goddamn time. is in fashion again! Only now it’s called class="text-red-500"

Fast forward a few years and > <H1><FONT COLOR=red>...</FONT></H1> …every single goddamn time. is in fashion again! Only now it’s called class="text-red-500" :o)

mdhb 3y ago
I do continue to find it weird how CSS is just relegated to this second class citizen when it comes to web development and huge numbers of folks seemingly have little to no interest in learning it beyond what they can copy and paste. That wouldn’t fly in any other language.
- mtsr 3y ago
  For me a big part is that global CSS doesn’t match component based web applications as well. Coordinating global class names becomes a pain quickly. Then you move to scoped CSS and suddenly CSS doesn’t add much anymore.
  - naasking 3y ago
    > Coordinating global class names becomes a pain quickly. In other words, CSS class names are the new global variables. I like that framing. Everything old is indeed new again.
  - bryanrasmussen 3y ago
    >Coordinating global class names becomes a pain quickly. However scoped css variables does add quite a lot. So I'm thinking that can't be the scoping you were thinking of?
  - ttfkam 3y ago
    Better not to think of it as global variables and more like annotations for cross-cutting concerns. That said, don't blame CSS just because React treated it like a second class citizen. Try Svelte. Matches the components there perfectly. It really is amazing to use a web framework that doesn't hate the platform it's written for.
- LudwigNagasena 3y ago
  You wouldn’t need 3 languages to build UI in any other language.
  - mtsr 3y ago
    At least two is not uncommon with large UI frameworks having a UI definition DSL.
    - p4bl0 3y ago
      That is themed using… CSS.
      - bena 3y ago
        Most other front end technologies I’ve used are themed with themselves
        basil-rash 3y ago
        Qt uses what is almost exactly CSS: https://stackabuse.com/styling-pyqt6-applications-default-and-custom-qss-stylesheets/ https://stackabuse.com/styling-pyqt6-applications-default-an...
  - p9fus 3y ago
    Often when non-web based UI frameworks leave out CSS they don't elegantly fold it into their UI markup and/or language, they just don't have the features CSS has to begin with, or force you to declare it in the programming language which imo often looks ugly (especially if they try and make some kind of declarative DSL in an imperative programming language).
- Klonoar 3y ago
  As more web development (in JavaScript) moves away from anything resembling inheritance, the cascade in CSS starts to feel annoyingly out of place. It’s perhaps subtle but a noteworthy distinction in my mind. I struggled with letting go of old school CSS for this reason. I’ve written it for literal decades at this point and know it like the back of my hand, and it increasingly just feels like the odd man out in the front end stack.
  - azangru 3y ago
    > As more web development (in JavaScript) moves away from anything resembling inheritance, the cascade in CSS starts to feel annoyingly out of place. I am puzzled by this statement. The cascade is the algorithm for resolving conflicts when multiple rules apply to the same HTML element (based on css rule position, specificity, origin, and importance). Inheritance in CSS is a different topic, where a subset of properties defined on the parent are automatically applied to the children. Without inheritance, you would have to redefine the same properties on each of the children (e.g. the body font-size, or font-family, or color would have to be repeated on each of the children elements). Without cascade, the browser wouldn't know how to resolve conflicting rules. How is any of this out of place?
    - moritzwarhier 3y ago
      Yes, both the cascade and (CSS) inheritance are valuable and necessary. Not the commenter you responded to, but I'm guessing they meant "inheritance" as a programming practise, not the CSS-specific meaning. Inheritance of CSS rules down the DOM tree is indeed essential for CSS to work, even if you are using some sort of scoping. Scoping is about limiting the DOM subtree that a CSS rule applies to, so sure it is related to CSS rule inheritance. But even if you use tailwind, (Vue) scoped styles or styled components, you still need CSS inheritance. Nobody aims to apply CSS per-element only, although large parts of it are exactly that. In other words, Tailwind authors stil expect "text-red-500" to be inherited down to child elements. so much for inheritance, regarding the cascade: Point of maintable CSS is to keep the cascade flat and avoid multiple levels of overrides or very specific selectors.
TiredOfLife 3y ago
You are looking at the compiled output.
- 3D30497420 3y ago
  Guessing the parent comment is referring to Tailwind (and similar "utility-first" CSS frameworks).
  - TiredOfLife 3y ago
    Are people really writing tailwind by hand and not as part of a templating engine?
    - Akronymus 3y ago
      Yes, very much so.
desdenova 3y ago
Except this is probably in a component that will be reused, so the repetition problem doesn't exist there.
mattkenefick 3y ago
> in fashion again! But it shouldn't be :(
flappyeagle 3y ago
Why is this bad?
- azangru 3y ago
  Why was this bad in the old CSS?

Fast forward a few years and > <H1><FONT COLOR=red>...</FONT></H1> …every single goddamn time. is in fashion again! Only now it’s called class="text-red-500" :o)

mdhb 3y ago

I do continue to find it weird how CSS is just relegated to this second class citizen when it comes to web development and huge numbers of folks seemingly have little to no interest in learning it beyond what they can copy and paste. That wouldn’t fly in any other language.

mtsr 3y ago
For me a big part is that global CSS doesn’t match component based web applications as well. Coordinating global class names becomes a pain quickly. Then you move to scoped CSS and suddenly CSS doesn’t add much anymore.
- naasking 3y ago
  > Coordinating global class names becomes a pain quickly. In other words, CSS class names are the new global variables. I like that framing. Everything old is indeed new again.
- bryanrasmussen 3y ago
  >Coordinating global class names becomes a pain quickly. However scoped css variables does add quite a lot. So I'm thinking that can't be the scoping you were thinking of?
- ttfkam 3y ago
  Better not to think of it as global variables and more like annotations for cross-cutting concerns. That said, don't blame CSS just because React treated it like a second class citizen. Try Svelte. Matches the components there perfectly. It really is amazing to use a web framework that doesn't hate the platform it's written for.
LudwigNagasena 3y ago
You wouldn’t need 3 languages to build UI in any other language.
- mtsr 3y ago
  At least two is not uncommon with large UI frameworks having a UI definition DSL.
  - p4bl0 3y ago
    That is themed using… CSS.
    - bena 3y ago
      Most other front end technologies I’ve used are themed with themselves
      - basil-rash 3y ago
        Qt uses what is almost exactly CSS: https://stackabuse.com/styling-pyqt6-applications-default-and-custom-qss-stylesheets/ https://stackabuse.com/styling-pyqt6-applications-default-an...
- p9fus 3y ago
  Often when non-web based UI frameworks leave out CSS they don't elegantly fold it into their UI markup and/or language, they just don't have the features CSS has to begin with, or force you to declare it in the programming language which imo often looks ugly (especially if they try and make some kind of declarative DSL in an imperative programming language).
Klonoar 3y ago
As more web development (in JavaScript) moves away from anything resembling inheritance, the cascade in CSS starts to feel annoyingly out of place. It’s perhaps subtle but a noteworthy distinction in my mind. I struggled with letting go of old school CSS for this reason. I’ve written it for literal decades at this point and know it like the back of my hand, and it increasingly just feels like the odd man out in the front end stack.
- azangru 3y ago
  > As more web development (in JavaScript) moves away from anything resembling inheritance, the cascade in CSS starts to feel annoyingly out of place. I am puzzled by this statement. The cascade is the algorithm for resolving conflicts when multiple rules apply to the same HTML element (based on css rule position, specificity, origin, and importance). Inheritance in CSS is a different topic, where a subset of properties defined on the parent are automatically applied to the children. Without inheritance, you would have to redefine the same properties on each of the children (e.g. the body font-size, or font-family, or color would have to be repeated on each of the children elements). Without cascade, the browser wouldn't know how to resolve conflicting rules. How is any of this out of place?
  - moritzwarhier 3y ago
    Yes, both the cascade and (CSS) inheritance are valuable and necessary. Not the commenter you responded to, but I'm guessing they meant "inheritance" as a programming practise, not the CSS-specific meaning. Inheritance of CSS rules down the DOM tree is indeed essential for CSS to work, even if you are using some sort of scoping. Scoping is about limiting the DOM subtree that a CSS rule applies to, so sure it is related to CSS rule inheritance. But even if you use tailwind, (Vue) scoped styles or styled components, you still need CSS inheritance. Nobody aims to apply CSS per-element only, although large parts of it are exactly that. In other words, Tailwind authors stil expect "text-red-500" to be inherited down to child elements. so much for inheritance, regarding the cascade: Point of maintable CSS is to keep the cascade flat and avoid multiple levels of overrides or very specific selectors.

TiredOfLife 3y ago

You are looking at the compiled output.

3D30497420 3y ago
Guessing the parent comment is referring to Tailwind (and similar "utility-first" CSS frameworks).
- TiredOfLife 3y ago
  Are people really writing tailwind by hand and not as part of a templating engine?
  - Akronymus 3y ago
    Yes, very much so.

desdenova 3y ago

Except this is probably in a component that will be reused, so the repetition problem doesn't exist there.

mattkenefick 3y ago

> in fashion again! But it shouldn't be :(

flappyeagle 3y ago

Why is this bad?

azangru 3y ago
Why was this bad in the old CSS?