Skip to content

Instantly share code, notes, and snippets.

@WouterBos
Last active October 11, 2017 07:02
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save WouterBos/4772202 to your computer and use it in GitHub Desktop.
Save WouterBos/4772202 to your computer and use it in GitHub Desktop.
The PAT LessCSS code convention.I'm building a command line that checks and sometimes even fixes code convention violations: https://github.com/WouterBos/Peruse
/**
* Each file should begin with a document comment, describing what it should do
*/
/**
* Brace styles, nesting and naming.
*/
/* Always prefix a root class with some namespace. In this case it's "prfx_" */
/* Also: always start a nested rule with a comment stating its purpose. */
/* In BEM terminology this is Block. */
.prfx_blockName {
/* Child classes should be prefixed with the name of the root class. In this case: "prfx_blockName". */
/* In BEM terminology this is Element. */
.prfx_blockName_nestedItem {
/* Each selector starts on a new line. */
&,
&:hover,
&:link,
&:visited,
&:focus {
.item {
/* WRONG: Prevent nested selectors if the parent selector is long or has many commas. */
}
}
}
/* Additional block styling is always recognizable through use, thus do not need a different notation. */
/* In BEM terminology this is Modifier. */
&.prfx_blockName__modifier {
/* Element style connected to Modifier. */
.prfx_blockName_nestedItem {
}
}
}
/* Large blocks can have modifiers written like this: */
.prfx_blockName.prfx_blockName__modifier {
}
/**
* Property order
*
* Properties are ordered in sections. The sections are ordered outside-in. You start with the
* outer styling of the box and end with the inner content and properties like shadow. Variables
* are always first, because it has to be clear what variables are used. Second are references
* to mixins, since they might hold different types of properties and because they might have to
* be overruled.
*/
.prfx_someOtherBlockName {
/* Variables, followed by a blank line */
@foo: 1px;
/* References to mixins */
.transform(rotate(7deg));
/* Page properties */
marks: value;
orphans: value;
page: value;
page-break-after: value;
page-break-before: value;
page-break-inside: value;
size: value;
widows: value;
/* Box properties */
clear: value;
clip-path: value;
cursor: value;
display: value;
float: value;
opacity: value;
visibility: value;
/* Table properties */
table-layout: value;
caption-side: value;
border-collapse: value;
border-spacing: value;
empty-cells: value;
/* Positioning */
position: value;
top: value;
right: value;
bottom: value;
left: value;
z-index: value;
/* Margin */
margin: value;
margin-top: value;
margin-right: value;
margin-bottom: value;
margin-left: value;
/* Border */
outline: value;
outline-color: value;
outline-style: value;
outline-width: value;
border: value;
border-top: value;
border-right: value;
border-bottom: value;
border-left: value;
border-width: value;
border-top-width: value;
border-right-width: value;
border-bottom-width: value;
border-left-width: value;
border-style: value;
border-top-style: value;
border-right-style: value;
border-bottom-style: value;
border-left-style: value;
border-color: value;
border-top-color: value;
border-right-color: value;
border-bottom-color: value;
border-left-color: value;
/* Padding */
padding: value;
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;
/* Dimensions */
width: value;
max-width: value;
min-width: value;
height: value;
max-height: value;
min-height: value;
/* Content box behaviour */
overflow: value;
white-space: value;
/* List styles */
list-style: value;
list-style-image: value;
list-style-position: value;
list-style-type: value;
/* Generated content */
content: value;
counter-increment: value;
counter-reset: value;
quotes: value;
marker-offset: value;
/* Text styling */
color: value;
direction: value;
font: value;
font-family: value;
font-size: value;
font-size-adjust: value;
font-stretch: value;
font-style: value;
font-variant: value;
font-weight: value;
letter-spacing: value;
text-align: value;
line-height: value;
text-decoration: value;
text-indent: value;
text-shadow: value;
text-transform: value;
unicode-bidi: value;
vertical-align: value;
word-spacing: value;
/* Speech */
azimuth: value;
cue: value;
cue-after: value;
cue-before: value;
elevation: value;
pause: value;
pause-after: value;
pause-before: value;
pitch: value;
pitch-range: value;
play-during: value;
richness: value;
speak: value;
speak-header: value;
speak-numeral: value;
speak-punctuation: value;
speech-rate: value;
stress: value;
voice-family: value;
volume: value;
/* Background */
background: value;
background-attachment: value;
background-color: value;
background-image: value;
background-position: value;
background-repeat: value;
box-shadow: value;
}
/**
* Browser vendors
*
* Always move repeating code like properties with browser prefixes to a seperate
* (parametric) mixin.
*/
.prfx_transform(@value: ~"") { /* Always define default values for mixins */
transform: @value;
-ms-transform: @value;
-moz-transform: @value;
-webkit-transform: @value;
-o-transform: @value;
}
/**
* Modules
*
* Always make logical blocks of files, which can be imported through one central file.
*/
/* Base */
@import "prfx_values.less";
@import "prfx_functions.less";
@import "prfx_reset.less";
/* Text styling */
@import "prfx_text.less";
@import "prfx_text-block.less";
/* Grid */
@import "prfx_grid.less";
@import "prfx_grid-print.less";
@import "prfx_grid-mobile.less";
@import "prfx_grid-flex.less";
/**
* Misc
*
* - Indentions as 4 spaces (if Less code will never be parsed in-browser).
* Spaces will show the intended indention.
* - Always add a space after a colon.
* - Maximum depth of mixins: 5.
* Complex selectors take up space and take a longer time to render. Aim for a flat structure.
* - Maximum line width of comments: 120 characters.
* So that all code can be read without horizontal scrolling. This restriction is only imposed on comments,
* since CSS styling itself rarely exceeds the 120 char restriction.
* - Never use an ID as a selector
* ID selectors make a style hard to reuse because an ID needs to be unique in the code. Furthermore:
* ID selectors are too strong and serve as a pseudo-!important.
* - A line never ends with a space.
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment