20 consejos para escribir CSS moderno

En esta publicación, queremos compartir con usted una colección de 20 convenciones útiles y mejores prácticas recomendadas por la comunidad CSS. Algunos están diseñados más para principiantes y otros son un poco avanzados, pero esperamos que todos encuentren un truco genial que no conocían. ¡Disfrútalo!

1. Cuidado con el colapso del margen

A diferencia de la mayoría de las otras propiedades, los márgenes verticales colapsan cuando se encuentran. Lo que esto significa es que cuando el margen inferior de un elemento toca el margen superior de otro, solo sobrevive el más grande de los dos. He aquí un ejemplo sencillo:

.square {
    width: 80px;
    height: 80px;
}

.red {
    background-color: #F44336;
    margin-bottom: 40px;
}

.blue {
    background-color: #2196F3;
    margin-top: 30px;
}
<div class="square red"></div>
<div class="square blue"></div>

En lugar de 70 px entre el cuadrado rojo y el azul, solo tenemos 40 px, el margen del cuadrado azul no se tiene en cuenta en absoluto. Hay formas de combatir este comportamiento, pero es mejor simplemente trabajar con él y usar márgenes que solo vayan en una dirección, preferiblemente margin-bottom .

2. Use Flexbox para diseños

El modelo flexbox existe por una razón. Los flotadores y los bloques en línea funcionan, pero todos son esencialmente herramientas para diseñar documentos, no sitios web. Flexbox, por otro lado, está diseñado específicamente para facilitar la creación de cualquier diseño exactamente de la forma en que se concibió.

El conjunto de propiedades que vienen con el modelo flexbox brindan a los desarrolladores mucha flexibilidad (sin juego de palabras), y una vez que te acostumbras, hacer cualquier diseño receptivo es pan comido. La compatibilidad con los navegadores hoy en día es casi perfecta, por lo que no debería haber nada que le impida usar Flexbox completo.

.container {
    display: flex;
    /* Don't forget to add prefixes for Safari */
    display: -webkit-flex;
}

Hemos presentado una serie de consejos y trucos con flexbox antes en Tutorialzine. Puede consultarlas aquí:5 técnicas de Flexbox que debe conocer.

3. Hacer un restablecimiento de CSS

Aunque la situación ha mejorado mucho con los años, todavía hay mucha variación en la forma en que se comportan los diferentes navegadores. La mejor manera de resolver este problema es aplicar un restablecimiento de CSS que establezca valores predeterminados universales para todos los elementos, lo que le permitirá comenzar a trabajar en una hoja de estilo limpia que producirá el mismo resultado en todas partes.

Hay bibliotecas como normalize.css, minireset y ress que hacen esto muy bien, corrigiendo todas las inconsistencias imaginables del navegador. Si no quiere usar una biblioteca, puede hacer un reinicio de CSS muy básico usted mismo con estos estilos:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Esto puede parecer un poco duro, pero anular los márgenes y los rellenos en realidad facilita mucho la disposición de los elementos, ya que no hay espacios predeterminados entre ellos que deban tenerse en cuenta. El box-sizing: border-box; property es otro buen valor predeterminado, del que hablaremos más en nuestro próximo consejo.

4. Cuadro de borde para todos

La mayoría de los principiantes no conocen el box-sizing propiedad, pero en realidad es bastante importante. La mejor manera de entender lo que hace es observar sus dos valores posibles:

  • content-box (predeterminado):cuando establecemos un ancho/alto para un elemento, ese es solo el tamaño de su contenido. Todos los rellenos y bordes están encima de eso. P.ej. un <div> tiene un ancho de 100 y un relleno de 10, nuestro elemento ocupará 120 píxeles (100 + 2*10).
  • border-box - El relleno y el borde están incluidos en el ancho/alto. Un <div> con width: 100px; y box-sizing: border-box; tendrá 100 píxeles de ancho sin importar qué rellenos o bordes se agreguen.

Establecer border-box en todos los elementos hace que sea mucho más fácil darle estilo a todo, ya que no tienes que hacer operaciones matemáticas todo el tiempo.

5. Imágenes como fondo

Cuando agregue imágenes a su diseño, especialmente si va a ser receptivo, use un <div> etiqueta con el background Propiedad CSS en lugar de <img> elementos.

Esto puede parecer más trabajo a cambio de nada, pero en realidad hace que sea mucho más fácil diseñar las imágenes correctamente, manteniendo su tamaño y relación de aspecto originales, gracias a background-size , background-position y otras propiedades.

img {
    width: 300px;
    height: 200px;
}

div {
    width: 300px;
    height: 200px;
    background: url('https://tutorialzine.com/media/2016/08/bicycle.jpg');
    background-position: center center;
    background-size: cover;
}

