How To Extend Css Class

by

When working with CSS, it is common to find yourself wanting to reuse styles from one class and apply them to another. However, copying and pasting the same styles over and over again can lead to messy and difficult-to-maintain code. This is where extending CSS classes comes into play!

What is Extending CSS Classes?

Extending CSS classes is a technique that allows you to use the styles of one class in another without having to copy and paste the code. This makes your CSS cleaner and more maintainable as you only have to update the styles in one place, and they will be applied everywhere the class is extended.

How to Extend CSS Classes

There are two main ways to extend CSS classes:

  1. Using the inheritance approach in pure CSS
  2. Using the @extend directive in a CSS preprocessor like Sass

1. Using Inheritance in Pure CSS

Inheritance in CSS is a way to apply the styles of one class to another by chaining the class names together. To do this, simply list the class names you want to inherit from in the HTML element, separated by spaces.

For example, let’s say you have a base class called .button with some basic button styles, and you want to create a new class called .primary that has the same styles as .button but with a different background color. You could do this using inheritance like this:

HTML:

<button class="button primary">Primary Button</button>

CSS:

.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  text-align: center;
}

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

In this example, the .primary class will inherit all the styles from the .button class, and any additional styles specified in the .primary class will be applied on top of them.

2. Using @extend in Sass

If you’re using a CSS preprocessor like Sass, you can take advantage of the @extend directive, which allows you to use the styles of one class in another without having to chain class names in your HTML.

Continuing with our button example, you could use the @extend directive in Sass like this:

Sass:

.button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  text-align: center;
}

.primary {
  @extend .button;
  background-color: blue;
  color: white;
}

After compiling your Sass, the output will be:

CSS:

.button, .primary {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  text-align: center;
}

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

Now, you can use the .primary class on its own in your HTML, and it will inherit all the styles from the .button class:

HTML:

<button class="primary">Primary Button</button>

Conclusion

Extending CSS classes is a powerful technique that can help you write cleaner, more maintainable code. Whether you’re using pure CSS with inheritance or a CSS preprocessor like Sass, extending classes can help you keep your styles organized and avoid repetitive code.