Context:
We're having a ton of super heated debates around the office. I'm just a neutral observer, as this is my first month at my current employer. Previously I haven't ventured outside of the Bootstrap waters... but it has got me thinking. Is doing this weird/bad/a code smell/etc...
Currently we seem to have a lot of these "global" helpers:
.padding-all-5-30 {
padding: 5px 30px;
}
.padded--medium-top {
padding-top: var(--spacer-medium);
}
From what I understand, these predominantly are classes that cater for padding
, margin
, with all variants of the css property catered for in the following increments:
5, 10, 15, 20, 25, 30, 35, 40, 45 and 50
Some additional context:
At one stage a long long time ago, this was the only sizing utilities we had access to (not sure of the use-case):
huge: 40px;
large: 20px;
medium: 10px;
small: 5px;
Coming from a .NET OOP background my inclination is to say utility classes like those (even more so global-specific ones, padding-50-5
, margin-1-15
) are inherently a bad risky idea. As when consuming them in a new page for example, my usage of that utility class will be based on the context of that pages code. EG:
<!-- inline added for illustration only -->
<div style="padding: 30px" class="some-custom-page-specific-class">
<div class="my-global-30-5-padding-util-class"></div>
</div>
Now if for whatever reason I want to increase the padding of my global parent class my-global-30-5-padding-util-class
, I'm unable to do so, as it'll not work in the context. (I might as well have created a custom class to serve this purpose)
This leaves a dev with 2 options:
- Leave the global class as is, rendering the usefulness null, or
- The dev goes though all code, and updates all pages / components thus negating the "benefit" that was intended by shifting the code to a higher level.
My logic keeps pointing me to "component based" css each time vs. using these helpers.
Question:
- Does this serve ANY benefit? (That I'm missing)
- Why not just add the padding to the page specific css file, and scope it so that it does not affect other pages?
- Why even introduce this dependency? (Would there ever be a need to randomly pad / margin each element on the page)