section{
    float: left;
    margin: 15px;
}
<section>
    <p>Img element</p>
    <img src="https://tutorialzine.com/media/2016/08/bicycle.jpg" alt="bicycle">
</section>

<section>
    <p>Div with background image</p>
    <div></div>
</section>

Un inconveniente de esta técnica es que la accesibilidad web de su página se verá afectada levemente, ya que los lectores de pantalla y los motores de búsqueda no rastrearán correctamente las imágenes. Este problema se puede resolver con el increíble ajuste de objetos, pero aún no tiene compatibilidad completa con el navegador.

6. Mejores bordes de tabla

Las tablas en HTML no son divertidas. Son extravagantes, casi imposibles de hacer receptivos y, en general, difíciles de diseñar. Por ejemplo, si desea agregar bordes simples a su tabla y sus celdas, lo más probable es que termine con esto:

table {
    width: 600px;
    border: 1px solid #505050;
    margin-bottom: 15px;
    color:#505050;
}

td{
    border: 1px solid #505050;
    padding: 10px;
}
<table>
  <thead>
    <tr>
      <th >Title</th>
      <th >Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="https://tutorialzine.com/2016/07/take-a-selfie-with-js/" target="_blank">Take a Selfie With JavaScript</a></td>
      <td>A quick tutorial that covers a pure-JavaScript way to take photos directly in the browser using various native APIs and interesting JS techniques.</td>
    </tr>
    <tr>
      <td><a href="https://tutorialzine.com/2016/08/20-awesome-php-libraries-for-summer-2016/" target="_blank">20 Awesome PHP Libraries</a></td>
      <td>A handcrafted collection of 20 open-source libraries containing some of the most useful and top-quality PHP resources.</td>
    </tr>
  </tbody>
</table>

Como puede ver, hay muchos bordes repetidos en todas partes y no se ve bien. Esta es una forma rápida y sin hacks de eliminar todos los bordes duplicados:simplemente agregue border-collapse: collapse; a la mesa.

table {
    width: 600px;
    border: 1px solid #505050;
    margin-bottom: 15px;
    color: #505050;
    border-collapse: collapse;
}

td{
    border: 1px solid #505050;
    padding: 10px;
}
<table>
  <thead>
    <tr>
      <th >Title</th>
      <th >Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="https://tutorialzine.com/2016/07/take-a-selfie-with-js/" target="_blank">Take a Selfie With JavaScript</a></td>
      <td>A quick tutorial that covers a pure-JavaScript way to take photos directly in the browser using various native APIs and interesting JS techniques.</td>
    </tr>
    <tr>
      <td><a href="https://tutorialzine.com/2016/08/20-awesome-php-libraries-for-summer-2016/" target="_blank">20 Awesome PHP Libraries</a></td>
      <td>A handcrafted collection of 20 open-source libraries containing some of the most useful and top-quality PHP resources.</td>
    </tr>
  </tbody>
</table>

¡Mucho mejor!

7. Escribe mejores comentarios

Es posible que CSS no sea un lenguaje de programación, pero su código aún debe documentarse. Algunos comentarios simples son todo lo que necesita para organizar una hoja de estilo y hacerla más accesible para sus colegas o para su futuro yo.

Para secciones más grandes del CSS, como componentes principales o consultas de medios, use un comentario estilizado y deje un par de líneas nuevas después de:

/*---------------
    #Header
---------------*/
header { }

header nav { }

/*---------------
    #Slideshow
---------------*/
.slideshow { }

Los detalles en el diseño o los componentes menos importantes se pueden marcar con un comentario de una sola línea.

/*   Footer Buttons   */
.footer button { }

.footer button:hover { }

Además, recuerda que CSS no tiene una sola línea // comentarios, por lo que al comentar algo aún necesita usar el / / sintaxis.

/*  Do  */
p {
    padding: 15px;
    /*border: 1px solid #222;*/
}

/*  Don't  */
p {
    padding: 15px;
    // border: 1px solid #222;  
}

8. Todo el mundo ama el estuche de kebab

Los nombres de las clases y los identificadores deben escribirse con un guión (-) cuando contienen más de una palabra. CSS no distingue entre mayúsculas y minúsculas, por lo que camelCase no es una opción. Hace mucho tiempo, los guiones bajos solían no ser compatibles (ahora lo son), lo que convirtió a los guiones en la convención predeterminada.

/*  Do     */
.footer-column-left { }

/*  Don't  */
.footerColumnLeft { }

.footer_column_left { }

Cuando se trata de nombrar, también puede considerar BEM, que sigue un conjunto de principios que agregan coherencia y brindan un enfoque de desarrollo basado en componentes. Puedes leer más sobre esto en este excelente artículo de CSS-Tricks.

9. No te repitas

