Has estado codificando por un tiempo y conoces un archivo CSS. Ciertamente, usted no es un maestro, pero con el número suficiente de violines puede llegar a donde quiere ir. Sin embargo, se pregunta si alguna vez superará ese punto en el que CSS es una lucha tan difícil. ¿Alguna vez podrá realizar un diseño complejo sin recurrir finalmente a prueba y error para ver qué funciona y qué no?
La buena noticia es que, de hecho, puede superar ese punto frustrante en el que sabe suficiente CSS para codificar un sitio web, pero carece de la base sólida que le permite codificar sin la molestia de no entender exactamente cómo va a llegar a su destino. Vamos, y este punto está mucho más cerca de lo que piensas. Propongo que hay cinco temas que mejorarán drásticamente su comprensión de CSS. Pase un tiempo leyendo sobre cada uno durante las próximas veinticuatro horas y cambiará la forma en que codifica para siempre.
1. Envuelve tu mente alrededor de los contextos de posicionamiento
Si realmente desea tener una comprensión sólida de cómo usar CSS para mover elementos HTML a donde quiere que vayan, absolutamente debe tener un control sobre los contextos de posicionamiento. Y no me refiero solo a una comprensión casual, me refiero a un profundo conocimiento de sus diferencias, comportamientos, peculiaridades, etc.
En realidad, hay cinco valores de posición que debe comprender. Si no puede nombrar a los cinco sin buscarlos, entonces definitivamente es un candidato principal para este poco de educación. Aquí están: estática, fija, relativa, absoluta y hereditaria.
Debe conocer y comprender los cinco, pero los dos grandes que realmente cambiarán la forma en que codifica son el posicionamiento absoluto y relativo. Aprender a manejar estos dos contextos de posicionamiento por separado, y luego saltar a cómo funcionan juntos, cambiará fundamentalmente la forma en que ve el diseño CSS, lo prometo. Es una revelación que hará tu trabajo infinitamente más fácil.
Recursos para llegar allí
El Lowdown en Posicionamiento Absoluto vs. Relativo
Esta es mi inmersión profunda en el tema del contexto de posicionamiento. Menciono y explico brevemente los cinco, pero realmente me enfoco en los dos grandes: cómo difieren, cómo son diferentes y cómo trabajan juntos. Lea esta pieza y estará en su camino hacia el posicionamiento de CSS sin dolor de cabeza.
Posicionamiento CSS 101
Esta pieza viene del venerable. Una lista aparte blog, así que ya sabes que va a ser exhaustivo e increíblemente educativo. El artículo se publicó en 2010, pero la información sigue siendo perfectamente relevante y sirve como una excelente introducción a los cinco contextos de posicionamiento. No es un artículo muy visual, pero tiene muchos ejemplos de código simples para facilitarte cada concepto.
Aprender posicionamiento CSS en diez pasos
Este es un resumen fantásticamente breve de los diversos contextos de posicionamiento. En lugar de un artículo largo, esta página presenta una pequeña caja con diez pestañas. Cada pestaña tiene un pequeño fragmento de código y una oración o dos que explican el código. A la derecha hay un ejemplo de diseño en vivo que se actualiza con cada pestaña. Este formato es fantástico para vincular visualmente los fragmentos de código a los diseños que producen, y recomiendo darle un vistazo si se enfrenta principalmente a explicaciones de texto como la de ALA.
2. Flotadores maestros
Cuando estás aprendiendo CSS por primera vez, los flotadores parecen ser uno de los sistemas de diseño más jodidos que puedas imaginar. Una vez que aprenda a usarlos en un nivel básico, tendrá que aprender todo sobre cómo los padres que solo tienen hijos flotantes tienen una altura colapsada, lo que conduce a cuarenta y siete maneras diferentes de resolver el problema a través de arreglos claros y manipulaciones de desbordamiento.
Afortunadamente, a la larga, te acostumbras a los conceptos detrás de los flotadores e incluso pueden llegar a ser tan fáciles de usar que no les prestas mucha atención. Lo único que se interpone entre usted y ese objetivo es un artículo sólido o dos que realmente profundice y explique a fondo el comportamiento y las técnicas de flotación desde cero.
Recursos para llegar allí
Todo lo que nunca supiste sobre CSS Flota
En este artículo, cubro casi la gama completa de temas relacionados con los flotantes en CSS. Comienza con una discusión básica de qué son las flotillas y cómo funcionan. Después de esto, hablo sobre cómo los flotadores afectan a las cajas de los elementos involucrados, cómo los flotadores se vuelven extraños con elementos de diferentes alturas, las nueve reglas que cubren el comportamiento de los flotadores y, por supuesto, la debacle de la altura colapsada y cómo solucionarlo.
Todo sobre flotadores
Chris Coyier siempre ha sido mi autor favorito cuando se trata de temas relacionados con CSS y su introducción a floats no decepciona. Si está buscando una discusión breve pero directa sobre cómo trabajar con flotadores, esta pieza lo tiene cubierto. Me gustan particularmente las ilustraciones simples y atractivas que se usan en todo el artículo.
El Misterio De La Propiedad Del Flotador CSS
Si bien las piezas de Chris Coyier son generalmente breves y al punto, el contenido de Smashing Magazine suele ser bastante extenso con muchos ejemplos y discusiones relevantes. Este artículo presenta el concepto de flotadores, le explica todo sobre cómo usarlos y borrarlos, y luego comienza una discusión sobre dónde se ven usualmente los flotadores en sitios del mundo real. Si necesitas ver que la teoría cobra vida, esta es para ti.
3. Conozca sus selectores
Una de las claves para escribir CSS de forma correcta es tener una idea clara de qué selectores de CSS están disponibles para usted, cómo funcionan y el grado en que se admiten en varios navegadores. Parece un tema bastante simple, pero en realidad el mundo de los selectores de CSS es bastante complejo.
Hay un montón de diferentes cosas interesantes para aprender aquí, desde el uso de selectores de valor de atributo y palabras clave de orientación en los nombres de clase hasta cómo el selector universal puede ser útil para depurar su código. Incluso si crees que puedes arreglártelas personalmente sin entender a un montón de selectores sofisticados, ¡la verdad es que otros programadores usan estas cosas todos los días y necesitas poder entender lo que estás viendo cuando accedes a View Source!
Recursos para llegar allí
Selectores de CSS: sólo los bits difíciles
Este es un artículo divertido que analiza los aspectos más complicados de los selectores de CSS. Me salto las cosas del nivel del suelo y me dirijo directamente a cómo el concepto de DOM se traduce en la orientación de varios aspectos de su documento con CSS. Aprenderá todo sobre la selección de niños y hermanos, cómo encadenar selectores y mucho más.
Los 30 selectores de CSS que debes memorizar
Jeffrey Way es un web dev rockstar y artículos como este demuestran por qué. Este artículo de Nettuts + cubre una amplia gama de selectores de CSS en un formato simple y breve que pone mucho énfasis en el soporte del navegador. Sorprendentemente, Jeff incluso codificó páginas de ejemplo en vivo para cada uno de los treinta selectores.
Selectores de atributos CSS: cómo y por qué debería usarlos
Los selectores de valor de atributo son uno de los subconjuntos más potentes de los selectores de CSS, y CSS3 realmente aumenta esa potencia. No vas a creer lo versátiles que pueden llegar a ser tus selectores con un pequeño atributo de valor mágico. Después de leer este artículo, estará lanzando frases como "selector de valor de atributo de subcadena arbitraria". como un profesional.
4. Aprender los conceptos de codificación DRY
No te repitas. Esta simple frase tiene implicaciones drásticas cuando se trata de la codificación. Cuando realmente te sumerges en las prácticas de codificación DRY, el resultado es un código más limpio, menos trabajo y un nuevo y hermoso flujo de trabajo que es tan poderoso como asombroso.
A diferencia de los otros temas anteriores, que son bastante limitados, este es un tema bastante vasto que cubre todo tipo de prácticas, técnicas e ideas diferentes. Curiosamente, una de las cosas que recientemente me ha enfocado en las prácticas de codificación DRY es el uso de preprocesadores CSS.
Aunque muchos afirman que los preprocesadores conducen a malas prácticas de codificación, la realidad es la opuesta. Obviamente, los preprocesadores mismos ayudan a evitar la repetición manual, pero va más allá de eso. ¡El examen de la salida de herramientas como LESS y SASS y los objetivos para los idiomas en general me han llevado a escribir mejor CSS puro! Una vez que domines conceptos como @extend en Sass, no puedes evitar pensar en las implicaciones cuando estás codificando solo con CSS.
Recursos para llegar allí
CSS SECO: No repitas tu CSS
En este artículo, Steven Bradley le presenta el tema de DRY CSS y cubre algunos de sus principales principios y objetivos. Reduce la práctica a tres ideas simples y le muestra cómo implementar estas ideas en un flujo de trabajo real. Los conceptos son en gran parte tomados de una presentación de Jeremy Clarke que cubre el mismo tema.
Una introducción al CSS orientado a objetos (OOCSS)
Como mencioné anteriormente, las ideas inherentes al movimiento DRY CSS tienen un gran alcance y están directamente relacionadas con los conceptos de otras construcciones. OOCS es una metodología cada vez más popular que apunta a ayudarlo a crear hojas de estilo más rápidas y eficientes con una organización superior y menos repetición. Hay dos principios principales en funcionamiento en OOCS: separación de la estructura de la piel y separación de contenedores y contenido. Este artículo de Smashing Magazine lo guiará a través de las ideas básicas y lo ayudará a aplicarlas a su propio trabajo.
Una introducción a las pautas de SMACSS para escribir CSS
¿Recuerdas a Steven Bradley del primer artículo en DRY CSS? También escribió esta pieza, que explica un proyecto que es similar pero que está separado de OOCS: SMACSS (un proyecto de Jonathan Snook). Al igual que con OOCSS, SMACSS tiene dos objetivos principales. La primera es aumentar el valor semántico de una sección de HTML y contenido, y la segunda es disminuir la expectativa de una estructura HTML específica. Este artículo explica ambos objetivos en detalle y proporciona ejemplos de código útiles para que pueda ver SMACSS en acción.
5. Conozca el soporte de su navegador
La quinta y última clave para mejorar tu CSS es saber qué funciona dónde. CSS3 es demasiado tentador para que la mayoría de nosotros lo ignoremos, pero la verdad es que muchos de ellos no funcionan en ciertos navegadores (¿por ciertos navegadores? Por supuesto que me refiero a IE).
El gran secreto que necesitan los desarrolladores web para principiantes es no tener que memorizar cada una de las funciones de CSS y cómo lo maneja cada navegador conocido, sino que hay recursos absolutamente sorprendentes disponibles que le brindan esta información. Libre, solo hay que saber dónde mirar.
Recursos para llegar allí
Compatibilidad con navegadores de Nails en CSS3 y HTML5: recursos inestimables para usar hoy
En este artículo, les presento a los relativamente pocos sitios que he marcado para verificar el soporte del navegador. Estos recursos son fantásticos, visuales y le brindan la información que necesita en un santiamén para que pueda volver a la codificación. ¡Echa un vistazo para ver cuáles son!
Soporte del navegador para CSS3: ¿Cuál es el estado actual?
Este artículo fue escrito hace más de un año por lo que el estado actual? La pieza es discutible, pero no ha cambiado lo suficiente en este momento para hacer que la información de este artículo sea obsoleta. Sirve como una descripción increíblemente útil de varias propiedades de CSS3, divididas en secciones basadas en lo que funciona en todas partes y lo que debe tener en cuenta. Solo te tomará unos minutos y vale la pena leerlo.
La importancia de la compatibilidad entre navegadores: consejos y recursos
Si es realmente nuevo en CSS y necesita una introducción básica al tema de la compatibilidad del navegador y por qué es importante, este artículo de Noupe lo tiene cubierto. Más que simplemente venderle la idea de compatibilidad, enumera un montón de excelentes recursos que puede utilizar para garantizar la máxima compatibilidad. De particular interés es la lista de herramientas que lo ayudarán a probar su sitio en varios navegadores.
¿Se supone que debo leer todo esto en 24 horas?
Le presenté cinco temas absolutamente críticos para estudiar y no menos de quince artículos de los cuales puede aprender los principios que necesita saber. Todo esto está bien, pero en mi título, prometí que mejorarías en un solo día, ¡y no todos tienen el tiempo para sentarse y leer quince largos artículos!
La buena noticia es que te di tres artículos sobre cada tema para que tuvieras una variedad para elegir. Le expliqué los contenidos de cada uno en detalle para que pueda seleccionar el que mejor se adapte a sus necesidades. Recuerde elegir los artículos para leer, no en base a lo que sí sabe, sino a lo que no sabe. Conviértalo en un objetivo para llenar los vacíos en su conocimiento.
Mi sugerencia es navegar a través del contenido de arriba y elegir cinco Artículos para leer (uno de cada sección). Incluso eso es mucho para emprender en un día, pero la mayoría de ellos no son mucho más que mil palabras o algo así, muchos son menos. Estoy seguro de que puedes lograrlo. Si no puedes, no hay problema. Cambie su meta para mejorar sus habilidades de CSS en una semana y lea uno de sus cinco artículos elegidos todos los días durante los próximos cinco días. Le garantizo que la próxima semana será mucho mejor para escribir CSS claro, conciso, compatible y reutilizable.
¿Qué otros conceptos me recomiendan?
Ahora que has leído mis cinco temas principales que la gente debería revisar para mejorar sus habilidades de CSS, quiero saber de ti. ¿Con qué otros temas crees que los codificadores de CSS generalmente luchan y qué recursos recomiendas para cualquiera que quiera aprender más?
Fotos de archivo cortesía de BigStock