Código limpo: por que o HTML/CSS Essentials ainda é importante

Durante meus 15 anos de experiência em desenvolvimento web, trabalhei com várias empresas, de nível empresarial a startups, e trabalhei com muitos colegas engenheiros de software ao longo do caminho. Um dos problemas mais comuns e importantes que encontrei em meus projetos foi a falha em escrever código limpo e fácil de entender .

Mesmo os melhores desenvolvedores de empresas de primeira linha nem sempre seguem as melhores práticas e escrevem códigos que podem ser limpos e otimizados.

As consequências do código bagunçado e sujo

Para citar uma postagem de blog antiga, mas ainda relevante, discutindo princípios de código limpo:

O código-fonte é semelhante à dívida financeira. Suponha que você queira comprar uma casa para morar. A maioria das pessoas não tem recursos financeiros para pagar em dinheiro por uma casa, então você faz uma hipoteca. Mas a hipoteca em si não é uma grande coisa para se ter. É uma responsabilidade. Você tem que pagar juros sobre sua dívida todos os meses…

Assim também no desenvolvimento web. O código tem custos contínuos. Você tem que entendê-lo, você tem que mantê-lo, você tem que adaptá-lo a novos objetivos ao longo do tempo. Quanto mais código você tiver, maiores serão os custos contínuos. É do nosso interesse ter o mínimo de código-fonte possível e, ao mesmo tempo, cumprir nossas metas de negócios.

Mas não vamos nos deter no abstrato. Este artigo abordará princípios essenciais de código limpo, diferentes técnicas usadas para organizar código e como torná-lo mais sustentável, escalável e fácil de depurar.

O código de qualidade começa com o estilo básico de código, expandindo para as práticas recomendadas ao escrever aplicativos grandes em HTML/CSS com muitos blocos reutilizáveis, e também discutiremos as convenções de nomenclatura para criar maior legibilidade implícita, bem como estruturas de terceiros e suas práticas recomendadas.

Quando terminar de ler isso, você deve ter um bom entendimento dos conceitos básicos de código de qualidade e como tornar seu código HTML e CSS mais fácil de manter e estender.

Fundamentos de estilo de código

Vamos começar com o básico de um bom código HTML e CSS: validade W3C, convenções de nomenclatura, estrutura de arquivos e assim por diante.

Esteja atento à estrutura desde o primeiro dia.

Se você for desenvolver um grande aplicativo, precisará cuidar da estrutura de arquivos. Pode, ou melhor, deve ser assim:

Use validadores para verificar seu código.

Tente sempre usar validadores de HTML e CSS.

Código incorreto:

 <figure> <div> <img src="demo.jpg" alt=""> <figcaption> <h2>Hello world</h2> </figcaption> </div> </figure> <picture> <source src="demo.webp" type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <header> <summary>Expand details</summary> </header> <p>All content goes here</p> </details>

 p { font: 400 inherit/1.125 serif; }

Bom código:

 <figure> <img src="demo.jpg" alt=""> <!-- figcaption should be child of element figure element, not div --> <figcaption> <h2>Hello world</h2> </figcaption> </figure> <picture> <!-- source should have srcset attribute --> <source type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <!-- summary is not allowed as child of header --> <summary>Expand details</summary> <p>All content goes here</p> </details>

 p { font-weight: 400; font-size: inherit; line-height: 1.125; font-family: serif; }

Use texto alternativo nas tags <img> para validar os princípios de código limpo.

Esse atributo desempenha um papel vital para SEO, mecanismos de pesquisa, rastreadores da Web, leitores de tela etc.

Código incorreto:

 <img src="demo.jpg">

Bom código:

 <img src="demo.jpg" alt="This is placeholder of the image">

Use kebab-case (espinal-case).

Para nomes, tente usar kebab-case ( spinal-case ) e não use camelCase ou under_score . Use under_score apenas ao usar o BEM, embora se você estiver usando o Bootstrap, é melhor manter a consistência e seguir - como um delimitador.

Código incorreto:

 <section class="section_featured_Listing"> <h1 class="largeTitle">H1 title</h1> </section>

Bom código:

 <section class="section-featured-listing"> <h1 class="large-title">H1 title</h1> </section>

kebab-case é mais legível que camelCase e under_score .

Use nomes significativos que possam ser entendidos por qualquer pessoa, mantenha-os curtos.

Os nomes das classes devem se parecer com .noun-adjective .

Tente usar nomes comuns de classes em vez de escrever nomes específicos de conteúdo. Torna o código mais legível

