¿Cuál es el camino correcto (pedagogía) para dominar CSS?

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.

He oído de amigos desarrolladores que provienen de un entorno más de software (C, C ++, Java) que CSS para ellos es el lenguaje más difícil que han aprendido. Esto me sorprende porque pienso lo mismo para lenguajes como C, especialmente que entiendo, pero no puedo comprender completamente la escala y el alcance de dicho lenguaje.

Creo que 2013 es un gran año para comenzar a aprender CSS. De hecho, es mucho más fácil que si comenzaras a aprender CSS en 2007/2008 cuando las peculiaridades del navegador eran muy pocas. Cuando tenía que admitir versiones malas de IE como 6 y 7, afortunadamente ya no es necesario admitir esos dos navegadores en la mayoría de las situaciones, ni tampoco admitir IE8.

Hay tantos excelentes cursos y recursos en línea que creo que son las formas correctas de aprender CSS. Siempre manténgase a la mano, siempre intente construir cosas y lleve sus habilidades de CSS al límite. Ponte a prueba, busca sitios que hagan cosas únicas con CSS, luego investiga e intenta replicar lo que ves.

Hay algunos grandes experimentos en CodePen para mirar. Algunas personas realmente llevan CSS al límite allí, siempre es bueno si quieres sorprenderte, sorprenderte y aprender algunos trucos nuevos y geniales.

Libros:

CSS: La guía definitiva: Eric A. Meyer: 9780596527334: Amazon.com: Libros – El padrino de CSS: Eric Meyer. Esto es imprescindible en tu biblioteca.

CSS: The Missing Manual: David Sawyer McFarland: 9780596802448: Amazon.com: Libros – Otro gran libro.

CSS3 para diseñadores web: un libro más moderno y actualizado con algunos trucos geniales y conocimientos sobre CSS3.

CSS Essentials – CSS Essentials de Smashing Magazine. Otro gran libro práctico de la revista Smashing.

Cursos:

CSS: una descripción general: el curso de Codeacademy para CSS es sorprendentemente genial. Aunque conozco CSS, lo hice y conozco a diseñadores que aprendieron los fundamentos de CSS al tomar este curso.

Aprenda CSS – Code School – CSS Cross Country. Solía ​​costar dinero, no estoy seguro si todavía está pagado, pero lo comprobé y dice que es gratis. Por lo tanto, algunos de ellos son gratuitos y otros son de pago, un excelente recurso que también he usado antes.

Blogs:

CSS-Tricks – Una buena lista de trucos CSS útiles para resolver problemas comunes usando CSS. Un marcador favorito.

Desarrollo del lado del cliente y del lado del servidor – Smashing Magazine Code. No solo CSS, sino un excelente recurso.

Tutoriales de desarrollo web, desde principiante hasta avanzado: una vez más, no solo un recurso CSS, sino todas las facetas del desarrollo front-end y back-end. Sin embargo, tienen tutoriales útiles para CSS, así como HTML5 y Javascript.

Recursos:

Bootstrap: un excelente marco CSS / front-end. He aprendido algunos trucos ingeniosos al ver el código fuente de esto.

MENOS “El lenguaje de hoja de estilo dinámico: MENOS es una excelente manera de escribir CSS. Sigue de cerca la sintaxis original, pero le permite anidar selectores, le permite tener variables y funciones, declaraciones condicionales, conversión matemática y de unidades. Así es como yo escribo mi CSS, y no volvería a CSS vainilla después de usar esto.

Sass: hojas de estilo sintácticamente impresionantes: muy parecidas a MENOS, solo que mucho más potentes, pero requieren un poco más de configuración para su uso. No sigue la sintaxis CSS estándar tan de cerca, pero es muy potente y más inteligente que LESS.

Como dije antes, comencé este camino como diseñador gráfico en 1986. Y después de muchos años como diseñador gráfico, diseñador web, desarrollador web y geek de TI, me di cuenta de que, todos los días, encuentro esencial conceptos que puede haber perdido (o más a menudo, aprendido y olvidado). Así que no te preocupes, es una evolución y progresión constantes, y nunca terminarás.

En términos generales, si está buscando ” CSS de grado de producción del mundo real ” en el nivel de miles de páginas, está buscando algún tipo de CMS o motor de contenido. En general, si bien puedes diseñar mucho, hay pautas proporcionadas (enganches a la API). Pero tiene razón, si está utilizando (por ejemplo) WordPress y jQueryUI en la misma página, tiene dos conjuntos diferentes de ganchos CSS con los que lidiar, y son slapdash y a menudo arbitrarios.

Uno de los otros carteles mencionó a Eric Meyer, y lo respaldaré. Sus libros y sitio fueron formativos en gran parte de mi base CSS, en aquellos días. Echa un vistazo a Eric Meyer en CSS (2003), y más Eric Meyer en CSS (2004). Son una gran exploración de cómo CSS puede evolucionar a través del diseño, desde un boceto en papel hasta una pieza final.

Otro, también formativo, ha recibido un lavado de cara reciente. CSS Zen Garden (La belleza del diseño CSS) se ha rehecho a la luz de HTML5 y CSS3. En 2004-05, cuando realmente estaba tratando de fortalecer mis habilidades de diseño, encontré este sitio y el libro The Zen of CSS Design . Aquí está el concepto en pocas palabras: los diseñadores tienen una página HTML, la misma página HTML que cualquier otro diseñador, y eso no se puede cambiar. Los remitentes usan ese HTML y crean su CSS dentro de ciertas limitaciones, como una exploración de lo que es posible, y lo presentan como una inspiración. El libro recorre algunos de los desafíos de diseño (navegador cruzado, versión cruzada, plataforma cruzada).

Pero no te equivocas cuando dices que la mayoría de los diseñadores de CSS tienden a adoptar un enfoque básico para elaborar su CSS. En los viejos tiempos, CSS se trataba en gran medida como una ocurrencia tardía, a menudo descuidada. Los diferentes navegadores tratarían de forzar sus propios estándares, lo que no condujo a ningún estándar durante bastante tiempo. Sin embargo, eso está cambiando a medida que los diseñadores y desarrolladores retroceden.

Si recién está comenzando, debe entender cosas como SMACSS de Snook (como se mencionó anteriormente), BEM y Atomic Design y determinar cuál de estos enfoques se adapta a su estilo de trabajo. En el mundo real, probablemente termines usando algunos de ellos al mismo tiempo. Y no te sientas abrumado por ellos. Pueden parecer complicados y sentirse muy centrados en el desarrollador. Pero es la única forma de administrar CSS más grande sin perder la cabeza y perder la cabeza. Deja que crezca en ti.

Hay algunos buenos recursos mencionados aquí: http://davidwalsh.name/starting-css

Ok, conoces el HTML y CSS básicos y ahora necesitas las técnicas más avanzadas.

-Cómo centrar un elemento verticalmente
6 métodos para el centrado vertical con CSS

-Cómo poner un elemento en la parte inferior
http://stackoverflow.com/questio

-Clearfix hack
http://nicolasgallagher.com/micr

Estos son dos enfoques estructurados muy populares para CSS:
Arquitectura escalable y modular para CSS
CSS orientado a objetos