diff --git a/manual/css.md b/manual/css.md index b4a8c2bc..1a7f1963 100644 --- a/manual/css.md +++ b/manual/css.md @@ -65,12 +65,12 @@ Use dashes to create compound class names: /* Good - use dashes */ .compound-class-name {…} +/* Good - uses camelCase */ +.compoundClassName {…} + /* Bad - uses underscores */ .compound_class_name {…} -/* Bad - uses camelCase */ -.compoundClassName {…} - /* Bad - does not use seperators */ .compoundclassname {…} ``` @@ -89,49 +89,6 @@ Rules should be indented one tab (equal to 4 spaces): .example {color: #000; visibility: hidden;} ``` -LESS/Scss should also be nested , with child selectors and rules indented again. Nested rules should also be spaced by one line: - -```css -/* Good */ -.example { - - > li { - float: none; - - + li { - margin-top: 2px; - margin-left: 0; - } - - } - -} -/* Bad - nested rules not indented */ -.example { - - > li { - float: none; - - + li { - margin-top: 2px; - margin-left: 0; - } - - } - -} -/* Bad - nested rules not spaced */ -.example { - > li { - float: none; - + li { - margin-top: 2px; - margin-left: 0; - } - } -} -``` - ### Alignment The opening brace must be on the same line as the last selector and preceded by a space. The closing brace must be on its own line after the last property and be indented to the same level as the opening brace. diff --git a/manual/html.md b/manual/html.md index a9b7a5a9..6542d968 100644 --- a/manual/html.md +++ b/manual/html.md @@ -123,6 +123,7 @@ HTML attributes should be listed in an order that reflects the fact that class n 2. id 3. data-* 4. Everything else + ```html Text diff --git a/manual/scss.md b/manual/scss.md new file mode 100644 index 00000000..3b02b2b0 --- /dev/null +++ b/manual/scss.md @@ -0,0 +1,262 @@ +## SCSS +These guidelines have been assembled following an examination of emerging practices, ideas and existing styleguides, namely: + +1. [Code Guide](http://codeguide.co) (by @mdo) + + +## Commenting + +### Major sections +Major code sections should be named in caps and within a full comment block, eg: + +```css +// Major comment +// +// Major comment description goes here +// and continues here +``` + +### Sub sections +Subsections should be normally cased and within an open comment block. +```css +// +// Sub section comment +// +``` + +### Basic comments +```css +// Basic comment +``` + + +## Class naming +Use dashes to create compound class names: + +```css +// Good - use dashes +.compound-class-name {…} + +// Good - uses camelCase +.compoundClassName {…} + +// Bad - uses underscores +.compound_class_name {…} + +// Bad - does not use seperators +.compoundclassname {…} +``` + +### Indentation +Rules should be indented with 2 spaces: + +```css +// Good +.example { + color: #000; + visibility: hidden; +} + +// Bad - using tabs or 4 spaces +.example { + color: #000; + visibility: hidden; +} +``` + +SCSS should also be nested, with child selectors and rules indented again. Nested rules should also be spaced by one line: + +```css +// Good +.example { + + > li { + float: none; + + + li { + margin-top: 2px; + margin-left: 0; + } + + } + +} + +// Bad - nested rules indented with tab or 4 spaces +.example { + + > li { + float: none; + + + li { + margin-top: 2px; + margin-left: 0; + } + + } + +} +``` + +### Alignment +The opening brace must be on the same line as the last selector and preceded by a space. The closing brace must be on its own line after the last property and be indented to the same level as the opening brace. + +```css +// Good +.example { + color: #fff; +} + +// Bad - closing brace is in the wrong place +.example { + color: #fff; + } + +// Bad - opening brace missing space +.example{ + color: #fff; +} +``` + +### Declaration order +Related property declarations should be grouped together following the order: + +1. Positioning +2. Box model +3. Typographic +4. Visual + +```css +// Good +.example { + // Positioning + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 100; + + // Box-model + display: block; + float: right; + width: 100px; + height: 100px; + + // Typography + font-family: Arial, sans-serif; + font-size: 14px; + line-height: 1.2; + color: #333; + text-align: center; + + // Visual + background-color: #f5f5f5; + border: 1px solid #e5e5e5; + border-radius: 3px; + + // Misc + opacity: 1; +} +``` + +Within each group, you'll also need to order the properties. If any mistakes are made, the compiler will notify you and provide the correct order + +### Property Format +Each property must be on its own line and indented one level. There should be no space before the colon and one space after. All properties must end with a semicolon. + +```css +// Good +.example { + background: black; + color: #fff; +} + +// Bad - missing spaces after colons +.example { + background:black; + color:#fff; +} + +// Bad - missing last semicolon +.example { + background: black; + color: #fff +} +``` + +### HEX values +HEX values must be declared in lowercase and shorthand: + +```css +// Good +.example { + color: #eee; +} + +// Bad +.example { + color: #EEEEEE; +} +``` + +### Attribute selectors +Always use double quotes around attribute selectors. + +```css +// Good +input[type="button"] { + ... +} + +// Bad - missing quotes +input[type=button] { + ... +} + +// Bad - using single quote +input[type='button'] { + ... +} +``` + +### Zero value units +Zero values should not carry units. + +```css +// Good +.example { + padding: 0; +} + +// Bad - uses units +.example { + padding: 0px; +} +``` + +### Prefixing properties +There is no need to prefix properties, as this will be automatically taken care of when compiling your code + +```css +// Good +.example { + transform: rotate(30px); +} + +// Bad - uses prefix +.example { + -webkit-transform: rotate(30px); + transform: rotate(30px); +} +``` + +### End of file +The end of the SCSS file should always have a blank line + +```css +.example { + padding: 0; +} +<<< Leave empty line here +```