Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Las 30 mejores prácticas CSS para principiantes

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by CYC (you can also view the original English article)

CSS es un lenguaje que es utilizado por casi todos los desarrolladores en algún momento. Si bien es un lenguaje que a veces damos por sentado, es poderoso y tiene muchos matices que pueden ayudar (o perjudicar) a nuestros diseños. Aquí hay treinta de las mejores prácticas CSS que te mantendrá una escritura sólida en CSS y evitar algunos errores costosos.

1. Hacer que tu CSS sea legible

La legibilidad de tu CSS es increíblemente importante, aunque la mayoría de la gente pasa por alto por qué es importante. La gran legibilidad de tu CSS hace que sea mucho más fácil de mantener en el futuro, ya que serás capaz de encontrar elementos más rápido. Además, nunca sabrás quién podría necesitar mirar tu código más adelante.

<nota-editores> Al escribir CSS, la mayoría de los desarrolladores caen en uno de los dos grupos.

Grupo 1: Todo en una línea

Grupo 2: Cada estilo tiene su propia línea

Ambas prácticas son perfectamente aceptables, aunque generalmente encontrarás que el grupo dos desprecia al grupo uno. Sólo recuerda: elige el método que mejor te parezca. Eso es todo lo que importa. </nota-editores>

2. Que sea coherente

Aparte de mantener tu código legible, debes asegurarte que tu código CSS es coherente. Debes comenzar a desarrollar tu propio "sub-lenguaje" de CSS que te permitirá nombrar rápidamente las cosas. Hay ciertas clases que creo en casi todos los temas, y uso el mismo nombre cada vez. Por ejemplo, utilizo ".caption-right" para flotar imágenes que contienen un título a la derecha.

Piensa en cosas como si usarás subrayados o guiones en los nombres de tu ID y de tu clase, y en qué casos los usarás. Cuando comiences a crear tus propios estándares para CSS, te convertirás en alguien mucho más competente.

3. Comenzar con un Framework

Algunos puristas del diseño se burlan de la idea de usar un framework CSS con cada diseño, pero creo que si alguien más se ha tomado el tiempo para mantener una herramienta que acelera la producción, ¿por qué reinventar la rueda? Sé que los frameworks no se deben utilizar en cada caso, pero la mayor parte del tiempo pueden ayudar.

Muchos diseñadores tienen su propio framework que han creado con el tiempo, y eso es una gran idea también. Esto ayuda a mantener la coherencia dentro de los proyectos.

CSS frameworks

<nota-editores> Estoy en desacuerdo. Los frameworks CSS son herramientas fantásticas... para aquellos que saben cómo usarlos.

Es menos una cuestión de reinventar la rueda, y más una cuestión de entender cómo funciona la rueda.

Si estás iniciando con CSS, yo personalmente recomendaría que te mantengas alejado de estos frameworks durante al menos un año. De lo contrario, sólo te confundirás. ¡Aprende CSS... luego toma atajos! </nota-editores>

4. Usar un Reset

La mayoría de los frameworks CSS tienen un reset incorporado, pero si no vas a usar uno, entonces al menos considera el uso de un restablecimiento. Los restablecimientos eliminan esencialmente las inconsistencias del navegador como alturas, tamaños de fuente, márgenes, encabezados, etc. El restablecimiento permite que el aspecto de tu diseño sea consistente en todos los navegadores.

El MeyerWeb es un reset popular, junto con el reset del desarrollador de Yahoo. O podrías liar siempre con tu propio reajuste, si eso cosquillea tu suposición.

5. Organizar la hoja de estilos con una estructura de arriba hacia abajo

Siempre tiene sentido colocar tu hoja de estilo de una manera que te permita encontrar rápidamente partes de tu código. Recomiendo un formato de arriba hacia abajo que aborde los estilos que aparecen en el código fuente. Por lo tanto, una hoja de estilo de ejemplo se puede ordenar de la siguiente manera:

  1. Clases genéricas (body, a, p, h1, etc.)
  2. #header
  3. #nav-menu
  4. #main-content

<nota-editores> ¡No te olvides de comentar cada sección! </nota-editores>

6. Combinar elementos

Los elementos de una hoja de estilo a veces comparten propiedades. En lugar de volver a escribir el código anterior, ¿por qué no sólo combinarlos? Por ejemplo, los elementos h1, h2 y h3 podrían compartir la misma fuente y el mismo color:

Podemos agregar características únicas a cada uno de estos estilos de encabezado si queremos (es decir, h1 {size: 2.1em}) más adelante en la hoja de estilo.

7. Crear primero tu HTML

