CSS puede ser un lenguaje de marcado extremadamente poderoso para los diseñadores.

Sin embargo, el CSS que se produce solo es tan bueno como los principios que sigue el diseñador que crea el código.

Si bien puede pensar que cualquiera puede crear CSS, existe una gran diferencia entre escribir CSS y producir CSS de primera clase.

Para asegurarte de que estás en el camino correcto, aquí hay ocho principios de CSS que todo diseñador web debería seguir.

1. Tómese el tiempo para validar

Si va a invertir tiempo en codificar CSS, solo tiene sentido tomarse el tiempo para validar el código que creas Sin embargo, nunca deja de sorprenderme cuántos diseñadores se saltan este paso vital. Validar su código le permite solucionar cualquier problema y asegurarse de que funcione bien para sus visitantes.

Además de validar su archivo CSS, también debe validar sus archivos HTML o XHTML. Antes de validar estos archivos, asegúrese de haberse tomado el tiempo para declarar el HTML apropiado o XHTML DOCTYPE. Declarar tu DOCTYPE puede parecer un detalle mundano, pero no puedo contar cuántas discusiones he tenido con diseñadores frustrados que siguieron teniendo problemas con un diseño, solo para descubrir que fue porque habían declarado un DOCTYPE obsoleto (o no había declarado un DOCTYPE en absoluto).

2. Documento (pero no en tu código)

Si está trabajando en un proyecto solo o con un equipo de diseñadores, es importante documentar el trabajo que crea. Probablemente pueda ver por qué esto sería importante dentro del contexto de un equipo de diseño, pero puede que se pregunte por qué sería importante si está trabajando en un proyecto en solitario. Bueno, siempre existe la posibilidad de que su proyecto en solitario eventualmente se convierta en un proyecto grupal, y si esto sucede, es mucho más fácil tener documentación a mano que intentar dar marcha atrás y crearla. Sin embargo, incluso en el caso de que su proyecto permanezca como una exposición individual, se sorprenderá de lo útil que es la documentación cuando decide volver a visitar un proyecto después de no haberlo visto durante un año.

Cuando se trata de crear documentación para código CSS, el impulso natural de la mayoría de los diseñadores es agregarlo directamente a su código colocándolo entre / * y * /. Al igual que muchos de los principios en esta lista, no hay nada técnicamente incorrecto acerca de tomar este enfoque. Sin embargo, agregar comentarios directamente a su código CSS aumentará el tamaño del archivo, lo que a su vez puede aumentar los tiempos de carga y ralentizar el rendimiento general de un sitio web. Si realmente quiere escribir un código CSS de primera, debe documentar su código, pero en un archivo separado.

Aunque honestamente creo que es más efectivo documentar en un archivo separado, sé que hay muchos archivos que simplemente no están de acuerdo con esta práctica. Si se niega a documentar en un archivo separado, lo mejor que puede hacer es usar un compresor CSS (de hecho, incluso si elige usar un archivo separado para la documentación, aún puede beneficiarse al usar un compresor CSS). Puedes usar esto Compresor CSS de CSS Drive Gallery, o simplemente busque en Google para encontrar un compresor CSS alternativo.

3. Di no a Hacks

Aunque los hacks se han convertido en una práctica aceptable para muchos dentro de la comunidad de CSS, esto no significa que el "pirateo de CSS" sea un principio que usted debería seguir. El problema con este enfoque de diseño es que significa que busca intencionalmente una solución complicada a los problemas. Si bien puedes pensar que uno o dos hacks de vez en cuando no dañarán a nadie, entrar en la mentalidad de "piratear" cualquier problema que encuentres puede tener un impacto negativo en tu mentalidad de diseño general.

Evitar los piratas informáticos es un consejo que los expertos han estado dispensando durante un tiempo. Puedes retroceder hasta 2003 y ver eso Peter-Paul Koch (que es un consumado desarrollador y autor) ha estado advirtiendo a los diseñadores de las implicaciones de los hacks de CSS durante un tiempo: "El monstruo de la complejidad ha reaparecido, justo en el centro del desarrollo web moderno. Hoy en día no se manifiesta como una tabla anidada interminablemente, sino como un hack de CSS infinitamente complicado ".

4. No abuse de Divs

Debido a que los divs proporcionan un alto nivel de flexibilidad, puede ser fácil abusar de ellos. De hecho, este problema se ha vuelto tan común entre los diseñadores que la comunidad CSS ha creado su propio término para etiquetar este tema: divitus. Para evitar ser víctima de esta condición, antes de usar automáticamente una etiqueta div, siempre debe preguntarse si hay una etiqueta HTML real que hará el trabajo por usted. Por ejemplo, en lugar de crear múltiples divisiones de encabezado, ¿por qué no usa las etiquetas de encabezado HTML que ya están disponibles, como H1 y H2?

