Name	Name	Last commit message	Last commit date
parent directory ..
README.md	README.md

Meu Estilo de Código

"Toda linha de código deve parecer que foi escrita por uma única pessoa, não importa a quantidade de contribuidores." - Provérbio Chinês

O documento a seguir descreve as regras de escrita nas linguagens de desenvolvimento que utilizo: HTML, CSS e Javascript.

A ideia desse repositório é ter um local para que eu e outros desenvolvedores que participem dos meus projetos conseguirem se informar dos padrões de códigos usados.

Como este é um novo documento, algumas regras podem não ter sido aplicadas em projetos antigos.

Este é um documento vivo e mudanças podem acontecer a qualquer momento.

Sumário

[Commits] (#commits)
[HTML] (#html)
[CSS] (#css)
[Javascript] (#js)
Referências
Traduções
Licença

1. Commits

Para facilitar a contribuição de qualquer pessoa nos projetos, todas as mensagens de commit, pull requests ou discussões devem ser em Inglês.

Antes de commitar ajustes no projeto, verifique se existe uma issue aberta e faça referência a ela usando '#' na sua mensagem de commit.

// Bom
git commit -m "Add placeholder in input #10"

// Ruim
git commit -m "Add placeholder in input"

2. HTML

A principal influencia das regras de HTML é o Code Guide by @mdo.

HTML Sumário

[HTML Sintaxe] (#html-syntax)
[HTML Comentários] (#html-comments)
[HTML Encoding de Caractéres] (#html-encoding)
[HTML Ordem dos Atributos] (#html-attribute-order)
[HTML Performance] (#html-performance)
[HTML Código Base] (#html-base)

2.1. HTML Sintaxe

Use soft-tabs com dois espaços. Você pode configurar o seu editor dessa forma.

<!-- Bom -->
<nav class="nav">
  <ul class="nav-menu">
    <li class="nav-item">
      <a class="nav-link">

<!-- Ruim -->
<nav class="nav">
      <ul class="nav-menu">
            <li class="nav-item">
                  <a class="nav-link">

Sempre use aspas duplas.

<!-- Bom -->
<div class="main">

<!-- Ruim -->
<div class='main'>

Não inclua / em elementos viúvos.

<!-- Bom -->
<hr>

<!-- Ruim -->
<hr />

Separe os blocos usando uma linha em branco e agrupe os elementos internos do bloco.

<!-- Bom -->
<ul class="nav-tabs">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

<div class="tab-content">
  ...
</div>

<!-- Ruim -->
<ul class="nav-tabs">

  <li>...</li>

  <li>...</li>

  <li>...</li>

  <li>...</li>

</ul>
<div class="tab-content">
  ...
</div>

2.2. HTML Comentários

Siga esta regra para adicionar comentários no HTML

<!-- Este é um bom exemplo -->
<!-- /Fechando um bom exemplo -->

2.3. HTML Encoding de Caractéres

Sempre use UTF-8 para encoding de caractéres.

<head>
  <meta charset="UTF-8">
</head>

2.4. HTML Ordem dos Atributos

Os atributos do HTML devem estar na seguinte ordem para facilitar a leitura.

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

<a class="..." id="..." data-modal="toggle" href="#">

<input class="form-control" type="text">

<img class="img-rounded" src="..." alt="...">

2.5. HTML Performance

Nos includes dos arquivos CSS e Javascript não é necessário especificar o tipo de arquivo como text/css e `text/javascript.

<!-- Bom -->
<link rel="stylesheet" href="assets/css/style.css" />
<script src="scripts.min.js"></script>

<!-- Bad -->
<script src="scripts.min.js"></script>
</head>
<body>

Para uma melhor performance, todos os arquivos javascripts devem estar antes de fechar o <body>, no fim do documento.

<!-- Bom -->
<script src="scripts.min.js"></script>
</body>

<!-- Bad -->
<script src="scripts.min.js"></script>
</head>
<body>

Quando o projeto usar apenas HTML, sempre minifique o código. Automatizadores de tarefas como o Grunt tornam isso muito mais fácil.

<!-- Bom -->
<html><head>...</head><body><div class="container">...</div></body></html>

<!-- Bad -->
<html>
  <head>
    ...
  </head>
  <body>
    <div class="container">
      ...
    </div>
  </body>
</html>

2.6. HTML Código Base

O código a seguir é uma base em HTML para iniciar rápidamente os projetos.

<!DOCTYPE html>
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width">

<link rel="shortcut icon" href="assets/img/ico/favicon.ico" />
<link rel="logo" type="image/svg" href="../assets/img/logo/logo.svg" />
<link rel="stylesheet" href="assets/css/style.css" />

<title></title>

</head>
<body>

<!-- Scripts -->
<script src="assets/js/scripts.min.js"></script>

</body>
</html>

Para fornecer suporte para versões antigas do Internet Explorer...

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7">    <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
...

3. CSS

The main influences for the CSS rules are Code Guide by @mdo and idiomatic CSS.

CSS Sumário

[CSS Syntax] (#css-syntax)
[CSS Declaration Order] (#css-order)
[CSS Class Name] (#css-class-name)
[CSS Performance] (#css-performance)
[Mobile First and Media Queries] (#mobile-first-and-media-queries)
[Pre-Processors] (#css-pre-processors)
[CSS Comments] (#css-comments)

3.1. CSS Syntax

Use soft tabs with two spaces. You can configure your editor for this.

/* Good */
.nav-item {
  display: inline-block;
  margin: 0 5px;
}

/* Bad */
.nav-item {
    display: inline-block;
    margin: 0 5px;
}

Always use double quotes.

/* Good */
[type="text"]
[class^="..."]

.nav-item:after {
  content: "";
}

/* Bad */
[type='text']
[class^='...']

.nav-item:after {
  content: '';
}

Include a single space before the opening brace of a ruleset.

/* Good */
.header {
  ...
}

/* Bad */
.header{
  ...
}

Include a single space after the colon of a declaration.

/* Good */
.header {
  margin-bottom: 20px;
}

/* Bad */
.header{
  margin-bottom:20px;
}

Include a semi-colon at the end of the last declaration in a declaration block.

/* Good */
.header {
  margin-bottom: 20px;
}

/* Bad */
.header{
  margin-bottom:20px
}

Keep one declaration per line.

/* Good */
.selector-1,
.selector-2,
.selector-3 {
  ...
}

/* Bad */
.selector-1, .selector-2, .selector-3 {
  ...
}

Single declarations should remain in one line.

/* Good */
.selector-1 { width: 50%; }

/* Bad */
.selector-1 {
  width: 50%;
}

Separate each ruleset by a blank line.

/* Good */
.selector-1 {
  ...
}

.selector-2 {
  ...
}

/* Bad */
.selector-1 {
  ...
}
.selector-2 {
  ...
}

Use lowercase and shorthand hex values and avoid specifying units is zero-values.

/* Good */
.selector-1 {
  color: #aaa;
  margin: 0;
}

/* Bad */
.selector-1 {
  color: #AAAAAA;
  margin: 0px;
}

3.2. CSS Declaration Order

The declarations should be added in alphabetical order.

/* Good */
.selector-1 {
  background: #fff;
  border: #333 solid 1px;
  color: #333;
  display: block;
  height: 200px;
  margin: 5px;
  padding: 5px;
  width: 200px;
}

/* Bad */
.selector-1 {
  padding: 5px;
  height: 200px;
  background: #fff;
  margin: 5px;
  width: 200px;
  color: #333;
  border: #333 solid 1px;
  display: block;
}

3.3. CSS Class Name

Keep classes lowercase and use dashes.

/* Good */
.nav-item { ... }

/* Bad */
.NavItem { ... }
.nav_item { ... }

Dashes serve as natural breaks in related class. Prefix classes based on the closest parent or base class.

/* Good */
.navbar { ... }
.nav { ... }
.nav-item { ... }
.nav-link { ... }

/* Bad */
.item-nav { ... }
.link-nav { ... }

Avoid giving too short names for class and always choose meaningful names that provide the class function.

/* Good */
.btn { ... }
.page-header { ... }
.progress-bar { ... }

/* Bad */
.s { ... }
.ph { ... }
.block { ... }

3.4. CSS Performance

Never use IDs.

/* Good */
.header { ... }
.section { ... }

/* Bad */
#header { ... }
#section { ... }

Do not use selectors standards for not generic rules, always preferably for class.

/* Good */
.form-control { ... }
.header { ... }
.section { ... }

/* Bad */
input[type="text"] { ... }
header
section

Avoid nesting elements, the preference is always to use classes.

/* Good */
.navbar { ... }
.nav { ... }
.nav-item { ... }
.nav-link { ... }

/* Bad */
.navbar ul { ... }
.navbar ul li { ... }
.navbar ul li a { ... }

Nest only when need change the class comportament with interference for other class. Keep the nested on max of three elements.

/* Good */
.modal-footer .btn { ... }
.progress.active .progress-bar { ... }

/* Bad */
.modal-btn { ... }
.progress.active .progress-bar .progress-item span { ... }

Always minify the CSS code. Task builders like Grunt leaves this easier.

<!-- Bom -->
.navbar { ... }.nav { ... }.nav-item { ... }.nav-link { ... }

<!-- Bad -->
.nav-item {
  ...
}
.nav-link {
  ...
}

3.5 Mobile First and Media Queries

Start the development with generic rules with and add media queries with mobile first.

/* Good */
.navbar {
  margin-bottom: 20px;
}

@media (min-width: 480px) {
  .navbar {
    padding: 10px;
  }
}

@media (min-width: 768px) {
  .navbar {
    position: absolute;
    top: 0;
    left: 0;
  }
}

@media (min-width: 992px) {
  .navbar {
    position: fixed;
  }
}

/* Bad */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
}

@media (max-width: 767px) {
  .navbar {
    position: static;
    padding: 10px;
  }
}

Keep 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.

.navbar { ... }
.nav { ... }
.nav-item { ... }

@media (min-width: 480px) {
  .navbar { ... }
  .nav { ... }
  .nav-item { ... }
}

3.6. Pre-Processors

I use pre-processors in all projects. Today I use LESS.

Warning with nesting rules of pre-processors. Continue keep without nesting.

/* Good */
.nav-item { ... }

/* Bad */
.navbar {
  .nav {
    .nav-item {
      ...
    }
  }
}

Provide generic names with variables.

/* Good */
@brand-primary: #049cdb;

/* Bad */
@color-blue: #049cdb;

3.7. CSS Comments

All comments must be made using the syntax of the preprocessor in use.

//
// Section
// --------------------------------------------------

// Sub-section
// --------------------------------------------------

//
// Commentary block
//
//

// Commentary

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

pt-BR

pt-BR

README.md

Meu Estilo de Código

Sumário

1. Commits

2. HTML

HTML Sumário

2.1. HTML Sintaxe

2.2. HTML Comentários

2.3. HTML Encoding de Caractéres

2.4. HTML Ordem dos Atributos

2.5. HTML Performance

2.6. HTML Código Base

3. CSS

CSS Sumário

3.1. CSS Syntax

3.2. CSS Declaration Order

3.3. CSS Class Name

3.4. CSS Performance

3.5 Mobile First and Media Queries

3.6. Pre-Processors

3.7. CSS Comments

4. Javascript

5. Referências

6. Traduções

7. Licença

Files

pt-BR

Directory actions

More options

Directory actions

More options

Latest commit

History

pt-BR

Folders and files

parent directory

README.md

Meu Estilo de Código

Sumário

1. Commits

2. HTML

HTML Sumário

2.1. HTML Sintaxe

2.2. HTML Comentários

2.3. HTML Encoding de Caractéres

2.4. HTML Ordem dos Atributos

2.5. HTML Performance

2.6. HTML Código Base

3. CSS

CSS Sumário

3.1. CSS Syntax

3.2. CSS Declaration Order

3.3. CSS Class Name

3.4. CSS Performance

3.5 Mobile First and Media Queries

3.6. Pre-Processors

3.7. CSS Comments

4. Javascript

5. Referências

6. Traduções

7. Licença