4 ms·

Now imagine that you want to change the border color to yellow. Would you rather change a single line of CSS, or every single link on all your pages?

by xigoi 3y ago

pookah 3y ago
[dead]
nannal 3y ago
ctrl+h Suppose we want to change just one link? Would it be better to make a new class with all the same attributes except the color and apply that to the specific link.
- xigoi 3y ago
  > ctrl+h Brittle. > Suppose we want to change just one link? Would it be better to make a new class with all the same attributes except the color and apply that to the specific link. Why copy the attributes? Just override the one you want to change. You can even use style="…" if you're sure that it's just one link.
squarewhite 3y ago
In tailwind you'd probably use a named color such as `primary` or `border-primary` or something like that, so you still have the ability to change it in one place. I don't really like tailwind myself, but I don't think that's an issue
- cxr 3y ago
  1. Given the example actually provided here, do you see an opportunity to do that? 2. Suppose you change the example to use named colors. Where does this name-to-color-value mapping live? **** > I've noticed that moving the goalposts is extremely prevalent on HN, which makes for pretty frustrating conversations (or just reading). And then sometimes it's a tag team. E.g.: > Person A writes their comment. Person B1 offers a rebuttal. Personal A offers their response. Person B2 offers a second rebuttal that abandons the premise behind B1's rebuttal, and may actually be at odds with it. Person A ends up either deflated or looking defeated. > It's like the cross product of a Gish gallop and a DDoS. <https://news.ycombinator.com/item?id=23117242 https://news.ycombinator.com/item?id=23117242>
gmerc 3y ago
You use border-primary or border-myCustomThing
seedboot 3y ago
Hopefully your link will be a component, so you only need replace one line anyway. Then again if your styles are abstracted to a component, your CSS framework is irrelevant!
- xigoi 3y ago
  Why would you use a component for something that's already a built-in HTML element?
  - peferron 3y ago
    Why would you style an anchor element when your browser already has default styles for it?
    - xigoi 3y ago
      Because you want it to look different, such as the color being consistent with the rest of your website?
  - bryanrasmussen 3y ago
    I don't know, but a consulting company saddled us with a monstrosity that does exactly this. Maybe it's some sort of lock-in feature.
  - seedboot 3y ago
    One example is if I was using react it would be used to encapsulate a react-router Link and an anchor tag in a component, and use props to differentiate between inbound and outbound links.
