Código limpio: por qué HTML/CSS Essentials sigue siendo importante

Durante mis 15 años de experiencia en desarrollo web, trabajé con varias empresas, desde nivel empresarial hasta nuevas empresas, y trabajé con muchos, muchos compañeros ingenieros de software en el camino. Uno de los problemas más comunes e importantes con los que me he encontrado en mis proyectos ha sido la falta de escritura de código limpio y fácil de entender .

Incluso los mejores desarrolladores de empresas de primer nivel no siempre siguen las mejores prácticas y escriben código que se puede limpiar y optimizar.

Las consecuencias del código desordenado y sucio

Para citar una publicación de blog antigua pero aún relevante que analiza los principios del código limpio:

El código fuente es similar a la deuda financiera. Suponga que desea comprar una casa para vivir. La mayoría de las personas no tienen los medios financieros para pagar una casa en efectivo, por lo que en su lugar solicita una hipoteca. Pero la hipoteca en sí no es una gran cosa para tener. Es una responsabilidad. Tienes que pagar intereses sobre tu deuda todos los meses...

Así también en el desarrollo web. El código tiene costos continuos. Hay que entenderlo, hay que mantenerlo, hay que adaptarlo a nuevos objetivos a lo largo del tiempo. Cuanto más código tenga, mayores serán los costos continuos. Nos conviene tener la menor cantidad de código fuente posible y, al mismo tiempo, poder lograr nuestros objetivos comerciales.

Pero no nos detengamos en lo abstracto. Este artículo cubrirá los principios esenciales del código limpio, las diferentes técnicas utilizadas para organizar el código y cómo hacerlo más fácil de mantener, escalable y fácil de depurar.

El código de calidad comienza con un estilo de código básico, se expande a las mejores prácticas al escribir aplicaciones grandes en HTML/CSS con muchos bloques reutilizables, y también analizaremos las convenciones de nomenclatura para crear una mayor legibilidad implícita, así como marcos de trabajo de terceros y sus mejores prácticas.

Para cuando termine de leer esto, debe comprender bien los conceptos básicos del código de calidad y cómo hacer que su código HTML y CSS sea más fácil de mantener y ampliar.

Esenciales de estilo de código

Comencemos con los conceptos básicos de un buen código HTML y CSS: validez W3C, convenciones de nomenclatura, estructura de archivos, etc.

Tenga en cuenta la estructura desde el primer día.

Si va a desarrollar una aplicación grande, debe cuidar la estructura del archivo. Puede, o más bien debería, verse así:

Utilice validadores para comprobar su código.

Trate de usar siempre validadores de HTML y CSS.

Código incorrecto:

 <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; }

Buen 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 en las etiquetas <img> para la validez de los principios de código limpio.

Este atributo juega un papel vital para SEO, motores de búsqueda, rastreadores web, lectores de pantalla, etc.

Código incorrecto:

 <img src="demo.jpg">

Buen código:

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

Use kebab-case (spinal-case).

Para los nombres, trate de usar kebab-case ( spinal-case ) y no use camelCase o under_score . Use under_score solo cuando use BEM, aunque si está usando Bootstrap, es mejor mantener la coherencia e ir con - como delimitador.

Código incorrecto:

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

Buen código:

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

kebab-case es más legible que camelCase y under_score .

Use nombres significativos que cualquiera pueda entender, que sean breves.

Los nombres de las clases deben parecerse a .noun-adjective .

Trate de usar nombres comunes de clases en lugar de escribir nombres específicos de contenido. Hace que el código sea más legible.

Código incorrecto:

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

Buen código:

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

No escriba atributos de tipo para hojas de estilo y secuencias de comandos en HTML5.

No son necesarios con HTML5, pero sí los exigen los estándares W3C en HTML4/XHTML.

Código incorrecto:

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

Buen código:

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

Utilice clases específicas cuando sea necesario.

