Principles

Concise is built on a set of simple but important principles that aid in effective and manageable web design. By understanding these principles, Concise can be used to its full potential, and we can create a better paradigm for using HTML and CSS to build websites.

Semantics

Concise was built with semantics in mind. Semantics in regard to web design, for those unfamiliar with the term, describes the use of readable and meaningful HTML tags and CSS class names used in any given website.

Meaningful names are those such as .column-16. This class name easily explains that the section is a column and that it is the widest column (in a 16-column row). This class name is not too verbose, and provides meaning and context for our code.

We could have .col16 or .col-16 class names that, with enough use, would be easy to remember and use, but isn't very meaningful in the context of our design. The goal with web semantics is to create classes that are meaningful, but not too verbose.

Another method of writing semantic code with Concise is by naming logical sections of your layout and adding the necessary CSS using SASS mixins.

An example of this is if we had a simple 16-column blog layout. Let's say we want our articles to take up 12 columns and our sidebar take up 4. We could write this like:

<div class="column-12">
  Article
</div>

<div class="column-4">
  Sidebar
</div>

Or, we could use an included SASS mixin to have this make a little more sense:

.article {
  @include column(16, 12);
}

.sidebar {
  @include column(16, 4);
}

<div class="article">
  Article
</div>

<div class="sidebar">
  Sidebar
</div>

While this does add some CSS overhead to your project, it makes a lot more sense than just using the .column-* classes, and would be much easier to find inside of your CSS document.

Selector Organization

As you will notice when you open up the uncompressed concise.css file, all of the declarations are organized alphabetically for their given selector. I understand that a lot of people preach organization by relevance. That is, organizing an selector's declarations by which is most relevant. However, I find organizing by relevance to be rather arbitrary and relevance often varies from person to person. One person's idea of declaration relevance may be completely different than someone else's.

When faced with this problem, I opted for the completely non-arbitrary method of organizing declarations alphabetically. Of course, you do not get the cleanliness of having all of your borders grouped together, or your height and width right next to each other, but it makes every single element in your CSS file immediately readable by anyone. Everybody knows that if declarations are organized alphabetically, that background is going to be near the top, and width is going to be towards the bottom. I found this to be the ideal method when working with my CSS.

Of course, this is just how Concise is organized. By all means use whatever form of declaration organization that works best for you.