Código incorreto:

 <div class="team-wrapper"> <button class="large-button-green"></button> <p class="greenText-john-smith-description"></p> <div class="white-bg"></div> </div>

Bom código:

 <div class="section-team"> <button class="btn-lg btn-success"></button> <p class="text-success"></p> <div class="bg-white"></div> </div>

Não escreva atributos de tipo para folhas de estilo e script em HTML5.

Eles não são exigidos com HTML5, mas são exigidos pelos padrões W3C em HTML4/XHTML.

Código incorreto:

 <link type="text/css" rel="stylesheet" href="../styles.css"> <script type="text/javascript" src="..//main.js"></script>

Bom código:

 <link rel="stylesheet" href="styles.css"> <script src="app.js"></script>

Use classes específicas quando necessário.

Mantenha o seletor CSS mais específico e selecione os elementos que você precisa; tente não mencionar seus pais, se não for necessário. Isso permitirá que o código seja renderizado mais rapidamente e remova quaisquer obstáculos de gerenciamento no futuro

Código incorreto:

 section aside h1 span { margin-left: 25%; }

Bom código:

 .left-offset { margin-left: 25%; }

Embora a aplicação de uma classe ao elemento alvo possa criar mais código dentro do HTML, isso permitirá que o código seja renderizado mais rapidamente e removerá quaisquer obstáculos de gerenciamento.

Adicione uma classe ao elemento pai se quiser dar outro estilo ao mesmo bloco.

Se você precisar usar o mesmo bloco, mas com estilo diferente, tente manter o HTML o mais intocado possível. Basta adicionar uma classe ao elemento pai e aplicar todos os novos estilos aos filhos dessa classe em CSS.