Mantenga el selector de CSS más específico y seleccione los elementos que necesita; Trate de no mencionar a sus padres si no es necesario. Permitirá que el código se renderice más rápido y eliminará cualquier obstáculo de gestión en el futuro.

Código incorrecto:

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

Buen código:

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

Si bien la aplicación de una clase al elemento de destino puede crear más código dentro de HTML, permitirá que el código se procese más rápido y eliminará cualquier obstáculo de gestión.

Agrega una clase al elemento padre si quieres darle otro estilo al mismo bloque.

Si necesita usar el mismo bloque pero con un estilo diferente, intente mantener el HTML lo más intacto posible. Simplemente agregue una clase al elemento principal y aplique todos los estilos nuevos a los elementos secundarios de esa clase en CSS.

Código incorrecto:

 <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; }

Buen 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; } } }

Eliminar unidades de valores cero.

Agregar la unidad es innecesario y no proporciona ningún valor adicional. No hay diferencia entre 0px, 0em, 0% o cualquier otro valor cero. Las unidades no son importantes porque el valor sigue siendo cero.

Código incorrecto:

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

Buen código:

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

No escriba border-bottom en CSS si puede agregar una etiqueta de hr humanos.

Use la etiqueta hr en lugar de escribir un nuevo selector y agregar estilos de borde en CSS. Hace que el código se base más en el marcado, y eso es lo que buscamos.

Código incorrecto:

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

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

Buen código:

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

Utilice el selector A > B.

Es muy útil usar el selector A > B , que aplica las reglas solo a los niños directos; en ese caso, no tendrá que restablecer los estilos de todos los demás niños que no necesitan ese estilo. Por ejemplo, es muy útil cuando se codifican menús anidados. No necesitará redefinir los estilos de los submenús.

Código incorrecto:

 <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; }

Buen 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; }

Cómo escribir HTML limpio

Pasando a HTML, la prioridad será garantizar un front-end robusto y fácil de mantener.

Trate de tener un front-end que esté lo más basado posible en el marcado.

Haga que su código front-end se base en el marcado en lugar de escribir demasiado CSS.

Esto ayudará a los motores de búsqueda y hará que su código sea más legible, mejorando potencialmente las clasificaciones de búsqueda y la experiencia del usuario.

Código incorrecto:

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

Buen 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 el uso de envoltorios innecesarios en HTML.

Trate de no usar elementos de envoltorio innecesarios en HTML. Tener toneladas de elementos <div> y <span> es cosa del pasado. Mantener las cosas granulares y lineales le permite lograr un código mínimo (vea el siguiente punto).

Código incorrecto:

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

Buen código:

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

Use clases atómicas para el estilo.

No utilice colores o tamaños de fuente personalizados (si el color o el tamaño de fuente no están en el marco, simplemente agregue sus clases atómicas). Las clases atómicas son unidades de estilo simples y de un solo propósito. Al igual que los estilos en línea, los estilos atómicos solo aplican una única declaración de estilo.

Código incorrecto:

 <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; }

Buen 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; }

Intente mantener clases granulares y atómicas y utilícelas cuando sea necesario. Como resultado, su front-end se basará más en el marcado.

Hacer uso de elementos semánticos.

El uso de la semántica proporciona una mejor estructura y hace que el código y el contenido sean más fáciles de leer.

Código incorrecto:

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

Buen código:

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

Utilice etiquetas HTML5.

Las nuevas etiquetas te dan más libertad expresiva y estandarizan elementos comunes, lo que mejora el procesamiento automatizado de documentos. Aquí hay una lista sólida de todos los elementos. Descubrí que muchos desarrolladores siempre usan mucho <div> y <span> , pero primero verifique aquí qué etiquetas encajan lógicamente en su contexto:

Código incorrecto:

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

Buen código:

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

En pocas palabras: aprenda y use nuevos elementos en HTML5. ¡Vale la pena el esfuerzo!

CSS: código limpio y preprocesadores

Cuando se trata de CSS, es difícil no comenzar con algunos consejos poco originales pero atrevidos:

Utilice un preprocesador CSS.

