modular-css.md

My Modular CSS.

A refresher on how I write CSS. I prefer the style of modular CSS (ala Twitter Bootstrap / SMACSS ).

Current Naming Convention.

Below is an example of the suggested module / sub module naming convention:

/* Button Parent */
.button {...}

/* Button Active */
.button-active {...}

/* Button Error */
.button-error {...}

<!-- Button -->
<a href="#" class="button">Submit</a>

<!-- Button Active -->
<a href="#" class="button button-active">Live</a>

<!-- Button Error -->
<a href="#" class="button button-error">Problem?</a>

Revised Naming Convention.

Whilst this works well, I dislike having to include the name button twice to apply the sub module. Ideally I would want to write it as follows:

/* Button */
.button {...}

/* Button Active */
.button.active {...}

/* Button Error */
.button.error {...}

<!-- Button -->
<a href="#" class="button">Submit</a>

<!-- Button Active -->
<a href="#" class="button active">Live</a>

<!-- Button Error -->
<a href="#" class="button error">Problem?</a>

Whilst this always works, there is a concern that .error or .active may already be defined in the CSS. Personally, I can't see a case where I would name a module .error as its none descriptive. However I may not be the only person using the CSS file.

My Question.

Is there any danger using the later approach, Revised Naming Convention, as long as I obied by the following rules:

1. Modules should be named in relation to a purpose. Example: .sidebar, .button.
2. Sub modules should be named in relation to an action or change. Example: .active, .small.

Any advice / comments would be appreciated.