meerita 3y ago
If you work with components, you don't have this problem. If you don't work with components, good ol' search and replace and it's done.
- scabby 3y ago
  If you work with components then why not just use CSS?
  - red_admiral 3y ago
    In React at least, often you can live with One Component = One File at least for simple components. Adding separate CSS files, as the OP says, causes context-switching. This is not true in svelte, where a component file can have both a root tag for the component, and a <style> tag that the framework/compiler automatically scopes to this component (and a <script> tag for the code, since you don't have the JSX inversion-of-control principle).
  - meerita 3y ago
    You can utilize the Functional CSS approach to eliminate the redundancy of architecture and behavior across various instances (JSX and CSS). Furthermore, it offers superior performance when compared to OOCSS.
winstonewert 3y ago
Tailwind done correctly would have you use another system like react/templates so that you still only have to modify one place. In practice however I see a lot of copy paste in tailwind html so it doesn't work quite as well in reality.
deleted 3y ago
[deleted]
sunwukung 3y ago
As stated elsewhere, if you're using a component based UI, this isn't a problem. You're also free to mix regular CSS with Tailwind. As for the "git gud" school of CSS, should we also abandon React, Svelte and the like and revert to hand-cranking DOM manipulation like it's 1999...? Sure, if you're manually editing a large volume of .html by hand, Tailwind is bad news, but given the plethora of static site builders out there (brief shout out to Astro which is excellent), manually authoring individual .html pages seems like masochism.
blowski 3y ago
Sounds like a boring Friday afternoon job, or something I could give to a junior contractor. It's also something that doesn't happen very often on the kinds of projects I'm working on.

Now imagine that you want to change the border color to yellow. Would you rather change a single line of CSS, or every single link on all your pages?

by xigoi 3y ago

Now imagine that you want to change the border color to yellow. Would you rather change a single line of CSS, or every single link on all your pages?

pookah 3y ago

[dead]

nannal 3y ago

ctrl+h Suppose we want to change just one link? Would it be better to make a new class with all the same attributes except the color and apply that to the specific link.

xigoi 3y ago
> ctrl+h Brittle. > Suppose we want to change just one link? Would it be better to make a new class with all the same attributes except the color and apply that to the specific link. Why copy the attributes? Just override the one you want to change. You can even use style="…" if you're sure that it's just one link.

squarewhite 3y ago

In tailwind you'd probably use a named color such as `primary` or `border-primary` or something like that, so you still have the ability to change it in one place. I don't really like tailwind myself, but I don't think that's an issue

cxr 3y ago
1. Given the example actually provided here, do you see an opportunity to do that? 2. Suppose you change the example to use named colors. Where does this name-to-color-value mapping live? **** > I've noticed that moving the goalposts is extremely prevalent on HN, which makes for pretty frustrating conversations (or just reading). And then sometimes it's a tag team. E.g.: > Person A writes their comment. Person B1 offers a rebuttal. Personal A offers their response. Person B2 offers a second rebuttal that abandons the premise behind B1's rebuttal, and may actually be at odds with it. Person A ends up either deflated or looking defeated. > It's like the cross product of a Gish gallop and a DDoS. <https://news.ycombinator.com/item?id=23117242 https://news.ycombinator.com/item?id=23117242>

gmerc 3y ago

You use border-primary or border-myCustomThing

seedboot 3y ago

Hopefully your link will be a component, so you only need replace one line anyway. Then again if your styles are abstracted to a component, your CSS framework is irrelevant!

xigoi 3y ago
Why would you use a component for something that's already a built-in HTML element?
- peferron 3y ago
  Why would you style an anchor element when your browser already has default styles for it?
  - xigoi 3y ago
    Because you want it to look different, such as the color being consistent with the rest of your website?
- bryanrasmussen 3y ago
  I don't know, but a consulting company saddled us with a monstrosity that does exactly this. Maybe it's some sort of lock-in feature.
- seedboot 3y ago
  One example is if I was using react it would be used to encapsulate a react-router Link and an anchor tag in a component, and use props to differentiate between inbound and outbound links.

meerita 3y ago

If you work with components, you don't have this problem. If you don't work with components, good ol' search and replace and it's done.

scabby 3y ago
If you work with components then why not just use CSS?
- red_admiral 3y ago
  In React at least, often you can live with One Component = One File at least for simple components. Adding separate CSS files, as the OP says, causes context-switching. This is not true in svelte, where a component file can have both a root tag for the component, and a <style> tag that the framework/compiler automatically scopes to this component (and a <script> tag for the code, since you don't have the JSX inversion-of-control principle).
- meerita 3y ago
  You can utilize the Functional CSS approach to eliminate the redundancy of architecture and behavior across various instances (JSX and CSS). Furthermore, it offers superior performance when compared to OOCSS.

winstonewert 3y ago

Tailwind done correctly would have you use another system like react/templates so that you still only have to modify one place. In practice however I see a lot of copy paste in tailwind html so it doesn't work quite as well in reality.

deleted 3y ago

[deleted]

sunwukung 3y ago

As stated elsewhere, if you're using a component based UI, this isn't a problem. You're also free to mix regular CSS with Tailwind. As for the "git gud" school of CSS, should we also abandon React, Svelte and the like and revert to hand-cranking DOM manipulation like it's 1999...? Sure, if you're manually editing a large volume of .html by hand, Tailwind is bad news, but given the plethora of static site builders out there (brief shout out to Astro which is excellent), manually authoring individual .html pages seems like masochism.

blowski 3y ago

Sounds like a boring Friday afternoon job, or something I could give to a junior contractor. It's also something that doesn't happen very often on the kinds of projects I'm working on.