Nuestra filosofía en Declaring Styles
Nunca comenzarías una pintura de un paisaje haciendo las hojitas del césped, una por una, con un pincel muy fino. No solo es laborioso y requiere mucho tiempo, sino que también sería muy difícil llenar limpiamente el cielo azul entre las hojitas en el horizonte.
En cambio, una pintura comienza con trazos muy amplios, tal vez una gran franja de gris para el cielo, o algo de verde para el césped, que forman la base de la pintura. Este es un proceso llamado bloqueo. En esta etapa, la pintura puede parecer abstracta, pero ya se han establecido los tonos y la perspectiva, sobre los cuales se pueden colocar trazos más detallados. Los puntos más finos comienzan a materializarse lentamente, y cuando haya seleccionado su pincel de detalles para pintar en las hojitas del césped, solo se estará rellenando las luces, las sombras y las texturas, las excepciones a los verdes más amplios que se encuentran debajo. Estas capas, construidas una encima de la otra, disminuyendo en alcance y aumentando en especificidad, se mezclan en un producto terminado.
Hay buenas razones para abordar un desarrollo de Webflow de manera similar, que se amplifican cuando se trabaja en un entorno de equipo. Se puede lograr más en menos tiempo comenzando con trazos generales y minimizando el uso de declaraciones muy específicas o redundantes. Y la construcción espartana resultante será mucho más fácil de entender, agregar y actualizar para otros miembros del equipo. Esto significa aprovechar la jerarquía de la herencia y solo aplicar estilos cuando sea absolutamente necesario.
Broad Strokes
El trazo más amplio que puede hacer es aplicar declaraciones de estilo al Body (All Pages) element. Muchos de estos estilos se conectarán en cascada a otros elementos, estableciendo el estilo general del proyecto definiendo cosas como el color de fondo de la página y los estilos de tipo de cuerpo. Estas declaraciones deben hacerse primero, como los primeros trazos generales de una pintura directamente sobre el lienzo.
Por ejemplo, podríamos querer que la copia del body de nuestro sitio se muestre en Roboto, en lugar del Arial predeterminado. Haciendo este ajuste en el Body (All Pages) nivel significa que cada elemento de texto (títulos, párrafos, bloques de texto, listas, etiquetas, etc.) se establecerá de forma predeterminada en Roboto. Si nuestra marca se actualiza en una fecha posterior, requiriendo una nueva fuente de cuerpo o una actualización en el tamaño de fuente, solo tenemos que ajustar la declaración a Body (All Pages) para lograr la actualización. Si, en cambio, hubiéramos declarado los estilos de fuente en cada párrafo, cada título y cada lista, la actualización podría requerir una auditoría completa del sitio y actualizaciones de docenas de clases.
Poniéndonos específicos
Sin embargo, es posible que no queramos que toda la copia de nuestro sitio tenga el style del body copy. Y podemos declarar estilos específicos elemento por elemento. Por ejemplo, es posible que queramos una fuente más gráfica como Oswald para los titulares. Si hacemos el ajuste a All H1 Headings , anularemos las declaraciones de Body y todos nuestros H1 usarán Oswald. De todos modos, es posible que queramos una line height específica para los párrafos. Si hacemos ese ajuste en All Paragraph , todos nuestros párrafos se actualizarán con la nueva altura de línea.
Modificando los elements con classes
Pero es posible que tampoco queramos que todos nuestros titulares o párrafos se muestren con los mismos estilos. Es posible que un párrafo específico deba estar centrado, o un título específico puede requerir mayúsculas. Para definir estas excepciones a los estilos de nivel de elemento, podemos agregar una clase para aplicarlas a elementos individuales en una página. Puede ser una clase de utilidad simple (como Center ), una combinación de clases de utilidad ( Center Uppercase ), o una clase personalizada que agrupa varios estilos diferentes en una clase ( Large Intro Paragraph ). (Cubriremos estos diferentes tipos de clases con más detalle en la siguiente unidad, Entendiendo de los tipos de clases ).
Sin embargo, el objetivo es declarar los estilos en el nivel más amplio que tenga sentido y solo aplicar clases como excepciones a los estilos de nivel de elemento. Queremos minimizar la cantidad de declaraciones de estilo y, en la medida de lo posible, evitar declaraciones redundantes, minimizando así la cantidad de actualizaciones necesarias para cambiar un estilo en todo el proyecto.
En el peor de los casos, un miembro del equipo crea una nueva clase personalizada para cada párrafo con un estilo ligeramente diferente. Si la fuente del cuerpo no está definida en Body (All Pages) , podría terminar redeclarándose cada vez que se necesita ajustar cualquier estilo de fuente, sobrescribiendo el Arial de 14px predeterminado. Aunque la duplicación de clases en Webflow puede hacer que la creación de estas clases sea relativamente rápida, el trabajo necesario para realizar actualizaciones en todas estas clases sería tremendo y, de lo contrario, el cambio podría lograrse haciendo un ajuste en Body (All Pages) .