Muchos diseñadores crean sus CSS al mismo tiempo que crean el HTML. Parece lógico crear ambos al mismo tiempo, pero en realidad ahorrarás aún más tiempo si creas primero la estructura HTML por completo. El razonamiento detrás de este método es que conoces todos los elementos del diseño del sitio, pero no sabes qué CSS necesitarás con tu diseño. Crear primero el diseño HTML te permite visualizar toda la página como un todo, y te permite pensar en tu CSS de una manera más holística, de arriba hacia abajo.

8. Utilizar varias clases

A veces es beneficioso agregar varias clases a un elemento. Digamos que tienes un <div> "box" que quieres flotar a la derecha, y ya tienes una clase .right en tu CSS que flota todo a la derecha. Simplemente puedes agregar una clase extra en la declaración, así:

Puedes agregar tantas clases como desees (pero separadas por espacios) a cualquier declaración.

<nota-editores> Ten mucho cuidado al usar ids y nombres de clase como "left" y "right". Los usaré, pero sólo para cosas como entradas de blog. ¿Cómo? Imaginemos que, en el camino, decides que prefieres ver la caja flotante a la IZQUIERDA. En este caso, tendrías que volver a tu HTML y cambiar el nombre de la clase - todo con el fin de ajustar la presentación de la página. Esto no tiene sentido. Recuerda - HTML es para el marcado y el contenido. El CSS es para la presentación.

Si debes volver a tu HTML para cambiar la presentación (o estilo) de la página, ¡lo estás haciendo mal!

</nota-editores>

9. Utilizar el Doctype correcto

La declaración del doctype importa mucho sobre si tu marcado y CSS validarán o no. De hecho, la apariencia completa de tu sitio puede cambiar mucho dependiendo del DOCTYPE que declares.

Aprende más acerca de qué DOCTYPE debes utilizar en una lista aparte.

doctype

<nota-editores>

Uso el doctype de HTML5 para todos mis proyectos.

"Lo bueno de este nuevo DOCTYPE, sobre todo, es que todos los navegadores actuales (IE, FF, Opera, Safari) lo mirarán y cambiarán el contenido al modo de estándares, aunque no implementen HTML5. Esto significa que podrías comenzar a escribir tus páginas web usando HTML5 hoy y tenerlas funcionando por mucho, mucho, mucho tiempo. "

</nota-editores>

10. Usar las propiedades abreviadas

Puedes reducir considerablemente tu código usando las propiedades abreviadas al crear tu CSS. Para elementos como padding, margin, font y algunos otros, puedes combinar estilos en una línea. Por ejemplo, un div puede tener estos estilos:

Podrías combinar esos estilos en una sola línea, así:

Si necesitas más ayuda, aquí hay una guía completa sobre las propiedades abreviadas CSS.

11. Comentar tu CSS

Al igual que en cualquier otro idioma, es una gran idea comentar tu código en secciones. Para agregar un comentario, simplemente agrega /* detrás del comentario, y */ para cerrarlo, así:

12. Entender la diferencia entre bloque y los elementos en línea

Los elementos de bloque son aquellos que naturalmente despejan cada línea después de que se declaran, abarcando todo el ancho del espacio disponible. Los elementos en línea toman sólo el espacio que necesitan y no hacen saltos de línea después de usarlos.

Aquí están las listas de elementos que están en línea o en bloque:

Y los elementos en bloque:

13. Alfabetizar tus propiedades

Mientras que esto es más de una extremidad frívola, puede venir en práctico para la exploración rápida.

<nota-editores> Ehh... ¿sacrificar la velocidad de lectura ligeramente mejorada? ¡Me gustaría pasar, pero decide por ti mismo! </nota-editores>

14. Utilizar Compresores CSS

Los compresores CSS ayudan a reducir el tamaño de los archivos CSS eliminando saltos de línea, espacios en blanco y combinando elementos. Esta combinación puede reducir en gran medida el tamaño del archivo, lo que acelera la carga del navegador. CSS Optimizer y CSS Compressor son dos excelentes herramientas en línea que pueden reducir el CSS.

Cabe señalar que la reducción de tu CSS puede proporcionar ganancias en el rendimiento, pero pierde parte de la legibilidad de tu CSS.

use css compressors

15. Hacer uso de clases genéricas

