Nathan's blog
Writing Creative CSS: The Power of Reusable Components and Hidden Styling Techniques

Photo by Jackson Sophat on Unsplash

Writing Creative CSS: The Power of Reusable Components and Hidden Styling Techniques

Nathan Kaduru's photo
Nathan Kaduru
·

3 min read

Table of contents

Introduction

CSS has always been of core importance in web development, today it has transformed from just a simple styling tool to a powerful utility for creating maintainable and scalable design systems. Learning how to write CSS isn’t only about making websites look good—it's about writing intelligent, reusable code that adapts and grows with the scope of your project.

Reusable CSS Components

Traditional CSS has led a lot of developers into a trap of writing highly specific, one-off styles that quickly become difficult to manage, that’s why a lot of them end up turning to styling frameworks. However, the modern approach emphasizes creating flexible, modular CSS components that can be easily reused across different parts of a project.

Let’s consider the following benefits of using reusable CSS components:

  • Consistency: By creating reusable components, you ensure a uniform look and feel throughout your application.

  • Maintainability: Centralized styles mean changes can be made in one place, reducing the risk of inconsistencies.

  • Scalability: As your project grows, your CSS becomes more organized and easier to expand.

This principle is the foundation of popular CSS libraries like Tailwind CSS, Bootstrap, and others. By writing reusable CSS styles these frameworks demonstrate how atomic, reusable classes can create powerful, flexible design systems.

Hidden CSS Gems

Now let’s talk about some lesser-known CSS features can dramatically improve your styling workflow:

  1. clamp() Function

     .responsive-text {
   font-size: clamp(1rem, 2.5vw, 2rem);
 }

    The clamp() function in CSS is a powerful tool that allows you to set a value that adjusts within a specified range. It takes three parameters: a minimum value, a preferred value, and a maximum value. This ensures that the value will never go below the minimum or above the maximum, while ideally staying at the preferred value.

  2. aspect-ratio Property

     .video-container {
   aspect-ratio: 16 / 9;
   width: 100%;
 }

    This property can help you set the aspect ratio for both pictures and videos and can easily maintain consistent responsive layouts.

  3. color-mix() Function

     :root {
   --mixed-color: mix(#ff0000, #0000ff, 50%);
 }

 .element {
   background-color: var(--mixed-color);
 }

    This function allows you to blend two colors together. In the example above:

    • #ff0000 is red.

    • #0000ff is blue.

    • 50% indicates that the colors should be mixed equally.

If you want to mix the colors in different proportions, you can adjust the percentage. For instance, mix(#ff0000, #0000ff, 30%) will mix 30% red with 70% blue.

  1. all Property

    The all property is a shorthand property usually used to reset all properties to their initial value, stopping any form of inheritance or to actually enforce inheritance on all properties.

initial
Sets all properties to their respective initial values.

inherit
Sets all properties to their inherited values.

unset
Changes all values to their respective default value which is either inherit or initial.

revert
Resulting values depend on the stylesheet origin where this property is located.

revert-layer
Resulting values will match a previous cascade layer or the next matching rule.

    body {
      color: red;
    }

    article {
      color: green;
    }

    h1 {
      color: blue;
    }

    h1.initial {
      all: initial;
    }

    h1.inherit {
      all: inherit;
    }

    h1.unset {
      all: unset;
    }

    h1.revert {
      all: revert;
    }

    h1.revert-layer {
      all: revert-layer;
    }

Conclusion

Modern CSS is about more than just making things look good—it's about creating intelligent, maintainable design systems. By embracing reusable components and exploring advanced CSS features, developers can write more efficient, scalable, and enjoyable styling code.

CSSstyling