HTML
Indentation
Tabs are used to indent code in all files. Tab size is equal to 4 spaces.
Comments
Informational comments
<!-- @see dev.twitter.com/docs/cards -->
These comments are used to pass additional info about used technique, element, etc. These comments are optional.
Ending comments
<ul class="nav site-nav">
<li></li>
</ul>
<!-- /.site-nav -->
These comments helps to maintain readability of source and are suggested to use.
CSS
Indentation
Tabs are used to indent code in all files. Tab size is equal to 4 spaces.
Naming conventions
For most of elements you can use hyphen delimited classes: .site-nav, .page-title, however BEM notation is also used.
The naming convention follows this pattern:
.block {}
.block__element {}
.block--modifier {}
.block- represents the higher level of an abstraction or component.
.block__element- represents a descendent of .block.
.block--modifier- represents a different state of .block.
- Further reading
- MindBEMding - getting your head round BEM syntax by Harry Roberts
JS hooks
Don’t attach any JavaScript function to CSS styling classes. Instead use namespaced classes: .js-. For example .js-toggle-nav or .js-hide-parent.
<input type="file" name="image" class="btn btn--primary js-upload"/>
Style
[selector] {
[property]: [value];
[- Declaration -]
}
- One empty line is used to separate each ruleset
- One empty space before
{ - One empty space after
: - Don’t omit last semicolon
- For helpers you can write your code in one line but only if that helps to maintain readability.
Comments
There’re 3 main types of comments used in style.css. Max width is 79 chars so you can use 80 chars column to wrap your css.
Comments structure is optimized for Sublime Text Goto Symbol function(Ctrl/CMD+ R). Each type of comments except separator type, uses special search trigger character. You can view those characters bellow.
Each type of comment is included as snippet esuna-snippets repo.
Section comments
/** $Helpers */
/*---------------------------------------------------------------------------*/
This is primary style of comments used to separate main sections of css. Section name is preceded by $.
There’re two empty lines before this comment and one after.
Please note that these comments aren’t used inside media queries.
Search trigger character: $
Object comments
Bellow you can see 3 types of object comments. Each one has different purpose.
One empty line before this type of comments.
/* [Form] Structure */
/*------------------------------------*/
/* [min480 | Form] Structure */
/*------------------------------------*/
This comments are ussed to group objects by category. Category name is usualy related to section name. You don’t have to group elements in this sections: Layout, Content, Sidebar, Footer. Additionaly you can add media query breakpoint value before category name.
Search trigger character: [
/* %Site nav */
/*------------------------------------*/
/* %[min480] Site nav */
/*------------------------------------*/
This comments are used for elements which doesn’t need any category. Additionaly you can add media query breakpoint value in square brackets.
Search trigger character: %
Search trigger character for elemenst in media queries: %[
/** =[min480] Phones - landscape */
/*------------------------------------*/
/** =[max1024] Tablets */
/*------------------------------------*/
This comments are used as titles for media queries.
Search trigger character: =
Separator comments
/*------------------------------------*/
These comments are used to visually separate objects into smaller parts. For example you can separate two different styles of <ul> lists using this comment.