Monday 2 September 2013

Coding Practices & Additional Resources - Part2

Write CSS with Multi-Line Spacing

When writing CSS it is important to write it spanning multiple lines, placing selectors and each style declaration on a new line. Doing so makes the code easy to read as well as edit. When all of the code is piled into one line it’s harder to scan and make changes. Additionally, if you are looking for the difference between two sets of code, placing all of the properties within one line makes it nearly impossible to spot a small change.
Compressing and minifying CSS before sending it to the server is completely acceptable, even encouraged. However, when working with CSS files locally, comments and multi-line spacing can make a world of difference.
  1. a {background: #aaa; color: #f60; font-size: 18px; padding: 6px;}
  1. a {
  2. background: #aaa;
  3. color: #f60;
  4. font-size: 18px;
  5. padding: 6px;
  6. }

Modularize Styles for Reuse

CSS by default is built in a way to allow styles to be reused, specifically with the use of classes. Class styles should be modular and available to be applied to any element as necessary. If a section of news is presented within a box, including a border, background color, and other styles the class of news might sound like a good option. However, those same styles may also need to be applied to a section of upcoming events. The class of news doesn’t fit in this case. A class of modal would make more sense and may be used across the entire website.

Pump the Brakes

Yes, the best practices around class values from HTML and CSS are a bit conflicting. Use values that pertain to the content, however naming them in away that they can be reused across the entire website doesn’t quite make sense. The main point here is to really think about what you are using as values and provide values that are meaningful.
Twitter Bootstrap does a great job of this. Buttons are modularized using the btn class and can be used on a,button, or any other element. No matter what, any element receiving the btn class will inherit the correct button styles. Additionally, if you want a red button, instead of using a class of red you can use the class of btn-danger. Combining the two classes, btn btn-danger, generates a red button.
  1. .news {
  2. background: #eee;
  3. border: 1px solid #ccc;
  4. border-radius: 6px;
  5. }
  6. .events {
  7. background: #eee;
  8. border: 1px solid #ccc;
  9. border-radius: 6px;
  10. }
  1. .modal {
  2. background: #eee;
  3. border: 1px solid #ccc;
  4. border-radius: 6px;
  5. }

Create Proper Class Names

As mentioned above, class values should be modular while pertaining to the content as much as possible. These values should be named in such a way that they resemble the CSS language. In such, class names should be all lowercase, using hyphen delimiters.
  1. .Alert_Message {...}
  1. .alert-message {...}

Build Proficient Selectors

CSS selectors can get out of control if not carefully watched. They can become too location specific as well as too long fairly easily. For the longest time we’ve been told not to use classes and to use element selectors as much as possible. Regrettably, this isn’t true.
The longer a selector is, chaining multiple elements together, the more work the browser has to do in checking to make sure each selector matches before applying a style. Doing so creates a large performance hit, slowing down the rendering of any styles. Make selectors as small as possible while still targeting the desired element.
Additionally, the more specific a selector is the more dependent it is on its location within HTML. If emphasized text is nested within a heading inside of an aside the selector might look something like aside h1 em. Should the emphasized text ever be moved out of the heading the styles will no longer apply. A better, more flexible selector would be aside em.
  1. ul.news li a {...}
  2. ul.news li a em.special {...}
  1. .news a {...}
  2. .news .special {...}

Use Specific Classes When Necessary

There often comes a time when a CSS selector is so long and specific that it no longer makes sense. It creates a performance lag and is strenuous to manage. In this case a class is advised. While applying a class to the targeted element may create more code within HTML it will render faster and remove any managing obstacles.
  1. article div h4 a span {...}
  1. .offset {...}

Use Shorthand Properties When Available

One of the benefits of CSS is the ability to use shorthand properties. Nearly every property has an acceptable shorthand property or value. As an example, rather than using four different sets of properties and values to declare a margin one single property can be used. Additionally, one margin property can be used to set the four values in a couple of different ways. All four values can be declared individually in a clockwise order, two values can be declared by combining the top/bottom and left/right values, or by declaring one value for all four sides of an element. The same pattern, and many others, may be reused with multiple properties.
When setting one value shorthand properties should not be favored. If a box simply needs a bottom margin, thebottom-margin property should be used so that other margin values will not be overwritten.
  1. img {
  2. margin-top: 5px;
  3. margin-right: 10px;
  4. margin-bottom: 5px;
  5. margin-left: 10px;
  6. }
  7. button {
  8. padding: 0 0 0 20px;
  9. }
  1. img {
  2. margin: 5px 10px;
  3. }
  4. button {
  5. padding-left: 20px;
  6. }

Drop Unit Type from Zero Values

One way to easily cut down on the amount of CSS code written is to remove the unit type from any zero value. No matter what length value being used, pixels, percentages, em, and so forth, zero is always zero.
  1. div {
  2. margin: 20px 0px;
  3. letter-spacing: 0%;
  4. padding: 0px 5px;
  5. }
  1. div {
  2. margin: 20px 0;
  3. letter-spacing: 0;
  4. padding: 0 5px;
  5. }