Last active
October 11, 2017 07:02
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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