Can CSS Classes Inherit Other Classes? Understanding Reuse in CSS

By the end of this page, you will understand why CSS classes do not directly inherit from other classes, what CSS inheritance actually means, and how to reuse styles correctly using multiple classes, grouped selectors, and common real-world CSS patterns.

In CSS, a class does not inherit from another class in the way classes do in object-oriented programming.

What CSS does have is:

• Inheritance of certain properties from parent elements to child elements in the HTML tree
• Cascade and specificity, which decide which rules apply
• The ability to assign multiple classes to the same element
• Grouped selectors to share declarations across selectors

So this is not valid CSS:

.composite {
  .something;
  .else;
}

CSS has no built-in syntax for "include this class inside another class." A class selector is just a way to target elements; it is not a reusable object that can be imported into another selector.

What CSS inheritance actually means

In CSS, inheritance usually refers to a child element receiving some property values from its parent element.

For example:

body {
  color: blue;
}

Text inside child elements often becomes blue because color is an inheritable property.

But properties like background and display do not normally inherit.

How to reuse styles instead

Think of a CSS class like a label on a toolbox, not a toolbox inside another toolbox.

• A class such as .something is a label that says, "Apply these rules to any element with this class."
• Another class such as .else is a different label.
• If you want both sets of tools, you put both labels on the same element.

Example:

<div class="something else">Hello</div>

That element gets styles from both classes.

So instead of one class inheriting another, CSS usually works by combining rules that match the same element.

A second helpful analogy:

• Inheritance in CSS = a child borrowing some values from its parent element
• Multiple classes = wearing multiple badges at once
• Cascade = deciding which badge wins if two badges give conflicting instructions

The most common solution is to give the element multiple classes.

<span class="something else">Text</span>

.something {
  display: inline;
}

.else {
  background: red;
}

This element will:

• use display: inline
• use background: red

Example: combine reusable utility classes

.inline {
  display: inline;
}

.bg-red {
  background: red;
}

<span class="inline bg-red">Warning</span>

Example: share declarations with grouped selectors

If two selectors should always share some styles, write them together:

Consider this example:

<span class="something else">Hello</span>

.something {
  display: inline;
}

.else {
  background: red;
}

Here is what happens step by step:

1. The browser reads the HTML element:

   • It sees a span
   • It sees two classes: something and else

2. The browser reads the CSS rules.

3. It checks which selectors match the element:

   • .something matches because the element has class something
   • .else matches because the element has class else

4. The browser collects declarations from both matching rules:

   • display: inline

Reusing styles without class inheritance is common in real projects.

UI utility classes

Many codebases use small reusable classes such as:

.hidden { display: none; }
.text-center { text-align: center; }
.bg-red { background: red; }
.rounded { border-radius: 8px; }

Then developers combine them in HTML:

<div class="bg-red rounded text-center">Alert</div>

Buttons with shared and variant styles

.btn {
  padding: 8px 12px;
  border: none;
}

.btn-primary {
  background: blue;
  color: white;
}

.btn-danger {
  background: red;
  color: white;
}

< =>Save
Delete

In production CSS, developers usually solve this problem with composition patterns rather than inheritance.

Base class plus modifier class

A very common pattern:

.badge {
  display: inline-block;
  padding: 4px 8px;
}

.badge-danger {
  background: red;
  color: white;
}

<span class="badge badge-danger">Error</span>

Utility-first composition

Some teams use many tiny classes and combine them directly in markup.

Example idea:

<div class="inline bg-red rounded">Item</div>

Grouped selectors for shared rules

When two classes should share declarations, developers often write:

.message,
.alert {
  padding: 12px;
}

Mistake 1: Expecting CSS classes to behave like programming classes

Broken idea:

.composite {
  .something;
  .else;
}

This is not valid CSS.

Fix

Use multiple classes in HTML or duplicate/share declarations through selectors.

<span class="something else">Hello</span>

Mistake 2: Confusing inheritance with multiple matching selectors

Beginners often think a class receives another class's styles automatically. It does not.

.parent {
  color: blue;
}

.child {
  background: red;
}

<div class="parent">
  <span class="child">Text</span>
</div>

The span may inherit from the parent element, but not because inherits from .

/* Define separate reusable classes */
.something {
  display: inline;
}

.else {
  background: red;
}

<!-- Combine classes on one element -->
<span class="something else">Hello</span>

Quick rules

• A CSS class does not inherit from another CSS class.
• CSS inheritance happens from parent elements to child elements.
• To reuse styles, usually apply multiple classes to the same element.
• If selectors conflict, the cascade decides the winner.
• Group selectors when multiple classes should share declarations.

Useful patterns

Multiple classes

<div class="btn btn-primary"></div>

Grouped selectors

.a,
.b {
  padding: 8px;
}

Can a CSS class inherit another class directly?

No. In plain CSS, one class cannot directly inherit or include another class.

How do I make one element use styles from two classes?

Add both class names to the element:

<div class="something else"></div>

Is CSS inheritance the same as class reuse?

No. CSS inheritance is about child elements inheriting some properties from parent elements. Class reuse is usually done by applying multiple classes or sharing declarations.

Why does only one value apply when two classes set the same property?

Because of the CSS cascade. If specificity is equal, the rule written later usually wins.

Can I combine classes into one selector?

Yes. .a.b matches elements that have both classes, but it does not make one class inherit the other.

Is there any way to extend classes in CSS-like syntax?

Not in plain CSS. Preprocessors like Sass provide @extend and mixins for that purpose.

Should I use one big class or many small classes?

It depends on your project, but many codebases prefer composable classes because they are easier to reuse and maintain.

• CSS cascade — Determines which rule wins when multiple rules match the same element.
• CSS specificity — Helps explain why one selector overrides another.
• CSS inheritance — Important for understanding what actually passes from parent to child.
• Multiple classes in HTML — The main practical solution for combining styles.
• Grouped selectors — Useful for sharing declarations across selectors.
• Combined class selectors — Useful when styling elements that have a specific set of classes.
• CSS custom properties — Helpful for reusing values even when rules differ.
• Sass mixins and @extend — Relevant if you want class-like reuse beyond plain CSS.