Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Based on Thoughtbot's style

...


.wiki-content h4 {
  font-size: 14px;
}
Table of Contents

Syntax

Use camelCase when defining a new selector.

Creating classes and IDs

  • Avoid creating classes if you can use default selectors to target the required element
  • All class and ID names should be meaningful out of context
  • When concatenating words to make a name, use camel case to aid legibility
  • Remember that an ID has more specificity 'weight' than a class, but that you can only (validly) have one instance of a particular ID on each page

Where possible, avoid creating custom classes and IDs unless you need them; it is quite possible you can target the element by it's tag and position within the XHTML document.

When creating a class/ID please use semantic naming rather than positional/layout naming. Avoid 'top', 'left', 'right', 'red', 'blue' etc. Try to describe the function of the element so that it has more meaning, and so that we can change layout without needing to rewrite or remember that left now means right.guide (version on 16 April 2014)

Formatting

  • Use the Scss syntax.
  • Use hyphens when naming mixins, extends, classes, functions & variables: span-columns not span_columns or spanColumns.
  • Use space between property and value: width: 20px not width:20px.
  • Use a blank line above selector that has styles.
  • Prefer hex color codes #000.
  • Use // for comment blocks not /* */.
  • Use a space between selector and {.
  • Use single quotation marks for attribute selectors and property values.
  • Use only lowercase, including colors.
  • Don't add a unit specification after 0 values, unless required by a mixin.

Order

Selectors

Organization

Prefer compound property statements (e.g. backgroundborderfontmargin, padding).

References:

'Resetting'

The following code should appear at the start of the main css document for all new apps and websites:

Code Block

//* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

...

Units

Rules

  • single rule selectors can be all on one line to save space

Example

Code Block

.floatRight {float: right;}
  • otherwise the opening curly brace should be on the same line as the selector, and each style should be on a new line and indented with 2 spaces

Example

Code Block

blockquote {
  color: #DDE474;
  margin: 2em;
  padding: 3em;
}

Colour (color)

Use hexadecimal values, not names for defining the color attribute. Use shorthand if possible - the red green and blue values are defined by a pair of hex values, if the pair consists of identical values you only need to declare it once.

Example

No Format

'Magenta' = #FF00FF = #F0F

Shorthand

Syntax

font: font-style | font-variant | font-weight | font-size | line-height | font-family

Example

Code Block

p {  
  font:0.8em/1em"Helvetica Neue Light Condensed", serif;  
}

Any values not specified (such as font-style and font-weight) will inherit the default values. The value 0.8em/1em refers to font-size and line-height. As both use size as value, they can be bundled together like this, with a slash, font-size always being the first value defined. Quotes are used around the font-family value because of the spaces included in the name of that value.

Other properties that should use shorthand declaration are:

  1. borders
  2. padding & margin
  3. lists
  4. background

There are lots of articles about this online, one nice reference is this by Roger Johansson.

Stylesheet layout

Group styles together under commented titles in the stylesheet

Example

Code Block

/* --------------------------------------------------------------------- CORE */
body { color: #444444;}
a {color: #CC0000;}

Commented areas should include:

  1. CORE (selectors without ID or class)
  2. LAYOUT (Divs with ID that control the look of the page)
  3. PRESENTATION (selectors with ID or class)

Other areas such as FORMS and NAVIGATION are useful and should be considered.
When grouping styles, be aware of the cascading nature of stylesheets and ensure you are not overwriting one class with another further down the page.