Avoiding Repeated Constants in CSS

Avoiding repeated constants in CSS

Recently, variables have been added to the official CSS specs.

Variables allow you to so something like this :

body, html {
    margin: 0;
    height: 100%;
}

.theme-default {
    --page-background-color: #cec;
    --page-color: #333;
    --button-border-width: 1px;
    --button-border-color: #333;
    --button-background-color: #f55;
    --button-color: #fff;
    --gutter-width: 1em;
    float: left;
    height: 100%;
    width: 100%;
    background-color: var(--page-background-color);
    color: var(--page-color);
}

button {
    background-color: var(--button-background-color);
    color: var(--button-color);
    border-color: var(--button-border-color);
    border-width: var(--button-border-width);
}

.pad-box {
    padding: var(--gutter-width);
}

<div class="theme-default">
    <div class="pad-box">
        <p>
            This is a test
        </p>
        <button>
           Themed button
        </button>
    </div>
</div>

How to avoid specifying a class name multiple times in html?

Try this, this will reduce your class and will give you specific class to target.

.xx td{color:#ff0000}

<table class="xx">  <tr>    <td>      blah blah    </td>    <td>      blah blah    </td>  </tr>  <tr>    <td>      blah blah    </td>    <td>      blah blah    </td>  </tr></table>

How to use variable in CSS?

For that you need to use Less or Sass which are CSS Dynamic languages.

here's some comparison between both technologies.

Variablize a CSS class?

The only way I can think of would be using javascript to dynamically assign the attributes. For example, make a list of all the attributes that you want to configure (such as color, font-size, font-weight) and a list of all the classes you want to be configurable (such as .myHeader, myTitle, etc). Then do something like this:

for (x=0; x< cssClasses.length; x++)
{
  addAttribs(cssClasses[x]);
}

function addAttribs(class)
{
   $("." + class).css("color","#444");
   $("." + class).css("font-weight","bold");
   //And so on..
}

This may be the closest you can get, and it will have the advantage of all the attributes stored in one function, so if you change it there it will be updated everywhere else.

Edit: By the way, I'm using Jquery in the addAttribs() function to easily access and set the css attributes.

---

Related Topics