Sass es el lenguaje de extensión CSS de grado profesional más maduro, estable y potente del mundo.

Hay dos sintaxis disponibles para Sass. El primero, conocido como SCSS (Sassy CSS) y utilizado en esta referencia, es una extensión de la sintaxis de CSS. La segunda sintaxis más antigua, conocida como sintaxis con sangría (o, a veces, simplemente "Sass"), proporciona una forma más concisa de escribir CSS.

Agrupe sus selectores: use @extend en SASS.

Al agrupar sus selectores o usar @extend en SASS, debe ayudar a mantener su código SECO (no se repita).

Código incorrecto:

 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; }

Buen 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 en lugar de píxeles en CSS.

Use REM para tamaños y espacios, por ejemplo, los tamaños de fuente que crea en función del font-size del elemento raíz <html> . También le permiten escalar rápidamente un proyecto completo cambiando el tamaño de la fuente raíz (por ejemplo, en una determinada consulta de medios/tamaño de pantalla).

Escribirá menos código para vistas receptivas:

Código incorrecto:

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

Buen código:

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

Trate de evitar tener una altura o un ancho fijos en CSS.

Trate de evitar tener una altura o un ancho fijos en CSS. Las alturas se pueden generar al tener contenido interno + rellenos y los anchos se pueden definir mediante un sistema de cuadrícula (use una cuadrícula anidada si es necesario).

Código incorrecto:

 <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; }

Buen 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; }

Asegúrese de usar el elemento principal solo una vez en SCSS.

Cuando esté utilizando un preprocesador de CSS y planee escribir estilo para cualquier sección, asegúrese de usar el elemento principal en CSS solo una vez e incluya todos los elementos secundarios y las consultas de medios dentro de sus corchetes. Esto le permitirá encontrar y modificar fácilmente el elemento principal principal en un solo lugar cuando realice cambios en el futuro.

Código incorrecto:

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

Buen código:

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

Piensa qué elementos se verán afectados antes de escribir una regla CSS.

Piensa siempre qué elementos se verán afectados antes de escribir cualquier regla CSS. Si sus cambios no serán comunes, entonces escriba sus reglas de manera que afecten solo a cierto elemento y nada más.

Código incorrecto:

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

Buen código:

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

Intente buscar reglas y variables CSS existentes antes de escribir otras nuevas.

Siempre busque reglas existentes que se ajusten al estilo deseado, tanto en CSS personalizado como en el marco. Solo si no hay nada adecuado, se procede a redactar uno nuevo.

Esto es particularmente importante cuando se trabaja con grandes aplicaciones.

Código incorrecto:

 .jumbotron { margin-bottom: 20px; }

Buen código:

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

Usa reglas específicas.

Si el fondo tiene una propiedad, especificamos esa propiedad, pero si tiene diferentes propiedades de fondo, podemos darle una declaración.

Código incorrecto:

 .selector { background: #fff; }

Buen código:

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

Utilice propiedades y valores abreviados.

Haz tu mejor esfuerzo para usar más propiedades y valores abreviados. Usando una propiedad abreviada, puede escribir hojas de estilo concisas y, en la mayoría de los casos, mucho más legibles, ahorrando tiempo y energía valiosos.

Código incorrecto:

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

Buen código:

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

Use em en lugar de px para la altura de la línea.

El uso de unidades em y px nos brinda flexibilidad en nuestros diseños y la capacidad de escalar elementos hacia arriba y hacia abajo en lugar de quedarse con tamaños fijos. Podemos usar esta flexibilidad para hacer que nuestros diseños sean más fáciles de ajustar durante el desarrollo y más receptivos, así como permitir que los usuarios del navegador controlen la escala general de los sitios para una máxima legibilidad.

Código incorrecto:

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

Buen código:

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

Utilice las clases de Bootstrap tanto como sea posible.

Si bien esta regla podría aplicarse a los marcos de interfaz de usuario en general, estoy usando Bootstrap como ejemplo, porque es la biblioteca de componentes front-end más popular del mundo.

Bootstrap le permite usar muchas clases listas, lo que facilita su trabajo. Trate de usar las clases de Bootstrap tanto como sea posible, para hacer más marcado basado en HTML.

Código incorrecto:

 <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; } ...

