craigpalermo/Stylus Style Guide.md

## Stylus Style Guide.md

      
    Raw
  

              Stylus Style Guide.md
            
          
    Stylus Style Guide

Data Exchange is going to use Stylus as its CSS preprocessor.
Learn good style, and it will be your friend.
This guide includes content adapted from the Obvious
Corporation's LESS style guide
for Stylus.
Naming Conventions

Classes and IDs are always lowercase, separated by a dash.
.user-profile
#specific-element

Image filenames are lowercase, separated by a dash.
They should be prefixed with their usage.
icon-puppy.png
banner-cat.png
bg-home.jpeg

IDs vs. Classes

Use IDs sparingly (if ever). Obvious Co. is right; bugs related to
IDs and their collisions are annoying to track down.
Color Units

All color variables should be stored in colors.styl,
alongside the other stylesheets. Only use color variables
provided by colors.styl.
When adding color variables to colors.styl, use the following
conventions, keeping in mind that RGB and RGBA color units
are preferred over HEX values.
dark-green = rgb(3, 119, 38)
sky-blue   = rgb(117, 209, 255)

Font Weights

Coming Soon, classes will be defined in type.styl.
Name-spacing

Taken from Obvious Co.'s style guide:
Name-spacing is great! But it should be done at a component
level – never at a page level.
Also, namespacing should be made at a descriptive,
functional level. Not at a page location level. For example,
.profile-header could become .header-hero-unit.
.nav,
.nav-bar,
.nav-list

Nesting

Stylus doesn't support nesting (and good for it), but you
should never nest styles anyway.
Spacing

CSS rules should be simply be placed on a new line, as
Stylus doesn't require that they're separated by a comma
if a new line is used.
# allowed, but poor style
html, body
  height 100%

# happy style
html
body
  height 100%

CSS blocks should be separated by a single new line.
.content
  background red
.content-item
  background blue

Comments

Separate logical groups of styles with comments. Stylus
automatically ignores comments when compiling. Comments to
separate sections should look like this:
// Section Title -------------------------------------

Quotes

Stylus doesn't do anything special with quotes, but it
looks better to keep things consistent by using double-quotes
when necessary.
# Right
background-image url("/img/you.jpg")

# Wrong
background-image url('/img/you.jpg')