3 ms·

>When you want it to have a different (standard) margin, use a utility class on it. Then when the next PM wants this button to be blue, you make another utilit

>When you want it to have a different (standard) margin, use a utility class on it. Then when the next PM wants this button to be blue, you make another utility class and end up editing HTML. It's better to just think entirely in terms of components that are independent of any external framework or guideline, which are only responsible for themselves. Everything on your page is a concrete implementation of an abstract component, and in that implementation you can customize all you want. Otherwise you end up with a massive dependency graph between components of various "utility classes" rather than a completely flat hierarchy of components which handle their own dependencies.

wvenable 8y ago
> Then when the next PM wants this button to be blue, you make another utility class and end up editing HTML. So you're suggestion that when the PM wants this button to be blue, you make another component for that button? You haven't changed the problem, or the amount of work, you are just using a different layer to implement it.
- aphextron 8y ago
  > You haven't changed the problem, or the amount of work, you are just using a different layer to implement it. Changing the layer you're implementing on is the whole point. It's about maintainability and keeping things encapsulated. Now when someone comes back to look at this button a year later, they're not left wondering why this usage of "Button" is colored blue, and tracking down the utility class. They will know that it's an instance of "BlueButton" and can just edit the component directly.
  - wvenable 8y ago
    How is a component called BlueButton more informative than <button class="blue">? The information content is exactly the same. Now, more than likely the component isn't called BlueButton and the CSS class isn't called "blue" but rather both would have a name more semantically appropriate.

wvenable 8y ago

> Then when the next PM wants this button to be blue, you make another utility class and end up editing HTML. So you're suggestion that when the PM wants this button to be blue, you make another component for that button? You haven't changed the problem, or the amount of work, you are just using a different layer to implement it.

aphextron 8y ago
> You haven't changed the problem, or the amount of work, you are just using a different layer to implement it. Changing the layer you're implementing on is the whole point. It's about maintainability and keeping things encapsulated. Now when someone comes back to look at this button a year later, they're not left wondering why this usage of "Button" is colored blue, and tracking down the utility class. They will know that it's an instance of "BlueButton" and can just edit the component directly.
- wvenable 8y ago
  How is a component called BlueButton more informative than <button class="blue">? The information content is exactly the same. Now, more than likely the component isn't called BlueButton and the CSS class isn't called "blue" but rather both would have a name more semantically appropriate.