From 9308278f137f169baa14671fdc411564b74ab52e Mon Sep 17 00:00:00 2001 From: Seth Warburton Date: Thu, 20 Feb 2014 17:09:14 +0000 Subject: [PATCH 1/3] [imp] The first hit. --- manual/en-US/coding-standards/chapters/css.md | 219 +++++++++++++++++- 1 file changed, 218 insertions(+), 1 deletion(-) diff --git a/manual/en-US/coding-standards/chapters/css.md b/manual/en-US/coding-standards/chapters/css.md index d3fb28b0..17f5dc22 100644 --- a/manual/en-US/coding-standards/chapters/css.md +++ b/manual/en-US/coding-standards/chapters/css.md @@ -1,3 +1,220 @@ ## CSS +These guidelines have been assembled following an examination of emerging practices, ideas and existing styleguides, namely: -@TODO - Add style guide \ No newline at end of file +1.[OOCSS Code Standards](https://github.com/stubbornella/oocss-code-standards) +2.[Oneweb Style Guide](https://github.com/nternetinspired/OneWeb/blob/master/STYLEGUIDE.md) +3.[Idiomatic CSS](https://github.com/necolas/idiomatic-css) + + +## Commenting + +### Major sections +Major code sections should be named in caps and within a full comment block, eg: +```css +/* ========================================================================== + PRIMARY NAVIGATION + ========================================================================== */ +``` + +### Sub sections +Subsections should be normally cased and within an open comment block. +```css +/* Mobile navigation + ========================================================================== */ +``` + +### Verbose comments +```css +/** + * Short description using Doxygen-style comment format + * + * The first sentence of the long description starts here and continues on this + * line for a while finally concluding here at the end of this paragraph. + * + * The long description is ideal for more detailed explanations and + * documentation. It can include example HTML, URLs, or any other information + * that is deemed necessary or useful. + * + * @tag This is a tag named 'tag' + * + * TODO: This is a todo statement that describes an atomic task to be completed + * at a later date. It wraps after 80 characters and following lines are + * indented by 2 spaces. + */ + ``` + +### Basic comments +```css +/* Basic comment */ +``` + +### Uncompiled LESS/Scss comments +```css +// These are stripped on compile. +``` + +## Class naming +Use dashes to create compound class names: + +```css +/* Good - use dashes */ +.compound-class-name {…} + +/* Bad - uses underscores */ +.compound_class_name {…} + +/* Bad - uses camelCase */ +.compoundClassName {…} + +/* Bad - does not use seperators */ +.compoundclassname {…} +``` + +### Indentation +Code should be indented one tab (equal to 4 spaces): + +```css +/* Good */ +.example { + color: #000; + visibility: hidden; +} + +/* Bad - all on one line */ +.example {color: #000; visibility: hidden;} +``` + +LESS/Scss should also be nested , with child 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. + +```css +/* Good */ +.example { + color: #fff; +} + +/* Bad - closing brace is in the wrong place */ +.example { + color: #fff; + } + +/* Bad - opening brace missing space */ +.example{ + color: #fff; +} +``` + +### 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; +} +``` From c497ce861b2eab8c5bbc8f172b44891ff15cde99 Mon Sep 17 00:00:00 2001 From: Seth Warburton Date: Thu, 20 Feb 2014 17:13:51 +0000 Subject: [PATCH 2/3] [fix] Ordered list spacing --- manual/en-US/coding-standards/chapters/css.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/manual/en-US/coding-standards/chapters/css.md b/manual/en-US/coding-standards/chapters/css.md index 17f5dc22..900d7542 100644 --- a/manual/en-US/coding-standards/chapters/css.md +++ b/manual/en-US/coding-standards/chapters/css.md @@ -1,9 +1,9 @@ ## CSS These guidelines have been assembled following an examination of emerging practices, ideas and existing styleguides, namely: -1.[OOCSS Code Standards](https://github.com/stubbornella/oocss-code-standards) -2.[Oneweb Style Guide](https://github.com/nternetinspired/OneWeb/blob/master/STYLEGUIDE.md) -3.[Idiomatic CSS](https://github.com/necolas/idiomatic-css) +1. [OOCSS Code Standards](https://github.com/stubbornella/oocss-code-standards) +2. [Oneweb Style Guide](https://github.com/nternetinspired/OneWeb/blob/master/STYLEGUIDE.md) +3. [Idiomatic CSS](https://github.com/necolas/idiomatic-css) ## Commenting From 051ce675e514c1ee07bafc57ffe2ddf31e694e88 Mon Sep 17 00:00:00 2001 From: Seth Warburton Date: Thu, 20 Feb 2014 17:43:44 +0000 Subject: [PATCH 3/3] [imp] Clarifies indentation statement. --- manual/en-US/coding-standards/chapters/css.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/manual/en-US/coding-standards/chapters/css.md b/manual/en-US/coding-standards/chapters/css.md index 900d7542..91979236 100644 --- a/manual/en-US/coding-standards/chapters/css.md +++ b/manual/en-US/coding-standards/chapters/css.md @@ -71,7 +71,7 @@ Use dashes to create compound class names: ``` ### Indentation -Code should be indented one tab (equal to 4 spaces): +Rules should be indented one tab (equal to 4 spaces): ```css /* Good */ @@ -84,7 +84,7 @@ Code should be indented one tab (equal to 4 spaces): .example {color: #000; visibility: hidden;} ``` -LESS/Scss should also be nested , with child rules indented again. Nested rules should also be spaced by one line: +LESS/Scss should also be nested , with child selectors and rules indented again. Nested rules should also be spaced by one line: ```css /* Good */