4 ms·

How can you achieve reuse (DRY) with this? Every time I have a button, if I want my buttons to be consistent and have a single place to change them, I have to l

How can you achieve reuse (DRY) with this? Every time I have a button, if I want my buttons to be consistent and have a single place to change them, I have to like invoke a button partial that just outputs my <a> with 20 classes on it? It's a lot easier to reuse a CSS class (an abstraction) than a template of a chunk of HTML (an indirection) -- especially across divides of languages/runtimes/client-vs-server if you have any of those.

simplify 8y ago
With Tailwind you use @apply to achieve this goal: https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components
nepeckman 8y ago
I think the article provided good insight on this: "I wonder if the reason this approach makes more sense now is that we’re doing more generation of HTML than we were in 2003. In my tiny example, this approach to CSS actually doesn’t introduce that much duplication into my site, because all of the HTML is generated by Hugo templates, so most styles only end up being specified once anyway." So you write your button one time in a reusable button component, then reference the component and avoid writing the same 20 styles again. I think this has benefits as it keeps all the information for a single component in the same location, making it easy to understand and edit the component from a single location.
akerl_ 8y ago
I agree with the point you're making, but it doesn't seem to address my question. The author describes the usage pattern that I find myself in, and I suspect is relatively common among non-frontend devs: we aren't particularly skilled in CSS or other frontend web dev work, but every now and then we find ourselves wanting to make a quick, simple, but usable site as a landing page for some other project we're releasing. For people in that niche, frequent tweaks/changes to the styling seem unlikely: I'm going to make the site once and unless it breaks I'm unlikely to come back to the code for it. The parent comment I replied to makes the direct claim that this class-based pattern will bite me, and I'm curious if somebody can help me figure out how that would happen.

simplify 8y ago

With Tailwind you use @apply to achieve this goal: https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components

nepeckman 8y ago

I think the article provided good insight on this: "I wonder if the reason this approach makes more sense now is that we’re doing more generation of HTML than we were in 2003. In my tiny example, this approach to CSS actually doesn’t introduce that much duplication into my site, because all of the HTML is generated by Hugo templates, so most styles only end up being specified once anyway." So you write your button one time in a reusable button component, then reference the component and avoid writing the same 20 styles again. I think this has benefits as it keeps all the information for a single component in the same location, making it easy to understand and edit the component from a single location.

akerl_ 8y ago

I agree with the point you're making, but it doesn't seem to address my question. The author describes the usage pattern that I find myself in, and I suspect is relatively common among non-frontend devs: we aren't particularly skilled in CSS or other frontend web dev work, but every now and then we find ourselves wanting to make a quick, simple, but usable site as a landing page for some other project we're releasing. For people in that niche, frequent tweaks/changes to the styling seem unlikely: I'm going to make the site once and unless it breaks I'm unlikely to come back to the code for it. The parent comment I replied to makes the direct claim that this class-based pattern will bite me, and I'm curious if somebody can help me figure out how that would happen.