1

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)
  • im confused. what exactly is the argument about? using numbers in the class name? having too many/too few named values? – Ewan May 16 '17 at 11:28
  • From what I gather there are 2 views: It's about having too many (for lack of a better term) number classes, or having them at all. (I'm of the "3rd" opinion that utility classes for positioning of DOM elements are more of a hassle, BUT if we must have them that the numbered one are too granular) – Rohan Büchner May 16 '17 at 11:34
4

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

  • I like this. Makes sense, thank you. (Also, side-note) I have updated my question slightly to illustrate another conceptual issue/problem. (Underneath the code sample) – Rohan Büchner May 16 '17 at 11:59
  • That CSS Zen link 100% makes sense to me & looks maintainable while keeping flexibility – Rohan Büchner May 16 '17 at 12:01
  • 2
    "completely restyle a site with css changes alone" - Outside of designer sites like ZenGarden, I guess I have never seen this actually happen in the wild, outside of someone putting a cute Christmas theme on their blog perhaps. – Graham May 16 '17 at 19:45
  • @Graham we have products that get white-labeled, thus need to be re-branded via style sheet swap outs as well as internal app permissions. (I believe this is a "in the wild" use case) :P – Rohan Büchner May 17 '17 at 6:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.