Sí, CSS es difícil, y la gran variedad de opiniones, técnicas y requisitos de escala hacen que aprender y escribir un buen CSS sea aún más difícil. Algunas técnicas son excelentes para sitios más pequeños, algunas se mantienen bien inicialmente pero son irritantes de mantener, algunas son difíciles de personalizar, algunas simplemente molestan a la gente de manera incorrecta … y créanme, TODOS tienen una opinión sobre CSS. Aquí están los míos.
(Contexto: trabajo para Hashrocket, una tienda de Ruby on Rails que desarrolla aplicaciones de mediana a gran escala (unas pocas docenas de visitas por aplicación, nada de “nivel empresarial” pero grandes aplicaciones)):
- Mi recurso favorito para los atributos y el comportamiento de CSS es el MDN (Mozilla Developer Network): cada vez que te estás preguntando acerca de un atributo, simplemente busco en Google “mdn” y luego el elemento en cuestión. Como se respondió aquí, Stack Overflow es una buena manera de ver a algunas personas lidiar con un problema (aunque la calidad de la solución varía enormemente).
- La mejor manera absoluta de aprender CSS es haciendo. CSS se trata de establecer un conjunto de estilos organizados y mantenibles específicos para su sitio , y un libro solo puede llevarlo hasta ese punto.
- No comience con marcos. Potencialmente, ni siquiera termine con marcos. Como mínimo, acostúmbrese a crear páginas sin sistemas de cuadrícula, Twitter Bootstrap, Normalize o cualquier otra solución de “inicio rápido” que exista, de modo que si decide probarlas, comprenderá cuáles son o qué no son No estoy haciendo por ti. Por ejemplo, creo que los sistemas de cuadrícula son generalmente innecesarios, y los estilos no utilizados de un marco que flota en su CSS es un problema similar a las variables no utilizadas en el código.
- Una tentación fácil al escribir estilos es usar en exceso el principio DRY (“No te repitas”). El hecho de que dos elementos sean rojos no significa que deberían compartir una clase de ‘.red’. Ambos son rojos. No piense demasiado en las herencias de estilo, o su CSS se convertirá rápidamente en una maraña de estilos superpuestos, y su HTML se saturará rápidamente con clases superfluas.
- Pienso en CSS como un conjunto de variables heredadas. Si le da estilos a algo como “.person”, acaba de definir una variable global, aplicable en todo su sitio, en todas partes. Intentamos minimizar las definiciones de estilo globales en nuestras aplicaciones, ya que puede dar como resultado que los estilos se hereden de formas inesperadas y utilice nombres de clase / ID potencialmente útiles (definitivamente un problema en aplicaciones más grandes). Si tiene un “.person” solo en la sección “#people_list”, entonces ese estilo debe estar anidado bajo “#people_list”, en lugar de flotar en el espacio de nombres global.
- Al comenzar, no se distraiga con las transiciones CSS, los gradientes o los logotipos “dibujados en CSS puro” o las elegantes demostraciones de CodePen. Ese tipo de cosas son tediosas y llamativas, pero no necesariamente difíciles (o prácticas). La parte difícil de CSS (y la parte donde las cosas tienden a desmoronarse en sitios más grandes) es la organización fundamental de los estilos. Siempre sea consciente de cómo se heredan los estilos, mantenga bajo control sus estilos ‘globales’ antes mencionados y estará bien. Es una batalla constante mantener ordenadas las hojas de estilo, créeme.
Honestamente podría hablar durante horas sobre estas cosas. Hay una variedad positivamente inquietante de escuelas de pensamiento sobre cómo estructurar CSS y mantenerlo mantenible. Afortunadamente, muchos de los problemas del pasado (compatibilidad con IE, compatibilidad parcial con CSS3) son mucho menos problemáticos en estos días, y existen algunas herramientas modernas para facilitar la escritura de CSS (personalmente me encanta SASS (Sass – Hojas de estilo sintácticamente impresionantes)) . Entonces, su verdadero desafío es tal como lo describió: estructura. Esperemos que algunos de estos puntos sean razonablemente útiles y no solo abrumadores. Si desea someterse a más de mis pensamientos sobre esto, no dude en ponerse en contacto conmigo.
- ¿Alguna vez ha construido un proyecto de codificación desde cero? Si es así, ¿qué construiste?
- Cómo eliminar un par de valores clave clave en una cadena de consulta sin volver a cargar usando JavaScript
- ¿Alguna herramienta de mapa de calor funciona correctamente para elementos cargados dinámicamente?
- ¿Por qué a veces es mejor usar Nginx en lugar del servidor Apache?
- ¿Cómo podría hacer un sitio web como http://www.bmxcustomizer.com/?
