Why create CSS classes named to match one specific style? (non-semantic class names)

Question

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?

Answer 1

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.

Answer 2

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.”