Share
Este artículo trata sobre la estructura del código CSS, específicamente sobre un método que he estado usando durante los últimos años para aportar cierta lógica y coherencia al orden en que escribo mi CSS. Es un método que llamo "Afuera en".
He escuchado de varios enfoques para escribir CSS en el pasado. Algunas personas no usan ningún orden en particular, otras alfabetizan las declaraciones por el nombre de la propiedad, incluso he oído hablar de un puñado de casos donde algunos los ordenan visualmente por la longitud de cada uno valor de propiedad par!
Una encuesta anterior sobre CSS-Tricks hizo esta pregunta con un resultado que me pareció bastante sorprendente: el 39% de más de 11,000 personas no tienen un plan específico cuando se trata de ordenar CSS.
¿Cómo ordenas tus propiedades CSS? Votantes totales: 11,093La agrupación por tipo podría sugerir altura estar al lado de anchura. Alfabéticamente vería declaraciones enumeradas de fondo a través de índice z, por ejemplo.
Utilizo el método de agrupar propiedades por tipo, aunque incluso uso un orden específico para ordenar por grupo!
Con la excepción del "método aleatorio", hay un cierto grado de orden en todos los otros enfoques. Pero ese orden no necesariamente se relaciona bien con nada particularmente útil con respecto al estilo de los sitios web.
Si estaba recopilando datos sobre la altura de los estudiantes en un aula, ordenarlos por una medida de longitud tiene sentido. Si está categorizando una colección de DVD, el orden alfabético podría tener sentido. Pero, ¿las propiedades CSS ordenadas de esta manera tendrían algo que ver con su orden de importancia Cuando esos estilos están pintados por el navegador.?
Si el orden alfabético, es un elemento color mas importante que su anchura? Es de un elemento estilo de borde ¿Más importante que si está o no en el flujo normal del documento? Yo diría que no.
El método por el que he llegado a adorar ordena las propiedades de CSS por el impacto que tienen en los elementos seleccionados u otros elementos que los rodean. Lo esencial de la técnica es comenzar con las propiedades de imagen grande que impactan cosas fuera del elemento y trabajar hacia los detalles más finos. Es por eso que lo llamo el método "Outside In".
posición y flotador Las declaraciones eliminan elementos de su flujo normal y tienen un gran impacto en otros elementos a su alrededor. Esto es algo importante y creo que debería quedar claro justo en la parte superior de un bloque de CSS.
Controlando cosas como la cursor o rebosar de un elemento son (generalmente) menos importantes y, por lo tanto, tiendo a dejar este tipo de cosas hacia el final.
El orden que utilizo es el siguiente:
Accentsconagua
posición, flotador, claro, monitor)anchura, altura, margen, relleno)color, fondo, frontera, sombra de la caja)tamaño de fuente, Familia tipográfica, texto alineado, transformar texto)cursor, rebosar, índice z)Yo sé eso frontera es una propiedad de modelo de caja y índice z Está relacionado con la posición, pero este orden funciona para mí. Aunque no me gusta el orden alfabético, hay algo que se siente bien al poner índice z al final…
Tomemos el ejemplo de estilizar un módulo de botones..
Comencemos con un nombre de clase agradable y significativo como .botón. Personalmente no me gustan los nombres contratados como .btn y tienden a favorecer nombres de clase largos y descriptivos, siempre que sea posible, es solo una preferencia personal, YMMV :)
/ * Ordene ahora → * / .button
Queremos poder manipular el espaciado vertical alrededor del botón, por lo que necesitaremos cambiar el monitor desde en línea (el valor predeterminado para los enlaces de anclaje) para bloque en linea.
Para permitir que el botón crezca en ancho según el contenido del texto, bloque en linea es una opción más flexible que flotador con un anchura conjunto.
.botón display: inline-block;
A continuación, tendremos que agregar algunas características de modelo de caja como margen y relleno. El margen va fuera de la caja, por lo tanto, al ir "Afuera hacia adentro", esto debería ser lo primero.
.botón display: inline-block; margen: 1em 0; relleno: 1em 4em;
Las siguientes cosas para agregar son los colores. Para separar cada grupo de tipos de propiedades, me gusta dejar una línea en blanco: esto hace que cada sección destaque mucho más..
.botón display: inline-block; margen: 1em 0; relleno: 0.5em 3em; color: #fff; fondo: # 196e76;
A continuación, podemos agregar los bordes y las sombras para proporcionar algo de profundidad, seguidas de cualquier propiedad de tipografía, nuevamente separadas por una línea en blanco.
.botón display: inline-block; margen: 1em 0; relleno: 1em 4em; color: #fff; fondo: # 196e76; borde: 0.25em sólido # 196e76; caja-sombra: recuadro 0.25em 0.25em 0.5em rgba (0,0,0,0.3), 0.5em 0,5em 0 # 444; tamaño de letra: 3em; Familia tipográfica: Avenir, Helvetica, Arial, sans-serif; text-align: center; transformación de texto: mayúsculas; texto-decoración: ninguno;
Una de las ventajas de tener un sistema como este es que elimina la necesidad de pensar demasiado una vez que se ha implementado. Si estoy leyendo mi código y quiero cambiar algo de imagen grande como un elemento anchura o posición, Sé que estaré mirando hacia la cima de una regla. Si quiero ajustar algo como transformar texto o estilo de lista, Estaré mirando hacia el fondo del bloque..
Tener el código estructurado de esta manera también es realmente útil para que otros lean el CSS; Si se enfrenta a un código organizado como este, es muy fácil ver todos los componentes que forman un módulo de botones. Al escribir el código, es importante que sea lo más fácil posible de leer para nuestros colegas desarrolladores; Esto hace que el código sea más fácil de entender y mantener..
He usado CSS de vainilla para explicar mis métodos aquí, pero puede aplicar el enfoque “Fuera de” con la misma eficacia en su Sass, LESS y Stylus.
La codificación puede ser una cosa muy personal. Si utiliza un método diferente para organizar su CSS, ¡sería genial saberlo! Deja un comentario para continuar la discusión..
