Bhavitha Cherukuri: Reusability of CSS RULESETS

Reusability of CSS RULESETS

Before going into the topic let us learn about how to reuse css rulesets. As we know we use topic classes in java and python to reuse the code. As in the same way there is also a chance to reuse the css rulesets.

Reusability of CSS Rulesets

As we know reusability is nothing but reusing the code whenever you want and wherever you want. Here in web development also we can reuse the css rulesets.

Benefits of reusing CSS rulesets

The code is efficient i.e writing the code again and again may miss some elements and there may be also some syntax errors etc… Instead using the same code that has been written earlier helps in no errors.
Helps to cost low and also the consistency is maintained and also helps the testing passes easily.

For Example:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <button class="button">Get Started</button>
        <button class="button">Lets Go</button>
    </body>
</html>

.button{
    height:36px;
    width:138px;
}

In the above example we can see that the css ruleset that has been written for button is used for two buttons and this is how the code is reused.

Now many of the readers may have a doubt that how can we apply two different background colors for two buttons? because applying the same background color to the buttons is simple, just by adding background-color in css.

so, now let us solve the big question by learning another topic i.e how to provide multiple names to the class attribute value?

Providing multiple names to the class attribute values

we can provide multiple names to the class attribute values by

<tag class=” name1 name2 name3…”>

above class is the attribute and name1, name2… are the attribute values and they are called class names.

For example

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="reuse.css">
    </head>
    <body>
        <button class="button button-blue">Get Started</button>
        <button class="button button-orange">Lets Go</button>
    </body>
</html>

.button{
    height:36px;
    width:138px;
    border-width:0px;
    border-radius:20px;
}
.button-blue{
    background-color:#6161f0;
}
.button-orange{
    background-color:#f0ac2f;
}