Código incorreto:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”another-article”> <h1 class=”other-styling-title”>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } } .another-article { padding-bottom: 30px; border-bottom: 4px solid #ccc; } h1.other-styling-title { font-size: 20px; }

Bom código:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”other-styling”> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } &.other-styling { padding-bottom: 30px; border-bottom: 4px solid #ccc; /* you will have less classes */ h1 { font-size: 20px; } } }

Solte unidades de valores zero.

Adicionar a unidade é desnecessário e não fornece nenhum valor adicional. Não há diferença entre 0px, 0em, 0% ou qualquer outro valor zero. As unidades não são importantes porque o valor ainda é zero.

Código incorreto:

 div { margin: 20px 0px; letter-spacing: 0%; padding: 0px 5px; }

Bom código:

 div { margin: 20px 0; letter-spacing: 0; padding: 0 5px; }

Não escreva border-bottom em CSS se você puder adicionar uma tag hr .

Use a tag hr em vez de escrever um novo seletor e adicionar estilos de borda em CSS. Isso torna o código mais baseado em marcação, e é isso que buscamos.

Código incorreto:

 <p class="border-bottom">I want this section to have a border.</p> <p>Lorem ipsum</p>

 .border-bottom { border-bottom: 1px solid #000; }

Bom código:

 <p>I want this section to have a border.</p> <hr> <p>Lorem ipsum</p> // If necessary change hr variable in bootstrap

Use o seletor A > B.

É muito útil usar o seletor A > B , que aplica regras apenas para direcionar o(s) filho(s), nesse caso você não terá que redefinir os estilos de todos os outros filhos que não precisam desse estilo. Por exemplo, é muito útil ao codificar menus aninhados. Você não precisará redefinir os estilos de submenu.

Código incorreto:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul li { list-style-type: none; } li ul li { /* redefine to default value */ list-style-type: disc; }

Bom código:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul > li { list-style-type: none; }

Como escrever HTML limpo

Passando para o HTML, a prioridade será garantir um front-end robusto e fácil de manter.

Tente ter um front-end que seja o mais baseado em marcação possível.

Faça seu código front-end baseado em marcação em vez de escrever muito CSS.

Isso ajudará os mecanismos de pesquisa e tornará seu código mais legível, melhorando potencialmente as classificações de pesquisa e a experiência do usuário.

Código incorreto:

 <div class="main-content"> <p class="content-title">Main text title</p> <img src="http://via.placeholder.com/150x150" alt="example"> <p class="image-description">Here is image description</p> </div>

Bom código:

 <main> <h1>Main text title</h1> <figure> <img src="http://via.placeholder.com/150x150" alt="example"> <figcaption> Here is image description </figcaption> </figure> </main>

Evite usar wrappers desnecessários em HTML.

Tente não usar elementos wrapper desnecessários em HTML. Ter toneladas de elementos <div> e <span> é coisa do passado. Manter as coisas granulares e lineares permite que você obtenha um código mínimo (veja o próximo ponto).

Código incorreto:

 <section class=”container”> <div class=”row”> <div class=”col-xs-12”> <div class=”inner-wrapper”> <span>Unnecessary br tags</span> </div> </div> </div> </section>

Bom código:

 <section class=”container”> <p>Unnecessary br tags</p> </section>

Use classes atômicas para estilizar.

Não use cores ou tamanhos de fonte personalizados (se a cor ou o tamanho da fonte não estiver na estrutura, basta adicionar suas classes atômicas). As classes atômicas são unidades de estilo simples e de propósito único. Assim como os estilos embutidos, os estilos atômicos aplicam apenas uma única declaração de estilo.

Código incorreto:

 <h1>Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 h1 { color: red; } section > h1 { color: blue; }

Bom código:

 <h1 class="text-red">Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1 class="text-blue"> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 .text-red { color: red; } .text-blue { color: blue; }

Tente manter classes granulares e atômicas e use-as quando necessário. Seu front-end se tornará mais baseado em marcação como resultado.

Faça uso de elementos semânticos.

O uso de semântica fornece uma estrutura melhor e torna o código e o conteúdo mais fáceis de ler.

Código incorreto:

 <span class="heading"><strong>Welcome</strong></span> <span>This is unnecessary br tag.</span>

Bom código:

 <h1>Welcome</h1> <p>This is unnecessary br tag.</p>

Use tags HTML5.

As novas tags proporcionam maior liberdade de expressão e padronização de elementos comuns, o que melhora o processamento automatizado de documentos. Aqui está uma lista sólida de todos os elementos. Descobri que muitos desenvolvedores sempre usam muito <div> e <span> , mas primeiro verifique aqui quais tags se encaixam logicamente no seu contexto:

Código incorreto:

 <div class="article-blue"> <div class="article-title-red">HTML 4 title</div> <div class="content"> Semantics <span class="boldtext">are</span> important. </div> </div>

Bom código:

 <article> <h1>HTML5 title</h1> <p> Semantics <strong>are</strong> important. </p> </article>

Conclusão: Aprenda e use novos elementos em HTML5. Vale muito a pena o esforço!

CSS: código limpo e pré-processadores

Quando se trata de CSS, é difícil não começar com alguns conselhos pouco originais, mas atrevidos:

Use um pré-processador CSS.

Sass é a linguagem de extensão CSS de nível profissional mais madura, estável e poderosa do mundo.

Existem duas sintaxes disponíveis para Sass. O primeiro, conhecido como SCSS (Sassy CSS) e usado em toda esta referência, é uma extensão da sintaxe do CSS. A segunda e mais antiga sintaxe, conhecida como sintaxe recuada (ou às vezes apenas “Sass”), fornece uma maneira mais concisa de escrever CSS.

Agrupe seus seletores: use @extend no SASS.

Ao agrupar seus seletores ou usar @extend no SASS, você deve ajudar a manter seu código DRY (não se repita).

Código incorreto:

 p { font-size: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 41px; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Bom código:

 .font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-size: 22px; @extend .font-smoothing; } h1 { font-size: 22px; @extend .font-smoothing; }

Use unidades rem em vez de pixels em CSS.

Use REMs para tamanhos e espaçamentos, por exemplo, tamanhos de fonte feitos com base no font-size do elemento raiz <html> . Eles também permitem dimensionar rapidamente um projeto inteiro alterando o tamanho da fonte raiz (por exemplo, em uma determinada consulta de mídia/tamanho de tela).

Você escreverá menos código para visualizações responsivas:

Código incorreto:

 p { font-size: 22px; padding: 10px; } @media (max-width: 767px) { p { font-size: 16px; padding: 5px; } }

Bom código:

 html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } p { font-size: 1.6rem; padding: 1rem; }

Tente evitar ter altura ou largura fixa em CSS.

Tente evitar ter altura ou largura fixa em CSS. As alturas podem ser geradas com conteúdo interno + preenchimentos e as larguras podem ser definidas por um sistema de grade (use grade aninhada, se necessário).

Código incorreto:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { height: 130px; }

Bom código:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { padding-top: 23px; padding-bottom: 47px; }

Certifique-se de usar o item pai apenas uma vez no SCSS.

Quando você estiver usando um pré-processador de CSS e planejando escrever estilo para qualquer seção, certifique-se de usar o item pai em CSS apenas uma vez e inclua todos os elementos filho e consultas de mídia dentro de seus colchetes. Isso permitirá que você encontre e modifique o elemento pai principal facilmente em um só lugar ao fazer alterações no futuro.

Código incorreto:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } } @media (max-width: 767px) { .section-parent-class { footer { padding: .5rem; } } }

