5 pasos para mejorar drásticamente su conocimiento de CSS en 24 horas
Has estado codificando durante un tiempo y conoces un archivo CSS. Ciertamente no eres un maestro, pero con suficiente violín puedes llegar a donde quieres ir. Sin embargo, te preguntas si alguna vez superarás ese punto en el que CSS es tan difícil. ¿Alguna vez podrás desarrollar un diseño complejo sin recurrir en última instancia a prueba y error para ver qué funciona y qué no?
La buena noticia es que puedes superar ese punto frustrante en el que conoces suficiente CSS para codificar un sitio web, pero carecen de la base sólida que te permite codificar sin la molestia de no entender exactamente cómo llegarás a donde vas ' vamos, y este punto está mucho más cerca de lo que piensas. Propongo que hay cinco temas que aumentarán drásticamente su comprensión de CSS. Dedique un tiempo a leer sobre cada uno durante las próximas veinticuatro horas y cambiará la forma de codificar para siempre.
Explore los elementos de Envato
1. Envuelva su 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 desea que vayan, debe controlar los contextos de posicionamiento. Y no solo me refiero 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 debes entender. Si no puede nombrar a los cinco sin buscarlos, entonces definitivamente es un candidato ideal para este tipo de educación. Aquí están: estático, fijo, relativo, absoluto y heredar.
Necesita 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 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á su trabajo infinitamente más fácil.
Recursos para llevarte allí
La verdad sobre el posicionamiento absoluto frente al relativo
Esta es mi inmersión profunda en el tema del contexto de posicionamiento. Menciono y explico brevemente los cinco, pero realmente me concentro en los dos grandes: cómo difieren, cómo son diferentes y cómo funcionan juntos. Lea este artículo y estará en camino de posicionarse sin dolor de cabeza en CSS.
Posicionamiento CSS 101
Esta pieza proviene del venerable blog A List Apart, así que de inmediato sabes que será exhaustiva e increíblemente educativa. El artículo fue publicado en 2010, pero la información sigue siendo perfectamente relevante y sirve como una gran introducción a los cinco contextos de posicionamiento. No es un artículo muy visual, pero tiene muchos ejemplos de código simple para facilitarle la entrada a cada concepto.
Aprenda el posicionamiento CSS en diez pasos
Esta es una descripción 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 o dos oraciones que explican el código. A la derecha hay un diseño de ejemplo en vivo que se actualiza con cada pestaña. Este formato es fantástico para vincular visualmente fragmentos de código a los diseños que producen y le recomiendo que le eche un vistazo si tiene dificultades con la mayoría de las explicaciones de texto como el anterior de ALA.
2. Flotadores principales
Cuando aprendes CSS por primera vez, los flotadores parecen ser uno de los sistemas de diseño más complicados que puedas imaginar. Una vez que aprende a usarlos en un nivel básico, debe aprender todo sobre cómo los padres que contienen solo niños flotantes tienen una altura colapsada, lo que lleva a cuarenta y siete formas diferentes de resolver el problema a través de soluciones claras y manipulaciones de desbordamiento.
Afortunadamente, a la larga, te acostumbras a los conceptos detrás de los flotadores e incluso pueden ser tan fáciles de usar que no piensas demasiado en ellos. 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 llevarte allí
Todo lo que nunca sabías sobre los flotadores CSS
En este artículo, cubro casi toda la gama de temas relacionados con flotantes en CSS. Comienza con una discusión básica de qué son los flotadores y cómo funcionan. Después de esto, hablo sobre cómo los flotadores afectan 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 del flotador y, por supuesto, la debacle de la altura de colapso 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 las carrozas no decepciona. Si está buscando una discusión breve pero directa sobre cómo trabajar con carrozas, esta pieza lo tiene cubierto. En particular, me gustan las ilustraciones simples y atractivas que se utilizan en todo el artículo.
El misterio de la propiedad flotante CSS
Si bien las piezas de Chris Coyier suelen ser breves y precisas, el contenido de la revista Smashing suele ser bastante extenso con toneladas de ejemplos y debates relevantes. Este artículo presenta el concepto de flotadores, le explica todo acerca de cómo usarlos y borrarlos, y luego se inicia en una discusión sobre dónde normalmente se ven flotadores en sitios del mundo real. Si necesita ver la teoría cobrar vida, esta es para usted.
3. Conozca a sus selectores
Una de las claves para escribir un CSS limpio y bueno es tener una idea clara de qué selectores CSS están disponibles para usted, cómo funcionan y el grado en que son compatibles con varios navegadores. Parece un tema bastante simple, pero en realidad el mundo de los selectores CSS es bastante complejo.
Hay un montón de cosas interesantes diferentes para aprender aquí, desde el uso de selectores de valor de atributo y palabras clave de orientación en nombres de clase hasta cómo el selector universal puede ser útil para depurar su código. Incluso si crees que puedes sobrevivir personalmente sin entender un montón de selectores sofisticados, ¡la verdad es que otros codificadores usan estas cosas todos los días y necesitas poder entender lo que estás viendo cuando llegas a ver la fuente!
Recursos para llevarte allí
Selectores de CSS: solo los bits difíciles
Este es un artículo divertido que analiza principalmente los aspectos más complicados de los selectores CSS. Me salteo las cosas a nivel del suelo y me meto de lleno en la discusión sobre cómo el concepto de DOM se traduce en apuntar a varios aspectos de su documento con CSS. Aprenderá todo sobre cómo seleccionar niños y hermanos, cómo encadenar selectores y mucho más.
Los 30 selectores CSS que debes memorizar
Jeffrey Way es un desarrollador web rockstar y artículos como este demuestran por qué. Este artículo de Nettuts + cubre una amplia gama de selectores CSS en un formato simple y breve que pone mucho énfasis en el soporte del navegador. Sorprendentemente, Jeff incluso codificó páginas de ejemplos 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 selectores CSS, y CSS3 realmente aumenta ese poder. No vas a creer lo versátil que pueden ser tus selectores con una pequeña magia de valor de atributos. Después de leer este artículo, se lanzará alrededor de frases como "selector de valor de atributo de subcadena arbitraria" como un profesional.
4. Aprenda los conceptos de codificación DRY
"No te repitas". Esta simple frase tiene implicaciones drásticas cuando se trata de codificación. Cuando realmente se sumerge en las prácticas de codificación DRY, el resultado es un código más limpio, menos trabajo y un flujo de trabajo nuevo y hermoso que es tan enriquecedor como increíble.
A diferencia de los otros temas anteriores, que son bastante limitados, este es un tema bastante amplio que cubre todo tipo de prácticas, técnicas e ideas diferentes. Curiosamente, una de las cosas que recientemente me ha centrado en las prácticas de codificación DRY es el uso de preprocesadores CSS.
Aunque muchos afirman que los preprocesadores conducen a prácticas de codificación deficientes, la realidad es lo contrario. Obviamente, los preprocesadores mismos ayudan a evitar la repetición manual, pero va más allá de eso. ¡Examinar el resultado de herramientas como LESS y SASS y los objetivos para los idiomas en general me ha llevado a escribir mejor CSS puro! Una vez que domine conceptos como @extend en Sass, no puede evitar pensar en las implicaciones cuando está codificando solo con CSS.
Recursos para llevarte 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 principios y objetivos principales. Él reduce la práctica a tres ideas simples y le muestra cómo implementar estas ideas en un flujo de trabajo real. Los conceptos están tomados en gran parte de una presentación de Jeremy Clarke que cubre el mismo tema.
Una introducción al CSS orientado a objetos (OOCSS)
Como mencioné antes, las ideas inherentes al movimiento DRY CSS son bastante amplias y están directamente relacionadas con los conceptos en otras construcciones. OOCS es una metodología cada vez más popular que tiene como objetivo ayudarlo a crear hojas de estilo más rápidas y eficientes con una organización superior y menos repetición. Existen dos principios principales en el trabajo 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 sobre DRY CSS? También escribió este artículo, que explica un proyecto similar pero separado de OOCS: SMACSS (un proyecto de Jonathan Snook). Al igual que con OOCSS, SMACSS tiene dos objetivos principales. El primero es aumentar el valor semántico de una sección de HTML y contenido, y el segundo 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 su CSS es saber qué funciona dónde. CSS3 es demasiado atractivo para la mayoría de nosotros como para ignorarlo, pero la verdad es que un montón no funciona en ciertos navegadores (por "ciertos navegadores" me refiero a IE).
El gran secreto que los desarrolladores web novatos deben tener en mente es que necesitan memorizar cada característica CSS y cómo cada navegador conocido por el hombre la maneja, sino que hay recursos absolutamente increíbles disponibles para usted que le brindan esta información. libremente, solo tienes que saber dónde buscar.
Recursos para llevarte allí
Soporte de navegador de clavado en CSS3 y HTML5: recursos invaluables para usar hoy
En este artículo, le presento 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 qué 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 la pieza del "estado actual" es discutible, pero no ha cambiado lo suficiente en este momento para que la información en este artículo sea obsoleta. Sirve como una descripción increíblemente útil de varias propiedades CSS3, divididas en secciones basadas en lo que funciona en todas partes y lo que debe tener cuidado. Solo te llevará unos minutos y vale la pena leerlo.
La importancia de la compatibilidad cruzada del navegador: consejos y recursos
Si realmente eres nuevo en CSS y necesitas una introducción básica al tema de la compatibilidad del navegador y por qué es importante, este artículo de Noupe te tiene cubierto. Más que simplemente venderlo con la idea de compatibilidad, enumera una gran cantidad de excelentes recursos que puede usar 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 he presentado 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á muy bien, pero en mi título prometí que mejorarías en un solo día y que no todos tendrían tiempo para sentarse y leer quince largos artículos.
La buena noticia es que te di tres artículos sobre cada tema para que tengas alguna variedad para elegir. Le expliqué el contenido 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 función de lo que sabe, sino de lo que no sabe. Conviértalo en un objetivo para llenar los vacíos en su conocimiento.
Mi sugerencia es navegar por el contenido anterior 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 más de mil palabras, muchos son menos. Estoy seguro de que puedes lograrlo. Si no puedes, no hay problema. Cambie su objetivo de 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. Te garantizo que la próxima semana serás mucho mejor escribiendo CSS claro, conciso, compatible y reutilizable.
¿Qué otros conceptos me recomiendan?
Ahora que has leído mis cinco temas principales que las personas deberían repasar para mejorar sus habilidades de CSS, quiero saber de ti. ¿Con qué otros temas crees que suelen tener problemas los codificadores CSS y qué recursos recomiendas para cualquiera que quiera aprender más?
Fotos de archivo proporcionadas por cortesía de BigStock
