LESS / CSS

LESS is the preferred CSS pre-processor at Vokal. Use LESS to author your CSS unless you have a particular project-specific restriction that makes it impractical.

Reset styles

Any project (that isn't going to be embedded in an existing codebase) should employ a CSS reset file, or block of code, to set a universal cross-browser baseline. Vokal's CSS reset combines the Eric Meyer reset with a variety of normalizations from Normalize.css, and is the recommended starting point.

Line formatting

Use 4 spaces for each indent. If you are editing a third-party library or a legacy project that uses tabs or a different number of spaces, maintain the existing standards.

There are two acceptable formats for a LESS rule:

body { margin: 0; padding: 0; }
body {
    margin: 0;
    padding: 0;
}

LESS blocks will often contain a vast number of rules, often in grouped logical chunks. Each line should only contain one selector in cases where multiple selectors apply to the declaration. If a rule only has one selector, you may keep all the styles on a single line as long as it fits without wrapping.

LESS rules should start and end with a blank line if they contain any child rules. If they contain only declarations, the blank lines are not necessary. When adding both declarations and child rules within a rule, place the declarations first.

#page-my-account {

    .dark-button-list,
    .light-button-list {

        padding: 20px 5px 0;

        /* optional single line style */
        li { margin-bottom: 15px; }
    }

    .signed-in-as {

        padding-top: 105px;
        text-align: center;

        p {
            font-size: 12px;
            font-weight: bold;
            color: #898989;
        }

        .ui-btn {

            width: 75px;
            margin: 15px auto 0;

            &::before {
                content: "-";
            }

        }

        .ui-btn-inner {
            padding: 8px 0;
            font-size: 12px;
        }

    }

}

Spaces

You should put a single space after commas, after colons/semicolons, around curly brackets, and inside parentheses.

No:

a:hover,input[type=text]{color:#FF0000;}
linear-gradient(bottom,#E9E9E9 0%,#FDFDFD 100%);
background:url("file-path") left top no-repeat;
font-size:12px;font-weight:bold;

Yes:

a:hover,
input[type=text] {
    color: #FF0000;
}
linear-gradient( bottom, #E9E9E9 0%, #FDFDFD 100% )
background: url( "file-path" ) left top no-repeat;
font-size: 12px; font-weight: bold;

Units

When using zero (0) values, do not specify a unit.

No: 20px 0px 20px Yes: 20px 0 20px

Naming

Classes, IDs, variables and mixins should be all lowercase, and use dashes when setting apart words.

No: .class_name, .className Yes: .class-name

Try to use full American English (Not British "grey") words or combinations of words when possible, and describe well what you're naming. Try to keep things semantic, referencing the intent behind a class (.error-link) not the visual (.red-link) unless the visual really is the primary differentiator.

Quotes

When writing rules that involve quotes, always use double quotes.

background: url( "image-path" );
font-family: "Rupert Grint Sans", Arial;

Comments

LESS comments need not be verbose; just add a single line above any logical grouping of rules, to indicate what they're for.

Colors

Colors should be written in HEX format by default. There is no restriction on casing or the number of hex digits.

No: red Yes: #FF0000

The exception is when using alpha-transparent colors, in which case you can use RGBA notation: rgba( 255, 0, 0, .5 )

Black and white (#000 and #FFF) are the only colors that may appear in HEX more than once in a project, any other colors should use a variable.

@red: #c00; ... color: @red; border: 1px solid @red;

Shorthand styles

When writing style rules, certain properties can be combined in shorthand notation. For example, border: 1px solid #000000 instead of the individual border-width, border-style, and border-color properties. These shorthand properties are encouraged, when your intent is to set the baseline style for an element, which you can then cascade over via other rules using the more specific properties. The font- properties are a good example of that cascade, where you'll usually only want to vary one or two of the font details in a rule.

Ordering of properties

When writing LESS rules, the properties should be grouped and ordered from the outside in, starting with positioning and structure, and ending with the most superficial elements. Here is an incomplete list of properties, outlining the kind of progression you should use:

Media queries

Media queries will commonly be used to define window-size breakpoints for responsive designs and DPI thresholds for multi-resolution assets. Media query blocks should be put at the end of your LESS files, grouping your rules all together, and be designed to cascade over and tweak the styles defined earlier in the document. Use a format like the following:

/* High-DPI devices */

@media ( -webkit-min-device-pixel-ratio: 1.1 ), ( min--moz-device-pixel-ratio: 1.1 ), ( min-resolution: 1.1dppx ), ( min-resolution: 97dpi )
{
    .button { background-image: url( "/build/images/image.png" ); background-size: 20px 20px; }
}