Una vez que comience a considerar el problema de los divs, verá rápidamente los beneficios de usar la etiqueta HTML adecuada en lugar de crear automáticamente un nuevo div. No solo puede reducir la cantidad de código que debe crear (lo que le ahorrará tiempo, además de reducir el tiempo de carga de su sitio web), sino que también le dará a su código una estructura más lógica.

5. Pon pensamiento en tus nombres de clase

Si le preguntas a un diseñador nuevo o sin experiencia sobre cómo deciden nombrar sus clases, podrían decir que realmente no importa. Si bien esto es técnicamente cierto, esta es una visión muy corta de nombrar clases de CSS. Aunque hay diseñadores que caen en la categoría de no preocuparse por los nombres de las clases de CSS, también hay diseñadores que sí piensan en sus nombres de clase, pero en realidad adoptan el enfoque equivocado.

Ya que no quiero simplemente golpearlo en la cabeza con ejemplos teóricos, permítame explicar esto en términos concretos. Digamos que está creando una clase para controlar uno de los cuadros en su página. El cuadro se ubicará en la parte inferior de la página, contendrá los comentarios de los lectores y usted usará CSS para darle un fondo de color canela y controlar el relleno. En lugar de nombrar a este .tan-box (que es lo que muchos diseñadores bien intencionados harían), llámalo .comment-box. La razón por la que .comment-box es un nombre de clase mejor que .tan-box es porque si decides cambiar el color de fondo a azul en el camino (o decides mover el cuadro desde la parte inferior de la página a un área diferente) , no lo confundirá a usted ni a ningún otro diseñador que esté revisando el CSS de ese sitio web.

6. Abrazo taquigrafía

Si bien la taquigrafía puede ser confusa para los diseñadores que recién están empezando a escribir su propio código CSS, una vez que te acostumbras al estilo de la taquigrafía, se convierte en una de las prácticas más efectivas que puedes seguir como diseñador .

La taquigrafía tiene muchos beneficios. Por un lado, reduce el tamaño de sus archivos, lo que reducirá el tiempo de carga de su sitio web. Además, no solo facilita la organización del código, sino que también lo hace más sencillo si necesita realizar cambios en el código en el futuro. A medida que comienzas a adaptarte a la taquigrafía, también debes practicar la escritura de tu código en una línea (en lugar de distribuir declaraciones en múltiples líneas).

7. No te olvides de las impresoras

Como diseñador, está mucho más inclinado técnicamente que cualquier otra persona en la población general. Como usted es parte de una minoría que vive y respira tecnología, existen muchos hábitos que la mayoría de las personas nunca han pensado. Por ejemplo, es probable que hayas salido de tu camino para eliminar la mayor cantidad posible de "rastros de papel" en tu vida. Sin embargo, es importante recordar que la mayoría de la población todavía imprime cosas de manera regular. Si bien probablemente etiquete un elemento con del.icio.us cuando desee guardarlo para referencia futura, el usuario promedio de Internet imprimirá esa misma página.

Dado que las personas todavía están imprimiendo información de Internet, es importante usar CSS para que su contenido sea amigable con las impresoras . Los visitantes apreciarán todo el trabajo que han realizado para crear un hermoso diseño para el sitio web que visitan, pero cuando decidan imprimir una página de ese sitio web, lo apreciarán aún más cuando se den cuenta de que su impresión solo contiene el el texto que quieren (y ninguno de los increíbles gráficos que se ven geniales en su computadora pero que desperdiciarían una tonelada de tinta de su impresora). Debido a que CSS hace que sea bastante simple garantizar que el contenido esté correctamente formateado cuando se imprime, no hay excusas para que un verdadero diseñador descuide este paso del proceso de diseño.

8. Nunca dejes de aprender

Puede pensar que este principio final suena a cliché, pero podría decirse que es el más importante de toda la lista. Si estás dedicado a ser el mejor diseñador posible, debes asegurarte de que siempre trabajas para expandir tus conocimientos de CSS . Afortunadamente, esto es fácil de hacer si tiene el deseo y la voluntad de comprometerse a continuar su educación CSS. Si bien la educación continua puede ser una tarea difícil para las personas en muchas industrias que no son de naturaleza técnica, porque Internet es literalmente la base de CSS, la cantidad de recursos gratuitos de los que puede aprender es literalmente infinita. Si crees que estoy exagerando, simplemente escribe "CSS" en Google y verás que hay 483,000,000 de resultados para que puedas navegar.

Además de aprender de los recursos en línea (e imprimir recursos si lo prefiere), puede aprender mucho de otros diseñadores de CSS. Ya sea que analice su trabajo, escuche los consejos que está dando en línea o hable con ellos en situaciones presenciales, puede obtener un gran valor interactuando y colaborando potencialmente con otros diseñadores que se comprometan a seguir los principios de diseño de CSS de primera categoría y producción de piezas de trabajo increíbles.