Los valores de la mayoría de las propiedades CSS se heredan del elemento que se encuentra un nivel más arriba en el árbol DOM, de ahí el nombre Cascada. Hojas de estilo. Tomemos el font propiedad, por ejemplo:casi siempre se hereda del padre, no es necesario volver a establecerla por separado para todos y cada uno de los elementos de la página.

Simplemente agregue los estilos de fuente que prevalecerán en su diseño al <html> o <body> elemento y déjelos gotear. Estos son algunos buenos valores predeterminados:

html {
    font: normal 16px/1.4 sans-serif;
}

Más tarde, siempre puede cambiar los estilos para cualquier elemento dado. Lo que decimos es evitar la repetición y utilizar la herencia tanto como sea posible.

10. Animaciones CSS con transform

No animar elementos cambiando directamente su width y height o left/top/bottom/right . Es preferible utilizar el transform() ya que proporciona transiciones más suaves y hace que sus intenciones sean más fáciles de entender al leer el código.

Aquí hay un ejemplo. Queremos animar una bola y deslizarla hacia la derecha. En lugar de cambiar el valor de left , es mejor usar translateX():

.ball {
    left: 50px;
    transition: 0.4s ease-out;
}

/* Not Cool*/
.ball.slide-out {
    left: 500px;
}

/* Cool*/
.ball.slide-out {
    transform: translateX(450px);
}

Transform, así como todas sus muchas funciones (translate , rotate , scale , etc.) tienen compatibilidad de navegador casi universal y se pueden usar libremente.

11. No hagas bricolaje, usa una biblioteca

La comunidad de CSS es enorme y constantemente surgen nuevas bibliotecas. Sirven para todo tipo de propósitos, desde pequeños fragmentos hasta marcos completos para crear aplicaciones receptivas. La mayoría de ellos también son de código abierto.

La próxima vez que se enfrente a un problema de CSS, antes de intentar abordarlo con todas sus fuerzas y trucos, compruebe si no hay una solución disponible en GitHub o CodePen.

12. Mantenga baja la especificidad del selector

No todos los selectores de CSS son iguales. Cuando los desarrolladores novatos escriben CSS, normalmente esperan que los selectores siempre sobrescriban todo lo que está por encima de ellos. Sin embargo, este no es siempre el caso, como lo ilustramos en el siguiente ejemplo:

a{
    color: #fff;
    padding: 15px;
}

a#blue-btn {
    background-color: blue;
}

a.active {
    background-color: red;
}
<a href='#' id='blue-btn' class="active">Active Button </a>

Queremos poder agregar el .active clase a cualquier botón y hacerlo rojo. Esto no funcionará aquí porque nuestro botón tiene su background-color establecer con un selector de ID, que tiene una mayor especificidad de selector. La regla dice así:

