There are a number of CSS frameworks that have a one-to-one correspondence between many of the classes and a single style. For example, in basscss ".inline-block" is defined as "display: inline-block;".

What benefit is there for making a class that matches one specific style?

Usage of such classes could be replaced with an inline style and there would be no difference in terms of maintainability.

Isn't this inconsistent with the point of a "class" (i.e. classification, which is a "systematic arrangement in groups or categories")? Yes, you can make a group of all numbers that are the number 3... but that's rarely meaningful.

Just to be clear, not all of the classes in bootstrap and basscss are devoid of semantic meaning. For example, in basscss "rounded" describes a style (border-radius: 3px;) which could be changed globally to accomodate new designs (say, 4px).

Is this just to reduce typing (in the case of "mb0" for "margin-bottom: 0") or reduce file size at the expense of clarity?


I think you are right to point out that some CSS classes like .inline-block { display: inline; } are generally pointless. There are three reasons why such classes might still be used:

  • Cargo-culting of “best practices”. You're generally supposed to use classes in place of inline styles, so some people even use CSS classes where they do not bring any benefit. Of course, this is a bad reason.
  • Some content management systems might be able to deal with HTML classes, but not with inline styles.
  • A site's Content Security Policy (CSP) with style-src or default-src might disable inline styles. This is an extremely good reason.
| improve this answer | |
  • The CSP issue definitely seems like a compelling enough reason for newer frameworks like basscss. I would up-vote if I had enough rep. – James K Jun 30 '19 at 19:55

There is no particular reason. The libraries just grew like that, naturally.

Libraries such as Bootstrap were promising that there will be no custom styling any longer. Instead of spending hours writing CSS code (and days adjusting the CSS you wrote for Internet Explorer), you would simply include the library in your project, and add semantic classes where you need them. This have a bunch of benefits, such as the ability to add custom themes completely effortlessly.

This worked well for basic applications which were strictly based on those libraries, i.e. which had basic elements: buttons, carousels, popovers, pagination... whatever is already included in a library. For more complex applications, things became more complicated, so you ended up still writing CSS, and if you do that, you lose some of the benefits of the library.

Therefore, it was logical to add whatever style one could need in a form of a class. You need to be able to prevent scrolling? Bootstrap has a solution for that. As it has solutions for dozens of other similar scenarios, keeping its promise of “no more custom CSS.”

| improve this answer | |
  • Compatibility with IE seems like a compelling reason historically. Seems a bit overzealous for a library to have the objective of avoiding custom CSS even making a class doesn't add value, but I guess that's the project maintainer's prerogative. – James K Jun 30 '19 at 20:16

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.