Buen 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>

Personaliza tu marco correctamente.

Bootstrap se basa en el archivo variables.scss, que le permite configurar y personalizar fácilmente su interfaz sin escribir una sola línea de código. De lo contrario, si va a escribir manualmente todas las personalizaciones por su cuenta, será mejor que no utilice ningún marco.

Algunos desarrolladores evitan cambiar variables.scss, pensando que aún podrán actualizar Bootstrap a una nueva versión sin muchos problemas, pero puede ser una tarea tediosa. Incluso las actualizaciones menores requieren que los desarrolladores lean el registro de cambios, revisen todas las marcas y CSS, y migren a la nueva versión manualmente.

Código incorrecto:

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

Buen 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;

No sobrescriba el ancho .container .

Intente no sobrescribir el ancho de .container . Intente usar un sistema de cuadrícula en su lugar, o simplemente cambie el ancho del contenedor en _variables.scss . Si necesita disminuir su ancho, simplemente use ancho máximo en lugar de ancho. En ese caso, .container de Bootstrap permanecerá intacto en las vistas receptivas.

Código incorrecto:

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

Buen código:

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

Use las clases de Bootstrap 4 y escriba menos CSS.

Comienza a usar Bootstrap 4, aunque esté en beta. Incluye muchas clases nuevas que lo ayudarán a crear diseños más rápido, especialmente Flexbox y espaciadores.

Código incorrecto:

 <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; } }

Buen 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>

Ahora podemos asignar clases a un elemento para eliminar todos los bordes o algunos bordes.

Código incorrecto:

 <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; } } }

Buen 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 si .col-md-X y .col-lg-X tienen el mismo valor para X.

No escriba .col-md-X y .col-lg-X si .col-sm-X tiene el mismo valor para X. Por ejemplo, no es necesario escribir .col-lg-10 porque cuando escribimos .col-md-10 , incluimos automáticamente .col-lg-10 en él.

Código incorrecto:

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

Buen 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>

No use .col-xs-12 .

No use .col-xs-12 porque si no se .col-xs-X , entonces será .col-xs-12 por defecto.

Código incorrecto:

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

Buen 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>

No use reset.css ; use normalize.css en su lugar.

Si está utilizando Bootstrap, entonces normalize.css ya está incluido allí, no es necesario incluirlo dos veces.

Siga las pautas, incluso si no son las mejores prácticas.

En aras de la coherencia, es mejor seguir siempre las reglas y pautas con las que comenzó (ya sean sobre nombres, estilo de código o estructura de archivos)

Terminando

Espero que haya podido llevarse algo útil y que piense más en escribir código HTML y CSS mínimo con las mejores prácticas.

Para las grandes empresas, es bastante difícil mantener aplicaciones grandes cuando hay un código desordenado. Y, por supuesto, las grandes empresas tienen dinero para pagar por una buena calidad. Si sigue los principios de codificación limpios, mejorará sus posibilidades de conseguir un buen trabajo. También vale la pena mencionar el aspecto independiente: los profesionales que hacen malabarismos con múltiples proyectos y los clientes deben entregar un código limpio que se pueda pasar a otros desarrolladores en poco tiempo.

Espero expandirme a temas más avanzados en publicaciones futuras, ya que tengo la intención de hablar sobre la automatización del proceso de codificación, el uso de tareas Gulp/Grunt, Linters, complementos del editor, herramientas que generan código, herramientas de IA que escriben código en lugar de usted y otros. Temas relacionados.

Espero que esta haya sido una lectura interesante e informativa. Buena suerte en sus esfuerzos de codificación.

Lecturas adicionales en el blog de ingeniería de Toptal:

• Cómo acercarse a las animaciones SVG en CSS