ID (#id )> Clase (.class )> Tipo (por ejemplo, header )

La especificidad también se acumula, por lo que a#button.active ocupa un lugar más alto que a#button . El uso de selectores con alta especificidad hará que supere constantemente a los selectores antiguos con selectores aún más altos y eventualmente dará como resultado !important . Esto nos lleva a nuestro próximo consejo:

13. No use !important

En serio, no lo hagas. Lo que ahora es una solución rápida puede terminar causando muchas reescrituras en el futuro. En su lugar, averigüe por qué su selector de CSS no funciona y cámbielo.

El único momento en que es aceptable !important Las reglas CSS son cuando desea anular los estilos en línea del HTML, lo que en sí mismo es otra mala práctica que debe evitarse.

14. Bloqueo de mayúsculas para el significado, text-transform Por Estilo

En HTML, escribe letras mayúsculas cuando quieras usarlas para su significado semántico previsto, como cuando quieras enfatizar la importancia de una palabra.

<h3>Employees MUST wear a helmet!</h3>

Si necesita tener algún texto en mayúsculas por razones estilísticas, escriba el texto normalmente en HTML y transfórmelo a mayúsculas con CSS. Tendrá el mismo aspecto, pero su contenido tendrá más sentido si se saca de contexto.

<div class="movie-poster">Star Wars: The Force Awakens</div>
.movie-poster {
    text-transform: uppercase;
}

Lo mismo ocurre con las cadenas en minúsculas y mayúsculas:text-transform las maneja igual de bien.

15. em, rem y píxel

Hay mucho debate sobre si la gente debería usar em , rem o px valores para establecer el tamaño de los elementos y el texto. La verdad es que las tres opciones son viables y tienen sus pros y sus contras.

Todos los desarrolladores y proyectos son diferentes, por lo que no puede haber reglas estrictas sobre cuándo usar cuál. Aquí hay, sin embargo, algunos consejos y buenas prácticas generales para cada unidad:

  • em:el valor de 1 em es relativo al font-size del padre directo. Usado a menudo en consultas de medios, em es excelente para la capacidad de respuesta, pero puede resultar muy confuso rastrear la tasa de cambio de ems a píxeles para cada elemento (1,25 em de 1,4 em de 16 px =?).
  • rem:relativo al tamaño de fuente del <html> elemento, rem hace que sea muy fácil escalar todos los encabezados y párrafos de la página. Dejando el <html> con su tamaño de fuente predeterminado y configurando todo lo demás con rem es un gran enfoque en cuanto a accesibilidad.
  • px:los píxeles le brindan la mayor precisión, pero no ofrecen ninguna escala cuando se usan en diseños adaptables. Son confiables, fáciles de entender y presentan una buena conexión visual entre el valor y el resultado real (15 px está cerca, tal vez solo uno o dos píxeles más).

La conclusión es que no tenga miedo de experimentar, pruébelos todos y vea cuál le gusta más. A veces em y rem puede ahorrarle mucho trabajo, especialmente al crear páginas receptivas.

16. Use un preprocesador en proyectos grandes

Has oído hablar de ellos:Sass, Less, PostCSS, Stylus. Los preprocesadores son el siguiente paso en la evolución de CSS. Proporcionan características como variables, funciones CSS, anidamiento de selectores y muchas otras cosas interesantes, lo que hace que el código CSS sea más fácil de administrar, especialmente en proyectos grandes.

Para un ejemplo rápido, aquí hay un fragmento del uso de variables y funciones CSS directamente en una hoja de estilo con Sass:

$accent-color: #2196F3;

a {
    padding: 10px 15px;
    background-color: $accent-color;
}

a:hover {
    background-color: darken($accent-color,10%);
}

El único inconveniente real de los preprocesadores es que necesitan compilarse en CSS estándar, pero si ya está usando un script de compilación en su proyecto, esto no debería ser una molestia.

Para obtener más información sobre los preprocesadores, consulte nuestros tutoriales sobre dos de los sistemas más populares:Sass y Less.

17. Prefijadores automáticos para una mejor compatibilidad

Escribir prefijos específicos del navegador es una de las cosas más molestas en CSS. No son consistentes, nunca sabes exactamente cuáles necesitas y, si lo haces, el proceso real de colocarlos en tu hoja de estilo es una pesadilla aburrida.

Afortunadamente, existen herramientas que lo hacen automáticamente por usted e incluso le permitirán decidir qué navegadores necesita compatibilidad:

  • Herramientas en línea:Autoprefixer
  • Complementos del editor de texto:Sublime Text, Atom
  • Bibliotecas:Autoprefixer (PostCSS)

18. Usar código minimizado en producción

Para mejorar la carga de la página de sus sitios web y aplicaciones, siempre debe usar recursos minificados. La versión minimizada de su código eliminará todos los espacios en blanco y las repeticiones, lo que reducirá el tamaño total del archivo. Por supuesto, este proceso también hace que las hojas de estilo sean completamente ilegibles, así que mantenga siempre una versión .min para producción y una versión regular para desarrollo.

Hay muchas formas diferentes de minimizar el código CSS:

  • Herramientas en línea:CSS Minifier (API incluida), CSS Compressor
  • Complementos del editor de texto:Sublime Text, Atom
  • Bibliotecas:Minfiy (PHP), CSSO y CSSNano (PostCSS, Grunt, Gulp)

Dependiendo de su flujo de trabajo, se puede utilizar cualquiera de las opciones anteriores, pero se recomienda automatizar el proceso de una forma u otra.

19. Caniuse es tu amigo

Los diferentes navegadores web todavía tienen muchas inconsistencias de compatibilidad. Use caniuse o un servicio similar para verificar si lo que está usando es ampliamente compatible, si necesita prefijos o si causa algún error en una determinada plataforma.

Sin embargo, solo verificar Caniuse no es suficiente. También debe realizar pruebas (ya sea manualmente o a través de un servicio), ya que a veces los diseños se rompen sin razones obvias. Conocer los navegadores preferidos de su base de usuarios también ayuda mucho, ya que puede ver dónde es más crucial un buen soporte.

20. Validar

Es posible que la validación de CSS no sea tan importante como la validación del código HTML o JavaScript, pero ejecutar su código a través de un CSS Linter aún puede ser muy útil. Le dirá si ha cometido algún error, le advertirá sobre malas prácticas y le dará consejos generales para mejorar el código.

Al igual que los minfiers y los autoprefixers, hay muchos validadores gratuitos disponibles:

  • Herramientas en línea:W3 Validator, CSS Lint
  • Complementos del editor de texto:Sublime Text, Atom
  • Bibliotecas:stylelint (Node.js, PostCSS), css-validator (Node.js)