This week we are going to wrap up on the CSS basics. We'll be looking into some general best practices, centering, colours, and organization methods. Think of it like lightning round for CSS awesomeness.

Best Practices Part 1

We'll start by looking at some best practices today, lets hop right in.

Single VS Multiline Rules

There are two basic ways of writing a CSS rule: on one or on multiple lines, like this:

One Line:

nav {width: 10em; float:left;}
aside {width: 10em; float:right;}

Multiple Lines:

nav {
  width: 10em;
  float:left;
}

aside {
  width: 10em;
  float:right;
}

While one line is certainly easier to scan, it becomes very hard to maintain at scale. It is almost always better to format your CSS across multiple lines, even if you only have a single rule in your declaration block. This is because as your CSS grows you'll inevitably need to add more rules, forcing you to go back and change your formatting any way. Finally, most larger projects use a CSS preprocessor such as LESS or SASS, and they require multi-line rules. These preprocessors are very valuable and we'll get into them soon, so its best to get in the habit of writing all your declaration blocks in a multiline fashion.

Ordering Properties

There are CSS methodologies that have very particular takes on how you should order your properties, but if you aren't following one of those the most common way to order is to group by type. Lets look at a mixed up version of our blockquote em styling from the recent position episode:

blockquote > em {
  transform: rotate(30deg);
  position: absolute;
  top: 1.25em;
  text-transform: uppercase;
  left: .25em;
  font-size: 5em;
  color: lightcoral;
  z-index: 9;
  padding: .25em;
}

This is really confusing, as when you try to construct a mental model of what is happening to the element, you have to switch between positioning, styling, tranforms, and text rendering.

Some people prefer alphabetical, because its easy to find a specific property:

blockquote > em {
  color: lightcoral;
  font-size: 5em;
  left: .25em;
  padding: .25em;
  position: absolute;
  text-transform: uppercase;
  top: 1.25em;
  transform: rotate(30deg);
  z-index: 9;
}

However, I feel like this suffers from the same issue as the random ordering above in terms of understanding.

By far the most popular method of organizational is to sort them by type, like this (comments optional):

blockquote > em {
  /* Position Rules */
  position: absolute;
  top: 1.25em;
  left: .25em;
  z-index: 9;
  /* Box Model Rules */
  padding: .25em;
  /* Font Rules */
  color: lightcoral;
  font-size: 5em;
  text-transform: uppercase;
  /* Transformations or Animations */
  transform: rotate(30deg);
}

Some people go as far as to split these out into separate rules:

blockquote > em {
  /* Position Rules */
  position: absolute;
  top: 1.25em;
  left: .25em;
  z-index: 9;
}

blockquote > em {
  /* Box Model Rules */
  padding: .25em;
}

blockquote > em {
  /* Font Rules */
  color: lightcoral;
  font-size: 5em;
  text-transform: uppercase;
}

blockquote > em {
  /* Transformations or Animations */
  transform: rotate(30deg);
}

This seems like a lot of extra typing, and it becomes harder to parse in larger stylesheets. The community direction here is, generally speaking, the right one.

Exercise Answer

Last week we left off writing a layout three different ways. Lets look at a few possible solutions. The first uses floats, the second uses fixed position, while the third uses absolute positions. All three are pretty much the same, but would need to be paired with media queries for any type of production usage.

Using floats:

header {
  text-align: center;
}

main {
  width: 30em;
  margin: 0 auto;
}

nav {
  width: 10em;
  float:left;
}

aside {
  width: 10em;
  float:right;
}

Using with position fixed:

header {
  text-align: center;
  margin-right: 10em;
}

main {
  width: 10em;
  margin: 2em auto;
}

aside {
  position: fixed;
  left: 0;
  width: 10em;
}

nav {
  position: fixed;
  right: 0;
  width: 10em;
}

Using with position absolute inside of of a relative:

header {
  text-align: center;
  margin-right: 10em;
}

main {
  width: 10em;
  margin: 4em auto;
  position: relative;
}

aside {
  position: absolute;
  left: 0;
  width: 10em;
}

nav {
  position: absolute;
  right: 0;
  width: 10em;
}