CSS Style Guidelines

CSS Style Guidelines

Coding style for css development.

---

Almost all elements should have a class defined

---

Prefer classes over elements

.footer {
   .link {
   }
}

instead of

.footer {
   a {
   }
}

---

Use descriptive class names, and implement css re-use using css functions from within css

There are many ways to structure css and classnames, pretty much this remains an unsolved issue in web dev, with advantages and drawbacks to any of the main strategies. One technique is the bootstrap way, which defines a dsl of re-usable styles that can be applied liberally to elements throughout the site. You make generalized classes like "col" or "row" and use them where you need.

Another way, which is how our components repo is implemented, is to give elements unique classnames (within the hierarchy in which they are located) and implement style re-use within the css itself, using less functions. For example, instead of having a section like this:

<section class="col-sm-6 large clearfix" />

our app would have:

<section class="markets-list" />

and then the css could have:

.markets-list {
   .col-sm-6();
   .large();
   .clearfix()
}

However, part of this strategy is not to overly re-use css creating many little chunks that end up becoming their own new language to learn. For this example we would just write out the equivalent css, without creating little functions.