Toggle Dark Mode

pheneco CSS Styleguide

By Una Ada (no pronouns), December 20, 2016

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


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

Tools and Rationales


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 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).


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.


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.


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


// Bad
selector {
  margin: 1em;

// Bad

// 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
selector					{top:$variable;}


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



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