Encontrarás que hay ciertos estilos que estás aplicando una y otra vez. En lugar de agregar ese estilo en particular a cada ID, puedes crear clases genéricas y agregarlas a los ID u otras clases CSS (usando el tip # 8).

Por ejemplo, me encuentro usando float: right y float: left en mis diseños. Así que simplemente añado las clases .left y .right a mi hoja de estilos, y la referencia en los elementos.

De esta manera no tienes que agregar constantemente "float: left" a todos los elementos que necesitan ser flotados.

<nota-editores> Por favor ve a las notas del editor para #8. </nota-editores>

16. Usar "Margin: 0 auto" para centrar diseños

Muchos principiantes en CSS no pueden averiguar por qué no se puede usar simplemente float: center para lograr ese efecto centrado en los elementos de nivel de bloque. ¡Si solo fuera así de fácil! Por desgracia, necesitarás utilizar

para centrar divs, párrafos u otros elementos en tu diseño.

<nota-editores> Declarando que tanto el margen izquierdo como el derecho de un elemento deben ser idénticos, no tienen más remedio que centrar el elemento dentro de tu elemento contenedor. </nota-editores>

17. No sólo envuelvas un DIV alrededor de él

Al comenzar hacia fuera, hay una tentación de envolver un div con una identificación o una clase alrededor de un elemento y crear un estilo para él.

A veces puede parecer más fácil crear estilos de elementos únicos como el ejemplo anterior, pero comenzarás a desordenar tu hoja de estilos. Esto habría funcionado bien:

A continuación, puedes añadir fácilmente un estilo al h1 en lugar de un div padre.

18. Utilizar Firebug

Si aún no has descargado Firebug, detente y ve a hacerlo. En serio. Esta pequeña herramienta es una necesidad para cualquier desarrollador web. Entre las muchas funciones que vienen con la extensión de Firefox (depurar JavaScript, inspeccionar HTML, encontrar errores), también puedes inspeccionar visualmente, modificar y editar CSS en tiempo real. Puedes obtener más información sobre lo que hace Firebug en el sitio web oficial de Firebug.

use firebug

19. Menos Hack

Evita el uso de los pequeños hacks en navegadores-específicos si es posible. Hay una tremenda presión para asegurarte de que los diseños sean consistentes en todos los navegadores, pero el uso de hacks solo hace que tus diseños sean más difíciles de mantener en el futuro. Además, usar un archivo de reset (ver #4) puede eliminar casi todas las irregularidades de renderizado entre navegadores.

20. Utilizar el posicionamiento absoluto con moderación

El posicionamiento absoluto es un aspecto práctico de CSS que te permite definir dónde exactamente un elemento debe colocarse en una página al píxel exacto. Sin embargo, debido a la desviación absoluta del posicionamiento de otros elementos en la página, los diseños pueden ponerse bastante espeluznantes si hay múltiples elementos completamente posicionados que corren alrededor del diseño.

21. Utilizar Text-transform

Text-transform es una propiedad CSS altamente útil que te permite "estandarizar" el formato del texto en tu sitio. Por ejemplo, digamos que deseas crear algunos encabezados que sólo tengan letras minúsculas. Simplemente agrega la propiedad text-transform al estilo del encabezado así:

Ahora todas las letras en el encabezado estarán en minúsculas de forma predeterminada. Text-transform te permite modificar tu texto (primera letra en mayúscula, todas las letras en mayúsculas o minúsculas) con una propiedad simple.

22. No utilices márgenes negativos para ocultar tu h1

A menudo, la gente utilizará una imagen para su texto de encabezado y, a continuación, utiliza display: none o un margen negativo para desplazar el h1 de la página. Matt Cutts, director del equipo de Webspam de Google, ha declarado oficialmente que esta es una mala idea, ya que Google podría pensar que es spam.

Como dice el Sr. Cutts explícitamente, evita esconder el texto de tu logotipo con CSS. Sólo usa la etiqueta alt. Mientras que muchos afirman que todavía puedes utilizar CSS para ocultar una etiqueta h1, siempre y cuando el h1 sea el mismo que el texto del logotipo... prefiero errar en el lado seguro.

23. Validar tu CSS y XHTML

Validar tu CSS y XHTML hace más que dar un sentido de orgullo: te ayuda a detectar rápidamente errores en tu código. Si estás trabajando en un diseño y por alguna razón las cosas simplemente no se ven bien, intenta ejecutar markup y validador CSS y verás qué errores aparecen. Por lo general, encontrarás que se te olvidó cerrar un div en alguna parte, o un punto y coma perdido en una propiedad CSS.

24. Ems vs. Píxeles

Siempre ha habido un fuerte debate sobre si es mejor usar pixeles (px) o ems (em) al definir los tamaños de fuente. Los píxeles son una forma más estática de definir los tamaños de fuente y los ems son más escalables con diferentes tamaños de navegador y dispositivos móviles. Con la llegada de muchos dispositivos como portátil, móviles, etc... usar ems cada vez se convierten en el valor predeterminado para las medidas de tamaño de fuente, ya que permiten la mayor flexibilidad. Puedes leer más acerca de por qué debes usar ems para tamaños de fuente en este hilo del foro reflexivo. About.com también tiene un gran artículo sobre las diferencias entre los tamaños de medición.

<nota-editores> No me lleves a la granja en este - pero yo estaría dispuesto a apostar que, gracias al zoom del navegador, la mayoría de los diseñadores están por defecto a los diseños basados en píxeles. ¿Qué piensas? </nota-editores>

25. No subestimes la lista

Las listas son una gran manera de presentar los datos en un formato estructurado, por el cual es fácil de modificar el estilo. Gracias a la propiedad de visualización, no tienes que utilizar la lista como un atributo de texto. Las listas también son ideales para crear menús de navegación y cosas similares.

Muchos principiantes utilizan divs para cada elemento de la lista porque no entienden cómo utilizarlos correctamente. Vale la pena el esfuerzo de utilizar el cepillo en los elementos de la lista de aprendizaje para estructurar los datos en el futuro.

<nota-editores>

A menudo verás los enlaces de navegación de la siguiente manera:

Aunque, técnicamente, esto funcionará bien después de un poco de CSS, es descuidado. Si estás agregando una lista de enlaces, ¡usa una lista desordenada, ganso tonto!

</nota-editores>

26. Evitar los selectores extra

Es fácil de agregar sin saberlo, añadir selectores extra a nuestra hoja de estilos CSS la desordena. Un ejemplo común de agregar selectores adicionales es con listas.

En este caso, sólo el .someclass li habría funcionado bien.

La adición de selectores adicionales no traerá Armageddon ni nada parecido, pero hacen que tu CSS no sea tan simple y limpio como sea posible.

27. Añadir márgenes y relleno a todo

Diferentes navegadores procesan elementos de forma distinta. IE hace que ciertos elementos difieran de Firefox. IE 6 hace elementos de forma diferente a IE 7 e IE 8. Mientras que los navegadores están empezando a adherirse más estrechamente a los estándares de la W3C, todavía no son perfectos (*tos IE tos*).

Una de las principales diferencias entre las versiones de los navegadores es cómo se renderizan los rellenos y los márgenes. Si aún no estás utilizando un reset, es posible que desees definir el margen y el relleno de todos los elementos de la página, para que sea seguro. Puedes hacerlo rápidamente con un restablecimiento global, así:

Ahora todos los elementos tienen un relleno y un margen de 0, a menos que se definan por otro estilo en la hoja de estilo.

<nota-editores> El problema es este, porque TODO se pone a cero con este método, potencialmente te causará más daño que ayuda. ¿Estás seguro de que quieres que los márgenes de cada elemento y el relleno se pongan en cero? Si es así, eso es perfectamente aceptable. Pero al menos lo considero. </nota-editores>

28. Cuando estés listo, prueba CSS orientado a objetos

La programación orientada a objetos es la separación de elementos en el código para que sean más fáciles de mantener la reutilización. El CSS orientado a objetos sigue el mismo principio de separar diferentes aspectos de la hoja de estilos en secciones más lógicas, haciendo que tu CSS sea más modular y reutilizable.

Esta es una presentación de diapositivas sobre cómo funciona el CSS orientado a objetos:

Si eres nuevo en el juego CSS/XHTML, OOCSS podría ser un reto al principio. Pero los principios son muy buenos para entender para la programación orientada a objetos en general.

29. Utilizar hojas de estilos múltiples

Dependiendo de la complejidad del diseño y del tamaño del sitio, a veces es más fácil hacer hojas de estilo múltiples más pequeñas en lugar de una hoja de estilo gigante. Aparte de ser más fácil para el diseñador de administrar, múltiples hojas de estilo te permiten dejar fuera el CSS en ciertas páginas que no los necesitan.

Por ejemplo, podrías tener un programa de sondeo que tendría un conjunto único de estilos. En lugar de incluir los estilos de la encuesta en la hoja de estilo principal, podrías crear un poll.css y asignar la hoja de estilo sólo a las páginas que muestran la encuesta.

<nota-editores> Sin embargo, asegúrate de considerar el número de solicitudes HTTP que se están realizando. Muchos diseñadores prefieren desarrollar con múltiples hojas de estilo, y luego combinarlas en un archivo. Esto reduce el número de solicitudes HTTP a una. Además, el archivo completo se almacenará en la caché del equipo del usuario. </nota-editores>

30. Comprobar si hay elementos cerrados primero al depurar

Si notas que tu diseño se ve un poco flojo, hay una buena probabilidad de que olvidaste cerrar una etiqueta </div>. Puedes utilizar el validador de XHTML para que te ayude a olfatear hacia fuera todas las clases de errores también.

También puedes disfrutar...

  • Síguenos en Twitter, o suscríbete al Feed RSS de Tuts+ para obtener más información sobre tutoriales y artículos de desarrollo web.
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.