What are the best practices for writing maintainable CSS?

Question

I am just starting to explore this area and wonder what are the best practices when it comes to production of clean, well-structured and maintainable CSSes.

There seems

Answer 1

If you're using class names which are likely to be used again in another context with a completely different appearance, use "namespacing" to ensure those rules don't "bleed outside" their intended context. The context is the selector for the nearest parent element inside which you will always find an element matching your un-namespaced selector.

e.g. Let's imagine you are making some styles for a reusable module, whose top level element always has the class="mymodule". All the selectors intended only for use there should then begin with ".mymodule " -- so ".item" should become ".mymodule .item", titles for your mymodule items should have the selector ".mymodule .item .title" etc.

But, don't be tempted to just replicate your entire element hierarchy exactly in CSS -- this results in very fragile , difficult-to-maintain CSS. e.g. If you think you'll be using ".product-item" outside of ".new-products", but you will want to largely preserve its appearance, you will certainly afford yourself better flexibility by not namespacing that (family of) selector(s). You can always override your styles with other selectors (of equal or higher specificity) to accommodate variations in appearance in other contexts.

Example:

.black-module {
   background: #000;
}
.product {
   color: #363; /* products look similar everywhere /
}
.black-module .product {
   color: #FCF; / products have lighter text if inside a black module /
}
   .product .title {
      color: #030; / won't affect article titles /
   }
   .black-module .product .title {
      color: #FCF; / won't affect article titles or product titles in a non-black module /
   }
   .product .subtitle {
      color: #7A7; / looks good on all known module backgrounds, even black */
   }


.article .title {
   font-weight: bold; /*won't affect product titles */
}