Custom CSS Framework

Question

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)

Answer 1

The point of css is to separate style from content.

Therefore classes like 'padding50' or inline style="padding:50" are techincally an 'anti-pattern' as they work against this goal, coupling the style and content.

Using variables in css to define colours or sizes allows further decoupling. You can just change the HighlightColour in a single place rather than digging through all the css.

However, this idyllic dream never works out as customers inevitability want to change style based on content.

Rather than having several pages all following the same layout and design they will want each element of each page to be specifically placed.

This leads first to many generic classes, then numbered classes and finally inline styles as developers give in and 'just do what ever works'.

Keeping to the pure goal though does have real benefits. smaller, faster css and the ability to completely restyle a site with css changes alone.

http://www.csszengarden.com