anarchy.website Toggle Dark Mode

pheneco CSS Styleguide

By Una J. Ada, December 20, 2016

This post was written as a styleguide for CSS included in projects by phene.co.

Purpose

This document is written to create a standard coding styleguide for CSS or CSS preprocessors within all Phene.co projects. Modifications can be made per project, and should be noted within the appropriate documentation.

Tools and Rationales

Preprocessors

To allow for more efficient production, it is recommended that a CSS preprocessor be used. This permits the usage of variables for colors or repetitive styling techniques as well as to write more concise CSS overall without losing any styling in the end product. The preprocessor of choice for most Phene.co projects is Sass, particularly using the scss style. The use of node-sass rather than Ruby Sass is highly recommended as it removes the Ruby dependency from a project (it is also supposedly a more efficient implementation using a C library rather than a Ruby one).

Linting

WIP Linting allows you to check and fix your code so as to ensure your code follows this styleguide. A .scss-lint.yml file will be supplied to aid in this process. While there are several tools to do this, stylelint appears to be the best for the purposes of this guide, as it also avoids a Ruby dependency.

Autoprefixing

Continuing on the theme of concise and consistent coding, Autoprefixer is another recommended tool for development. This will remove the necessity of repeating sections of code for multiple vendors by checking with Can I Use to determine if a style requires vendor prefixes and subsequently applies said prefixes to the styles.

Styling

This section is based in part on 18F’s Front End Guide, with modifications to the actual styling described.

Spacing

// Bad
selector {
  margin: 1em;
}

// Bad
selector{margin:1em;text-align:right;}

// Good
selector                    {name:value;name:value;}
selector                    {name:value;}

Property-Value Pairs

// Bad
selector                    {margin:($variable+1em);}

// Good
selector                    {margin:($variable + 1em);}
// Bad
selector                    {margin:$variable + 1em;}

// Good
selector                    {margin:($variable + 1em);}
// Bad
selector                    {margin:inherit 1em;}

// Good
selector                    {margin-bottom:1em;}
selector                    {margin:1em 2em 3em 4em;}
selector                    {background-image:('/assets/background.jpg');font-family:'Roboto',sans-serif;}
// Bad
selector                    {top:0.112em;}

// Good
$variable:100%;
selector					{top:$variable;}

Ordering

selector                    {
    $variable:value;
	@extend selector;
	@include function($variable);
	name:value;name:value;
	@include media($var)    {name:value;name:value;}
	&::before               {content:'Hello';name:value;}
	.selector               {name:value;}
}

Units

Measurements

html                        {font-size:10px;}
@mixin font-size($size: 1.6){font-size:($size * 10) + px;font-size:$size + rem;}

Colors

$primary:#ac7878;
$secondary:rgba(0,0,0,0.3);