{"id":13607029,"url":"https://github.com/felipefialho/coding-style","last_synced_at":"2026-01-25T06:45:11.375Z","repository":{"id":46262998,"uuid":"17513371","full_name":"felipefialho/coding-style","owner":"felipefialho","description":"[outdated/deprecated] My rules coding for HTML, CSS and JavaScript development","archived":false,"fork":false,"pushed_at":"2020-06-17T01:54:57.000Z","size":1649,"stargazers_count":356,"open_issues_count":0,"forks_count":76,"subscribers_count":27,"default_branch":"main","last_synced_at":"2024-12-26T01:43:55.946Z","etag":null,"topics":["code-style","coding-style","css-syntax","html-syntax","javascript-syntax"],"latest_commit_sha":null,"homepage":"http://www.felipefialho.com/coding-style/","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/felipefialho.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-07T12:32:09.000Z","updated_at":"2024-10-04T13:32:10.000Z","dependencies_parsed_at":"2022-09-05T18:11:54.921Z","dependency_job_id":null,"html_url":"https://github.com/felipefialho/coding-style","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipefialho%2Fcoding-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipefialho%2Fcoding-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipefialho%2Fcoding-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipefialho%2Fcoding-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/felipefialho","download_url":"https://codeload.github.com/felipefialho/coding-style/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239246007,"owners_count":19606730,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-style","coding-style","css-syntax","html-syntax","javascript-syntax"],"created_at":"2024-08-01T19:01:14.909Z","updated_at":"2025-11-01T01:30:27.041Z","avatar_url":"https://github.com/felipefialho.png","language":null,"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://cloud.githubusercontent.com/assets/3603793/15085619/b7b0423a-13b1-11e6-8e47-e8ed523f6ff6.png\" width=\"200\"\u003e\n\u003c/p\u003e\n\n# My Coding Style\n\n[![license](https://img.shields.io/github/license/LFeh/coding-style.svg)](./license.md)\n[![GitHub contributors](https://img.shields.io/github/contributors/LFeh/coding-style.svg)](https://github.com/LFeh/coding-style/graphs/contributors)\n\n\u003e \"Every line of code should appear to be written by a single person, no matter the number of contributors.\" - Chinese Proverb.\n\nThe following document describes the rules of writing in development languages that I use: HTML, CSS and JavaScript.\n\nThe idea of this repository is not to be a complete code guide. Only to have a place for myself and other developers who participate in my projects able to inform the coding standards used.\n\nAs this is a new document, some rules may not have been applied in old projects.\n\nThis is a live document and changes can occur at any time.\n\n## Summary\n\n1. [Commits](#commits)\n1. [HTML](#html)\n1. [Pug](#Pug)\n1. [CSS](#css) \n1. [CSS Preprocessors](#css-preprocessors) \n1. [JavaScript](#js)\n1. [Boilerplate](#boilerplate) \n1. [References](#references)\n1. [Translations](#translations) \n\n\u003ca name=\"commits\"\u003e\u003c/a\u003e\n## 1. Commits\n\nIn order to facilitate the contribution by anyone in a project, all commit messages, pull request title or issues discussion must be in **English**.\n\nBefore commit adjusts in project, check if exists an open issue and make references for this issue using '#' in your commit message.\n\n```javascript\n// Good\ngit commit -m \"Add placeholder on input #10\"\n\n// Bad\ngit commit -m \"Add placeholder on input\"\n```\n\n\u003ca name=\"html\"\u003e\u003c/a\u003e\n## 2. HTML\n\nThe main influence for the HTML rules is the [Code Guide by @mdo](https://github.com/mdo/code-guide).\n\n### HTML Summary\n\n1. [HTML Syntax](#html-syntax)\n1. [HTML Comments](#html-comments)\n1. [HTML Character Encoding](#html-encoding)\n1. [HTML Attribute Order](#html-attribute-order)\n1. [HTML Performance](#html-performance)\n1. [HTML Base Code](#html-base)\n\n\u003ca name=\"html-syntax\"\u003e\u003c/a\u003e\n### 2.1. HTML Syntax\n\nUse soft tabs with two spaces. You can configure your editor for this.\n\n```html\n\u003c!-- Good --\u003e\n\u003cnav class=\"navbar\"\u003e\n  \u003cul class=\"nav\"\u003e\n    \u003cli class=\"nav-item\"\u003e\n      \u003ca class=\"nav-link\"\u003e\n\n\u003c!-- Bad--\u003e\n\u003cnav class=\"navbar\"\u003e\n      \u003cul class=\"nav\"\u003e\n            \u003cli class=\"nav-item\"\u003e\n                  \u003ca class=\"nav-link\"\u003e\n```\n\nAlways use double quotes.\n\n```html\n\u003c!-- Good --\u003e\n\u003cmain class=\"main\"\u003e\n\n\u003c!-- Bad--\u003e\n\u003cdiv class='main'\u003e\n```\n\nDon't include a `/` in self-closing elements.\n\n```html\n\u003c!-- Good --\u003e\n\u003chr\u003e\n\n\u003c!-- Bad--\u003e\n\u003chr /\u003e\n```\n\nSeparate block element by a blank line and agroup the inners block elements.\n\n```html\n\u003c!-- Good --\u003e\n\u003cul class=\"nav-tabs\"\u003e\n  \u003cli\u003e...\u003c/li\u003e\n  \u003cli\u003e...\u003c/li\u003e\n  \u003cli\u003e...\u003c/li\u003e\n  \u003cli\u003e...\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cdiv class=\"tab-content\"\u003e\n  ...\n\u003c/div\u003e\n\n\u003c!-- Bad--\u003e\n\u003cul class=\"nav-tabs\"\u003e\n\n  \u003cli\u003e...\u003c/li\u003e\n\n  \u003cli\u003e...\u003c/li\u003e\n\n  \u003cli\u003e...\u003c/li\u003e\n\n  \u003cli\u003e...\u003c/li\u003e\n\n\u003c/ul\u003e\n\u003cdiv class=\"tab-content\"\u003e\n  ...\n\u003c/div\u003e\n```\n\n\u003ca name=\"html-comments\"\u003e\u003c/a\u003e\n### 2.2. HTML Comments\n\nFollow this rule to add comments in HTML.\n\n```html\n\u003c!-- This is a good example --\u003e\n\u003c!-- /Closing a good example --\u003e\n```\n\n\u003ca name=\"html-encoding\"\u003e\u003c/a\u003e\n### 2.3. HTML Character Encoding\n\nAlways use UTF-8 for character encoding.\n\n```html\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n\u003c/head\u003e\n```\n\n\u003ca name=\"html-attribute-order\"\u003e\u003c/a\u003e\n### 2.4. HTML Attribute Order\n\nHTML attributes should be in this order for facilitate the reading.\n\n1. `class`\n1. `id`, `name`\n1. `data-*`\n1. `src`, `for`, `type`, `href`\n1. `title`, `alt`\n1. `aria-*`, `role`\n\n```html\n\u003ca class=\"...\" id=\"...\" data-modal=\"#overlay\" href=\"#\"\u003e\n\n\u003cinput class=\"form-control\" type=\"text\"\u003e\n\n\u003cimg class=\"img-rounded\" src=\"...\" alt=\"...\"\u003e\n```\n\n\u003ca name=\"html-performance\"\u003e\u003c/a\u003e\n### 2.5. HTML Performance\n\nNo need to specify a type when including CSS and JavaScript files as `text/css` and `text/JavaScript`.\n\n```html\n\u003c!-- Good --\u003e\n\u003clink rel=\"stylesheet\" href=\"assets/css/style.css\"\u003e\n\u003cscript src=\"scripts.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Bad --\u003e\n\u003clink rel=\"stylesheet\" href=\"assets/css/style.css\" type=\"text/css\"\u003e\n\u003cscript src=\"scripts.min.js\" type=\"text/JavaScript\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n```\n\nFor a better performance, all JavaScripts files must be at the end of the code. Before closing the `\u003cbody\u003e`.\n\n```html\n\u003c!-- Good --\u003e\n\u003cscript src=\"scripts.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\n\u003c!-- Bad --\u003e\n\u003cscript src=\"scripts.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n```\n\nAlways minify the code in projects only in HTML. Task builders like [Grunt](http://gruntjs.com/) leaves this easier.\n\n```html\n\u003c!-- Good --\u003e\n\u003chtml\u003e\u003chead\u003e...\u003c/head\u003e\u003cbody\u003e\u003cdiv class=\"container\"\u003e...\u003c/div\u003e\u003c/body\u003e\u003c/html\u003e\n\n\u003c!-- Bad --\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    ...\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv class=\"container\"\u003e\n      ...\n    \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003ca name=\"html-base\"\u003e\u003c/a\u003e\n### 2.6. HTML Base Code\n\nThe following code is a HTML base for faster start the projects.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003cmeta name=\"format-detection\" content=\"telephone=no\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"\u003e\n  \u003clink rel=\"shortcut icon\" href=\"assets/ico/favicon.ico\"\u003e\n  \u003clink rel=\"logo\" type=\"image/svg\" href=\"assets/img/logo/logo.svg\"\u003e\n  \u003clink rel=\"stylesheet\" href=\"assets/css/style.css\"\u003e\n  \u003ctitle\u003e\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nFor give support a olds Internet Explorer...\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003c!--[if IE]\u003e\u003c![endif]--\u003e\n\u003c!--[if IE 7 ]\u003e \u003chtml lang=\"en\" class=\"ie7\"\u003e    \u003c![endif]--\u003e\n\u003c!--[if IE 8 ]\u003e    \u003chtml lang=\"en\" class=\"ie8\"\u003e    \u003c![endif]--\u003e\n\u003c!--[if IE 9 ]\u003e    \u003chtml lang=\"en\" class=\"ie9\"\u003e    \u003c![endif]--\u003e\n\u003c!--[if (gt IE 9)|!(IE)]\u003e\u003c!--\u003e\u003chtml lang=\"en\"\u003e\u003c!--\u003c![endif]--\u003e\n\u003chead\u003e\n...\n```\n\n\u003ca name=\"Pug\"\u003e\u003c/a\u003e\n## 3. Pug\n\nCurrently using Pug like template engine.\n\n### Pug Summary\n\n1. [Pug Syntax](#Pug-syntax)\n1. [Pug Comments](#Pug-comments) \n1. [Pug Base Code](#Pug-base)\n\n\u003ca name=\"Pug-syntax\"\u003e\u003c/a\u003e\n### 3.1. Pug Syntax\n\nUse soft tabs with two spaces. You can configure your editor for this.\n\n```javascript\n//- Good\nnav.navbar\n  ul.nav\n    li.nav-item\n      a.nav-link\n\n//- Bad\nnav.navbar\n    ul.nav\n        li.nav-item\n            a.nav-link\n```\n\nAlways use single quotes.\n\n```javascript\n//- Good\nbutton.btn(data-component='collapse')\n\n//- Bad\nbutton.btn(data-component=\"collapse\")\n```\n \nInsert the title of block, separate block element by a **two** blanks lines and agroup the inners block elements.\n\n```javascript\n//- Good\n \n//- Header\n//- ===================================\nheader.header(role='banner')\n  a.logo(href='#', role='logo')\n\n\n//- Main\n//- ===================================\nmain.main(role='main')\n  section.content\n \n//- Bad\nheader.header(role='banner')\n  a.logo(href='#', role='logo') \nmain.main(role='main') \n  section.content\n```\n\n\u003ca name=\"Pug-comments\"\u003e\u003c/a\u003e\n### 3.2. Pug Comments\n\nFollow this rule to add comments in Pug.\n\n```javascript\n//- This is a good example \n\n// This is a bad example \n```\n\nThe comments using `//-` not is compiled on final code.\n  \n\u003ca name=\"Pug-base\"\u003e\u003c/a\u003e\n### 3.3. Pug Base Code\n\nThe following code is a Pug for faster start the projects.\n\n```javascript\ndoctype html\nhtml(lang='en')\n  head \n    meta(charset='utf-8')\n    meta(name='description', content='')\n    meta(name='viewport', content='width=device-width, initial-scale=1.0, user-scalable=no')\n    meta(name='format-detection', content='telephone=no')\n\n    //- Title\n    //- ===================================\n    title \n\n    //- Favicon and SVG logo\n    //- ===================================\n    link(rel='shortcut icon', href='ico/favicon.ico')  \n    link(rel='logo', type='image/svg', href='svg/logo/logo.svg')\n\n    //- Stylesheet and fonts\n    //- ===================================\n    link(href='css/style.css', rel='stylesheet')  \n\n  body \n```\n \n\n\u003ca name=\"css\"\u003e\u003c/a\u003e\n## 4. CSS\n\nThe main influences for the CSS rules are [Code Guide by @mdo](https://github.com/mdo/code-guide) and [idiomatic CSS](https://github.com/necolas/idiomatic-css/).\n\n### CSS Summary\n\n1. [CSS Syntax](#css-syntax)\n1. [CSS Declaration Order](#css-order)\n1. [CSS Class Name](#css-class-name)\n1. [CSS Performance](#css-performance)\n1. [CSS Media Queries](#css-media-queries) \n\n\u003ca name=\"css-syntax\"\u003e\u003c/a\u003e\n### 4.1. CSS Syntax\n\nUse soft tabs with two spaces. You can configure your editor for this.\n\n```css\n/* Good */\n.nav-item {\n  display: inline-block;\n  margin: 0 5px;\n}\n\n/* Bad */\n.nav-item {\n    display: inline-block;\n    margin: 0 5px;\n}\n```\n\nAlways use double quotes.\n\n```css\n/* Good */\n[type=\"text\"]\n[class^=\"...\"]\n\n.nav-item:after {\n  content: \"\";\n}\n\n/* Bad */\n[type='text']\n[class^='...']\n\n.nav-item:after {\n  content: '';\n}\n```\n\nInclude a single space before the opening bracket of a ruleset.\n\n```css\n/* Good */\n.header {\n  ...\n}\n\n/* Bad */\n.header{\n  ...\n}\n```\n\nInclude a single space after the colon of a declaration.\n\n```css\n/* Good */\n.header {\n  margin-bottom: 20px;\n}\n\n/* Bad */\n.header{\n  margin-bottom:20px;\n}\n```\n\nInclude a semi-colon at the end of the last declaration in a declaration block.\n\n```css\n/* Good */\n.header {\n  margin-bottom: 20px;\n}\n\n/* Bad */\n.header{\n  margin-bottom:20px\n}\n```\n\nKeep one declaration per line.\n\n```css\n/* Good */\n.selector-1,\n.selector-2,\n.selector-3 {\n  ...\n}\n\n/* Bad */\n.selector-1, .selector-2, .selector-3 {\n  ...\n}\n```\n\nSingle declarations should remain in one line.\n\n```css\n/* Good */\n.selector-1 { width: 50%; }\n\n/* Bad */\n.selector-1 {\n  width: 50%;\n}\n```\n\nSeparate each ruleset by a blank line.\n\n```css\n/* Good */\n.selector-1 {\n  ...\n}\n\n.selector-2 {\n  ...\n}\n\n/* Bad */\n.selector-1 {\n  ...\n}\n.selector-2 {\n  ...\n}\n```\n\nUse lowercase, shorthand hex values and avoid specifying units is zero-values.\n\n```css\n/* Good */\n.selector-1 {\n  color: #aaa;\n  margin: 0;\n}\n\n/* Bad */\n.selector-1 {\n  color: #AAAAAA;\n  margin: 0px;\n}\n```\n\n\u003ca name=\"css-order\"\u003e\u003c/a\u003e\n### 4.2. CSS Declaration Order\n\nThe declarations should be added in alphabetical order.\n\n```css\n/* Good */\n.selector-1 {\n  background: #fff;\n  border: #333 solid 1px;\n  color: #333;\n  display: block;\n  height: 200px;\n  margin: 5px;\n  padding: 5px;\n  width: 200px;\n}\n\n/* Bad */\n.selector-1 {\n  padding: 5px;\n  height: 200px;\n  background: #fff;\n  margin: 5px;\n  width: 200px;\n  color: #333;\n  border: #333 solid 1px;\n  display: block;\n}\n```\n\n\u003ca name=\"css-class-name\"\u003e\u003c/a\u003e\n### 4.3. CSS Class Name\n\nKeep class lowercase and use dashes to separate the classname.\n\n```css\n/* Good */\n.page-header { ... }\n\n/* Bad */\n.pageHeader { ... }\n.page_header { ... }\n```\n\nUse single dash to element name, double underline to element block and double dash to style modification.\n\n```css\n/* Good */\n.page-header__action { ... }\n.page-header__action__title { ... }\n.page-header--active { ... }\n\n.btn { ... }\n.btn--primary { ... }\n\n/* Bad */\n.page-header-action { ... }\n.page-header-action-title { ... }\n.page-header-active { ... }\n\n.btn { ... }\n.btn-primary { ... }\n```\n\nDashes and underline serve as natural breaks in related class. Prefix class based on the closest parent or base class.\n\n```css\n/* Good */ \n.nav { ... }\n.nav__item { ... }\n.nav__link { ... }\n\n/* Bad */\n.item-nav { ... }\n.link-nav { ... }\n```\n\nAvoid giving too short names for class and always choose meaningful names that provide the class function.\n\n```css\n/* Good */\n.btn { ... }\n.page-header { ... }\n.progress-bar { ... }\n\n/* Bad */\n.s { ... }\n.ph { ... }\n.block { ... }\n```\n\n\u003ca name=\"css-performance\"\u003e\u003c/a\u003e\n### 4.4. CSS Performance\n\nNever use IDs.\n\n```css\n/* Good */\n.header { ... }\n.section { ... }\n\n/* Bad */\n#header { ... }\n#section { ... }\n```\n\nDo not use selectors standards for not generic rules, always preferably for class.\n\n```css\n/* Good */\n.form-control { ... }\n.header { ... }\n.section { ... }\n\n/* Bad */\ninput[type=\"text\"] { ... }\nheader\nsection\n```\n\nAvoid nesting elements, the preference is always to use class.\n\n```css\n/* Good */\n.navbar { ... }\n.nav { ... }\n.nav__item { ... }\n.nav__link { ... }\n\n/* Bad */\n.navbar ul { ... }\n.navbar ul li { ... }\n.navbar ul li a { ... }\n```\n\nNest only when need change the class comportament with interference for other class. Keep the nested on max of three elements.\n\n```css\n/* Good */\n.modal-footer .btn { ... }\n.progress.active .progress-bar { ... }\n\n/* Bad */\n.modal-btn { ... }\n.progress.active .progress-bar .progress-item span { ... }\n```\n\nAlways minify the CSS code. Task builders like [Grunt](http://gruntjs.com/) leaves this easier.\n\n```css\n\u003c!-- Good --\u003e\n.navbar { ... }.nav { ... }.nav-item { ... }.nav-link { ... }\n\n\u003c!-- Bad --\u003e\n.nav-item {\n  ...\n}\n.nav-link {\n  ...\n}\n```\n\n\u003ca name=\"css-media-queries\"\u003e\u003c/a\u003e\n### 4.5 CSS Media Queries\n\nStart the development with generic rules with and add media queries with mobile first.\n\n```css\n/* Good */\n.navbar {\n  margin-bottom: 20px;\n}\n\n@media (min-width: 480px) {\n  .navbar {\n    padding: 10px;\n  }\n}\n\n@media (min-width: 768px) {\n  .navbar {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n}\n\n@media (min-width: 992px) {\n  .navbar {\n    position: fixed;\n  }\n}\n\n/* Bad */\n.navbar {\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n\n@media (max-width: 767px) {\n  .navbar {\n    position: static;\n    padding: 10px;\n  }\n}\n\n```\n\nKeep the media queries as close to their relevant rule sets whenever possible. Don't bundle them all in a separate stylesheet or at the end of the document.\n\n```css\n.navbar { ... }\n.nav { ... }\n.nav-item { ... }\n\n@media (min-width: 480px) {\n  .navbar { ... }\n  .nav { ... }\n  .nav-item { ... }\n}\n```\n\n\u003ca name=\"css-preprocessors\"\u003e\u003c/a\u003e\n## 5. CSS Preprocessors\n\nI use pre-processors in all projects. Today I use **Stylus**, but some projects use `LESS`.\n\n### CSS Preprocessors Summary\n\n1. [CSS Preprocessors Syntax](#preprocessors-syntax)  \n1. [CSS Preprocessors Performance](#preprocessors-performance) \n1. [CSS Preprocessors Media Queries](#preprocessors-media-queries) \n1. [CSS Preprocessors Comments](#preprocessors-comments)\n\n\n\u003ca name=\"preprocessors-syntax\"\u003e\u003c/a\u003e\n### 5.1. CSS Preprocessors Syntax\n\nUse soft tabs with two spaces. You can configure your editor for this.\n\n```css\n// Good\n.nav-item \n  display inline-block  \n\n// Bad\n.nav-item \n    display inline-block  \n```\n\nDo not use semi-colons, commas or brackets\n\n```css\n// Good\n.header \n  position fixed\n  top 0\n  right 0\n  left 0\n\n// Bad\n.header {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n}\n``` \n\nKeep one declaration per line.\n\n```css\n// Good\n.selector-1,\n.selector-2,\n.selector-3 \n  ...\n \n\n// Bad\n.selector-1, .selector-2, .selector-3 \n  ... \n``` \n\nSeparate nested ruleset by a blank line and blocks ruleset by a double blank line.\n\n```css\n// Good\n.navbar \n  margin 0 0 20px\n\n  li \n    display inline-block\n\n\n.nav \n  display block\n\n  li \n    float left\n\n\n// Bad\n.navbar \n  margin 0 0 20px \n  li \n    display inline-block \n.nav \n  display block \n  li \n    float left\n``` \n\nUse **$** for the variables.\n\n```css\n// Good\n$gray-darker  = #111\n$gray-dark    = #393C45\n$gray         = #555\n$gray-light   = #aaa\n$gray-lighter = #ECF1F5\n$gray-white   = #fbfbfb\n```\n\n\u003ca name=\"preprocessors-performance\"\u003e\u003c/a\u003e\n### 5.2. CSS Preprocessors Performance\n\nWarning with nesting rules of preprocessors. Continue keep without nesting.\n\n```css\n// Good\n.nav-item \n  ...\n\n// Bad\n.navbar \n  .nav \n    .nav-item \n      ... \n```\n\n**Do not use @extends**, [always use mixins](http://csswizardry.com/2016/02/mixins-better-for-performance/).\n\n```css\nreset(arg = '')\n  \n  if (arg == list) \n    margin 0\n    padding-left 0\n    list-style none\n    \n  if (arg == form)  \n    background 0\n    border 0\n    padding 0\n\n.nav\n  reset(list)\n\n.btn\n  reset(form)\n```\n \n\u003ca name=\"preprocessors-media-queries\"\u003e\u003c/a\u003e\n### 5.3. CSS Preprocessors Media Queries\n\nProvide the media queries rules inside the element.\n\n```css \n.navbar \n  position absolute\n  top 5px\n  z-index 5\n   \n  @media (min-width $screen-sm) \n    position fixed\n    margin-right $space-sm\n  \n  @media (min-width $screen-md)  \n    right 0 \n    top 10px \n```\n \n\u003ca name=\"preprocessors-comments\"\u003e\u003c/a\u003e\n### 5.4. CSS Preprocessors Comments\n\nProvide one summary on header of files.\n\n```css \n//  \n// Variables\n//\n// 1. Colors\n// 2. Spaces \n// 3. Media Queries \n// 4. Typography\n//\n// ==================================================\n\n// \n// 1. Colors\n// --------------------------------------------------\n\n...\n\n// \n// 2. Spaces\n// --------------------------------------------------\n\n...\n```\n\nFor main element. \n\n```css  \n// \n// 1. Header\n// -------------------------------------------------- \n... \n```\n\nFor children elements. \n\n```css   \n// 1.1 Header Item\n// -------------------------------------------------- \n...\n```\n\nFor generic comments\n\n```css   \n// Simple comment\n\n// Block\n// Comment\n...\n``` \n\n\u003ca name=\"js\"\u003e\u003c/a\u003e\n## 6. JavaScript\n\nThe main influences for the JavaScript rules are [idiomatic.js](https://github.com/rwldrn/idiomatic.js/) and [Zeno Rocha Coding Style](https://github.com/zenorocha/my-coding-style/).\n\n### JavaScript Summary\n\n1. [JavaScript Syntax](#js-syntax)\n1. [JavaScript Variables](#js-variables)\n1. [JavaScript Performance](#js-performance)\n1. [JavaScript and HTML5 Data Attributes](#js-data-attributes)\n1. [JavaScript Comments](#js-comments)\n\n\u003ca name=\"js-syntax\"\u003e\u003c/a\u003e\n### 6.1. JavaScript Syntax\n\nUse soft tabs with two spaces. You can configure your editor for this.\n\n```js\n// Good\nwhile (condition) {\n  statements\n}\n\n// Bad\nwhile (condition) {\n    statements\n}\n```\n\nAlways use semicolons.\n\n```js\n// Good\nvar me = $(this);\ntest();\n\n// Bad\nvar me = $(this)\ntest()\n```\n\nAlways use single quotes.\n\n```js\n// Good\nvar string = '\u003cp class=\"foo\"\u003eLorem Ipsum\u003c/p\u003e';\nvar noteClick = me.attr('data-note');\n\n// Bad\nvar string = \"\u003cp class='foo'\u003eLorem Ipsum\u003c/p\u003e\";\nvar noteClick = me.attr(\"data-note\");\n```\n\nKeep `else` in the same line of closure of the `if`.\n\n```js\n// Good\nif ( true ) {\n  ...\n} else {\n  ...\n}\n\n// Bad\nif ( true ) {\n  ...\n}\nelse {\n  ...\n}\n```\n\nAdd spaces between operators.\n\n```js\n// Good\nfor (i = 0; i \u003c 10; i++) {\n  ...\n}\n\n// Bad\nfor (i=0;i\u003c10;i++) {\n  ...\n}\n```\n\nNever add a space between the keyword function and the function name.\n\n```js\n// Good\nfoo(function() {\n  ...\n});\n\n// Bad\nfoo ( function () {\n  ...\n});\n```\n\nAdd spaces outside parentheses `()` but avoid it inside.\n\n```js\n// Good\nif (condition) {\n  statement\n}\n\n// Bad\nif( condition ){\n  statement\n}\n```\n\nFor conditionals always use curly brackets `{}`.\n\n```js\n// Good\nif (condition) {\n  statement\n} else if (condition) {\n  statement\n} else {\n  statement\n}\n\n// Bad\nif (condition) statement;\nelse if (condition) statement;\nelse statement;\n```\n\nFor strict equality checks `===` should be used in favor of `==`.\n\n```js\n// Good\nif (foo === 'foo') {\n  statement\n}\n\n// Bad\nif (foo == 'foo') {\n  statement\n}\n```\n\n\u003ca name=\"js-variables\"\u003e\u003c/a\u003e\n### 6.2. JavaScript Variables\n\nAll variables should be declared before used.\n\n```js\n// Good\nvar me = $(this);\nvar noteClick = me.attr('data-note');\nnotes[noteClick].play();\n\n// Bad\nnotes[noteClick].play();\nvar me = $(this);\nvar noteClick = me.attr('data-note');\n```\n\nAlways use `var` to declare variables.\n\n```js\n// Good\nvar me = $(this);\n\n// Bad\nme = $(this);\n```\n\n\u003ca name=\"js-performance\"\u003e\u003c/a\u003e\n### 6.3. JavaScript Performance\n\nUse [JSHint](http://www.jshint.com/) to detect errors and potential problems.\n\nAlways minify and concat the JavaScript code. Task builders like [Grunt](http://gruntjs.com/) leaves this easier.\n\n\u003ca name=\"js-data-attributes\"\u003e\u003c/a\u003e\n### 6.4. JavaScript and HTML5 Data Attributes\n\nAvoid using classes to start in a JavaScript interaction. To do so, use ***HTML5 Data Attributes***.\n\n```js\n// Good\n$('[data-component=\"tab\"]');\n\n// Bad\n$('.tab');\n```\n\nThis approach makes the classes are only responsible for styling.\n\nThus elements that share the same style, but do not have the same interaction, may function separately.\n\n\u003ca name=\"js-comments\"\u003e\u003c/a\u003e\n### 6.5. JavaScript Comments\n\nA single line above the code that is commented.\n\n```js\n// Good\n// Good example of comment\nvar me = $(this);\n\n// Bad\nvar me = $(this); // Bad example of comment\n```\n\n\u003ca name=\"boilerplate\"\u003e\u003c/a\u003e\n## 7. Boilerplate\n\nI have a boilerplate using this coding style. \n\n\u003cp\u003e\n  \u003cimg src=\"https://cloud.githubusercontent.com/assets/3603793/14390922/a999424c-fd8f-11e5-8fbb-ab908a1d4740.png\" width=\"100\"\u003e\n\u003c/p\u003e\n\nIt's call [Kratos Boilerplate](https://github.com/LFeh/kratos-boilerplate).\n\n\u003ca name=\"references\"\u003e\u003c/a\u003e\n## 8. References\n\n* [Code Guide by @mdo](https://github.com/mdo/code-guide)\n* [idiomatic CSS](https://github.com/necolas/idiomatic-css/)\n* [idiomatic.js](https://github.com/rwldrn/idiomatic.js/)\n* [Zeno Rocha Coding Style](https://github.com/zenorocha/my-coding-style/)\n* [Airbnb JavaScript Style Guide](https://github.com/airbnb/JavaScript)\n\n\u003ca name=\"translations\"\u003e\u003c/a\u003e\n## 9. Translations\n\n* [Português (Brasil)](/translations/pt-BR/)\n* [Russian (by Vbifonixor)](https://github.com/vbifonixor/coding-style) \n","funding_links":[],"categories":["Others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelipefialho%2Fcoding-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffelipefialho%2Fcoding-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelipefialho%2Fcoding-style/lists"}