Bom código:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } footer { @media (max-width: 767px) { padding: .5rem; } } }

Pense em quais elementos serão afetados antes de escrever uma regra CSS.

Sempre pense em quais elementos serão afetados antes de escrever qualquer regra CSS. Se suas alterações não forem comuns, escreva suas regras de forma a afetar apenas um determinado elemento e nada mais.

Código incorreto:

 /* Commonly used class */ .title { color: #008000; }

Bom código:

 /* Specify it not to affect other titles */ .section-blog .title { color: #008000; }

Tente procurar regras e variáveis ​​CSS existentes antes de escrever novas.

Sempre procure regras existentes que se encaixem no estilo desejado, tanto no CSS personalizado quanto no framework. Somente se não houver nada adequado, prossiga para escrever um novo.

Isso é particularmente importante ao trabalhar com grandes aplicativos.

Código incorreto:

 .jumbotron { margin-bottom: 20px; }

Bom código:

 // change $jumbotron-padding from _variables.scss .jumbotron { margin-bottom: $jumbotron-padding; }

Use regras específicas.

Se o plano de fundo tiver uma propriedade, especificamos essa propriedade, mas se tiver propriedades de plano de fundo diferentes, podemos fornecer uma declaração.

Código incorreto:

 .selector { background: #fff; }

Bom código:

 .selector { /* This way background image will not be overwritten if there is any */ background-color: #fff; }

Use propriedades e valores abreviados.

Faça o possível para usar mais propriedades e valores abreviados. Usando uma propriedade abreviada, você pode escrever folhas de estilo concisas e, na maioria das vezes, muito mais legíveis, economizando tempo e energia preciosos.

Código incorreto:

 img { margin-top: 5px; margin-right: 10px; margin-bottom: 25px; margin-left: 10px; } button { padding: 0 0 0 20px; }

Bom código:

 img { /* Shorthand style */ margin: 5px 10px 25px; } button { /* Don't play with shorthand too much */ padding-left: 20px; }

Use em vez de px para a altura da linha.

O uso de unidades em e px nos dá flexibilidade em nossos projetos e a capacidade de dimensionar elementos para cima e para baixo, em vez de ficar preso a tamanhos fixos. Podemos usar essa flexibilidade para tornar nossos designs mais fáceis de ajustar durante o desenvolvimento e mais responsivos, além de permitir que os usuários do navegador controlem a escala geral dos sites para máxima legibilidade.

Código incorreto:

 p { font-size: 12px; line-height: 24px; }

Bom código:

 p { font-size: 12px; line-height: 2em; /* or just line-height: 2; */ }

Use classes Bootstrap tanto quanto possível.

Embora essa regra possa se aplicar a estruturas de interface do usuário em geral, estou usando o Bootstrap como exemplo, porque é a biblioteca de componentes de front-end mais popular do mundo.

O Bootstrap permite que você use muitas classes prontas, facilitando seu trabalho. Tente usar classes Bootstrap o máximo possível, para fazer mais marcação baseada em HTML.

Código incorreto:

 <section class="without-bootstrap"> <div class="first-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="second-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

 .first-column, .second-column { width: 25%; float: left; padding-left: 15px; padding-right: 15px; } ...

Bom código:

 <section class="row"> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

Personalize sua estrutura corretamente.

O Bootstrap conta com o arquivo variables.scss, que permite configurar e personalizar facilmente seu front-end sem escrever uma única linha de código. Caso contrário, se você for escrever manualmente todas as personalizações por conta própria, seria melhor não usar uma estrutura.

Alguns desenvolvedores evitam alterar o arquivo variables.scss, pensando que ainda poderão atualizar o Bootstrap para uma nova versão sem muita dificuldade, mas pode ser uma tarefa tediosa. Mesmo pequenas atualizações exigem que os desenvolvedores leiam o changelog, passem por todas as marcações e CSS e migrem para a nova versão manualmente.

Código incorreto:

 navbar { padding: 20px 10px; } .carousel-indicators { li { width: 6px; height: 6px; margin-right: 3px; margin-left: 3px; } }

Bom código:

 $navbar-padding-y: ($spacer / 2) !default; $navbar-padding-x: $spacer !default; $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-spacer: 3px !default;

Não sobrescreva a largura .container .

Tente não substituir a largura de .container . Tente usar um sistema de grade ou apenas altere a largura do contêiner em _variables.scss . Se você precisar diminuir sua largura, basta usar max-width em vez de largura. Nesse caso, .container do Bootstrap permanecerá intocado nas visualizações responsivas.

Código incorreto:

 .container { @media (min-width: $screen-lg-min) { width: 1300px; } }

Bom código:

 // change $container-lg from _variables.scss .container { @media (min-width: $screen-lg-min) { width: $container-lg; } }

Use classes Bootstrap 4 e escreva menos CSS.

Comece a usar o Bootstrap 4, mesmo que esteja em beta. Ele inclui muitas novas classes que ajudarão você a criar layouts mais rapidamente, especialmente Flexbox e espaçadores.

Código incorreto:

 <div class="flex-ex"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> <div class="flex-ex flex-reverse"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>

 .flex-ex { display: flex; > div { padding: 2px; } &.flex-reverse { flex-direction: row-reverse; } li { list-style: none; padding: .5rem; } }

Bom código:

 <ul class="list-unstyled list-inline d-flex flex-row"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul> <ul class="list-unstyled list-inline d-flex flex-row-reverse"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul>

Agora podemos atribuir classes a um elemento para remover todas as bordas ou algumas bordas.

Código incorreto:

 <div class="border-example2 py-5"> <span class="border0"></span> <span class="border-top0"></span> <span class="border-right0"></span> <span class="border-bottom0"></span> <span class="border-left0"></span> </div>

 border-example2 { > span { width: 100px; height: 100px; display: inline-block; margin: .50rem; background-color: #e1e1e1; border: 1px solid; &.border0 { border: none; } &.border-top0 { border-top: none; } &.border-right0 { border-right: none; } &.border-bottom0 { border-bottom: none; } &.border-left0 { border-left: none; } } }

Bom código:

 <div class="border-example py-5"> <span class="d-inline-block m-2 border-0"></span> <span class="d-inline-block m-2 border-top-0"></span> <span class="d-inline-block m-2 border-right-0"></span> <span class="d-inline-block m-2 border-bottom-0"></span> <span class="d-inline-block m-2 border-left-0"></span> </div>

 .border-example { > span { width: 100px; height: 100px; background-color: #e1e1e1; border: 1px solid; } }

Use .col-sm-X se .col-md-X e .col-lg-X tiverem o mesmo valor para X.

Não escreva .col-md-X e .col-lg-X se .col-sm-X tiver o mesmo valor para X. Por exemplo, não há necessidade de escrever .col-lg-10 porque quando escrevemos .col-md-10 , incluímos automaticamente .col-lg-10 nele.

Código incorreto:

 <ul class="press-list list-inline row"> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

Bom código:

 <ul class="press-list list-inline row"> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

Não use .col-xs-12 .

Não use .col-xs-12 porque se nenhum .col-xs-X for atribuído, então será .col-xs-12 por padrão.

Código incorreto:

 <section> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row text-center"> <div class="col-md-6 col-xs-12"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

Bom código:

 <section class="text-center"> <div class="container"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> <div class="row"> <div class="col-md-6"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

Não use reset.css ; use normalize.css em vez disso.

Se você estiver usando o Bootstrap, o normalize.css já está incluído lá, não há necessidade de incluí-lo duas vezes.

Siga as diretrizes, mesmo que não sejam uma prática recomendada.

Por uma questão de consistência, é melhor sempre seguir as regras e diretrizes com as quais você começou (seja sobre nomenclatura, estilo de código ou estrutura de arquivo)

Empacotando

Espero que você tenha tirado algo útil e que você pense mais sobre como escrever código HTML e CSS mínimo com as melhores práticas.

Para grandes empresas, é muito difícil manter grandes aplicativos quando há código confuso. E, claro, as grandes empresas têm dinheiro para pagar por uma boa qualidade. Se você seguir princípios de codificação limpos, aumentará suas chances de conseguir um bom emprego. Também vale a pena trazer o aspecto freelancer: profissionais que fazem malabarismos com vários projetos e clientes devem entregar código limpo que possa ser passado para outros desenvolvedores rapidamente.

Espero expandir para tópicos mais avançados em posts futuros, pois pretendo falar sobre automatizar o processo de codificação, usando tarefas Gulp/Grunt, Linters, plugins de editor, ferramentas que geram código, ferramentas de IA que escrevem código em vez de você e outros tópicos relacionados.

Espero que tenha sido uma leitura interessante e informativa. Boa sorte em seus esforços de codificação.

Leitura adicional no Blog da Toptal Engineering:

• Como abordar animações SVG em CSS