CSS

3rd-Eden edited this page Jul 20, 2012 · 3 revisions
Clone this wiki locally

Table of contents

Common

The following rule apply to CSS and Stylus.

Use a .sprite class that contains the background-image

If sprites are used in the CSS, the image should be placed under one single CSS selector. This eases maintenance and makes it possible to Base64 encode/inline the images the CSS to reduce HTTP requests.

Use the <s> tag for sprite

If sprites are used on empty elements, a <s> HTML element should be used. Having one universal element makes the code easier to maintain. And as the HTML element already starts with an s character, its easier to identify.

Clean up your floats

When you are using floats to position an element make sure that you restore the size of the parent's box by applying overflow:hidden to it.

Use background-image for CSS3 gradients

If you are using CSS3 gradients in your CSS it's important to always have a fall-back color for browser that do not support this technique. Normally you would do:

background: red; background: -webkit-radial-gradient(..);

But this will override the actual background property with an empty background rule and remove the fall-back color for browser that do not support gradients. To bypass this behavior should apply the CSS gradient as background-image instead so the background color will not be changed if the browser doesn't support the gradient.

Lint your CSS with CSSlint

CSS lint allows you to check the most common issues that people introduce when writing CSS rules. When writing new CSS make sure that is passes CSSLint.

Minify all your CSS for production

Always run your CSS through a CSS minifier, your users don't really care on how much white space you used

CSS declarations should be ordered alphabetically

The CSS declarations should be ordered alphabetically so it's easier to spot duplicate properties in one single CSS rule. If you where to use CSS hacks in your declaration then these should be placed at the end or bottom of the declaration.

CSS hacks should be commented

When using CSS hacks such as the star or underscore hacks for Internet Explorer you should be describing the exact use case on why you are using that hack, what it fixes, how you reproduce it and how it fixes the "bug".

CSS

Please note that all new files should be written in Stylus instead. These guidelines are only for files that cannot be converted in to stylus files or are legacy files.

Always put the semi-colons behind the value, not in front of the properties

/* good */
.rule { prop: value; prop: value; prop: value }

/* wrong */
.rule { prop: value ;prop: value ;prop: value }

/* also wrong, as values should be on one line ;) */
.rule {
    prop: value
  ; prop: value
  ; prop: value
}

Woot semi-colon first, (just trolling here).

The last semi-colons IS FORBIDDEN!@!!@

When you have specified all your declarations of your CSS rule, you should omit the last semicolon as they are not needed. See these semi-colons as the comma's you use in an array, you don't add a comma to the last item of an array either.

Indenting should be done based on the structure of the HTML

When you are indenting CSS rules it should follow the flow of the HTML so you easier to see where and how your rules will be applied.

Imagine the following HTML structure:

<div id="wonka">
  <div class="foo">
    <a class="bar">pewpwe</a>
    <a href="#">pang pong</a>
  </div>

  <div>
    <div id="moo">
      <div class="bar">
      </div>
    </div>
  </div>

Then you rules should be indented as:

#wonka { background: red }
  #wonka div { background: yellow }
    #wonka .foo .bar { border: 1px solid red }

  #moo { background: black }
    #moo .bar { }

All props on one line

Use single CSS so it's easier to see how your CSS flows see which rules affect the styling of CSS rule.

Stylus

Stylus is an expressive CSS language, it's compiler is written in Node.js. And we are using Stylus in conjunction with the square build system.

Prefix variables with an $

When using variables within stylus prefix them with a $ so it's easier to spot in your code.

Variables should be lowercased

All the variable names should be lowercased. Because CSS is lower cased as well.

Use transparent mixins when possible

When you are creating or using mixins, use the transparent API of them. If you don't know what transparent mixins are, you should either read the documentation or change jobs.

Mixins should be saved in a separate file

Mixins should be saved in a different file and imported using the @import statement. This makes it easier to re-use different mixins through out the project.

Remove braces and semi-colons

They are optional in Stylus and should be removed to make it easier and faster to write Stylus based CSS.

Keep the : seperator

The properties should be suffixed with an : so it's easier to see what the property of a CSS declaration is and what kind of value it holds.

TODO

  • properties are suffixed with a :
  • Braces are removed.
  • Code is indented per css namespace
  • use mixins for vendor props