Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

"Outside In" — Ordenar propiedades CSS según su importancia

by
Read Time:4 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Este artículo trata sobre la estructura del código CSS, concretamente sobre un método que he estado usando durante los últimos años para aportar algo de lógica y coherencia al orden en que escribo mi CSS. Es un método que llamo "Outside In".

¿Orden de declaración?

He escuchado hablar en el pasado de varios enfoques a la hora de escribir CSS. Algunas personas no usan ningún orden en particular en absoluto, otros ordenan alfabéticamente las declaraciones según el nombre de la propiedad, ¡y hasta he oído hablar de un puñado de casos donde algunos las ordenan visualmente en base a la longitud de cada par property:value!

En una pasada encuesta en CSS-Tricks, se formuló 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 a la hora de ordenar CSS.

How do you order your CSS propertiesHow do you order your CSS propertiesHow do you order your CSS properties
¿Cómo ordenas tus propiedades CSS? Total de votantes: 11.093

La agrupación por tipo podría sugerir que height estaría junto a width. Alfabéticamente verías declaraciones enumeradas desde el background hasta z-index, por ejemplo.

Yo utilizo el método de agrupación de propiedades por tipo, ¡incluso uso un orden específico para ordenar por grupo!

Con la excepción del "método aleatorio", hay cierto grado de organización en todos los demás enfoques. Pero ese orden no necesariamente se corresponde bien a nada particularmente útil con respecto al estilo de los sitios web.

Si estas recopilando datos sobre la altura de los estudiantes en un aula, ordenarlos en base a una medida de longitud tendría sentido. Si estás categorizando una colección de DVDs, un orden alfabético podría tener sentido. Pero, ¿las propiedades CSS ordenadas de estas maneras tendrían algo que ver con su orden de importancia cuando esos estilos son pintados por el navegador?

Si ordenas alfabéticamente, ¿es el color de un elemento más importante que su anchura (width)? ¿Es más importante el estilo de borde (border-style) de un elemento que si está o no en el flujo normal del documento? Yo diría que no.

Outside In

El método que he llegado a adorar ordena propiedades CSS en base al impacto que tienen en los elementos seleccionados u otros elementos a su alrededor. La esencia de la técnica es comenzar con propiedades que afectan a la imagen general, impactan en cosas fuera del elemento y trabajar hacia los detalles más finos. Esta es la razón por la que lo llamo el método "Outside In".

Las declaraciones de posición (position) y flotación (float) eliminan los elementos de su flujo normal y tienen un gran impacto en otros elementos que los rodean. Esto es algo importante y creo que debe quedar claro justo en la parte superior de un bloque de CSS.

Controlar cosas como el cursor o el desbordamiento (overflow) de un elemento son (generalmente) menos importantes y por lo tanto tiendo a dejar aspectos como estos hacia el final.

El orden que utilizo es el siguiente:

  • Propiedades de maquetación de página (position, float, clear, display)
  • Propiedades del box model (width, height, margin, padding)
  • Propiedades visuales (color, background, border, box-shadow)
  • Propiedades tipográficas (font-size, font-family, text-align, text-transform)
  • Propiedades misceláneas (cursor, overflow, z-index)

Sé que border es una propiedad box-model y z-index está relacionada con la posición, pero este orden funciona para mí. A pesar de que no me gusta el orden alfabético, hay algo que sencillamente se siente bien en el hecho de colocar z-index al final...

Ejemplo práctico

Tomemos el ejemplo de la aplicación de estilo a un módulo de botón.

Comencemos con un nombre de clase agradable y significativo como .button. Personalmente no me gustan los nombres abreviados como .btn y tiendo a favorecer los nombres de clase largos y descriptivos siempre que sea posible, es sólo una preferencia personal, tus preferencias pueden ser distintas :)

Queremos ser capaces de manipular el espaciado vertical alrededor del botón por lo que tendrás que cambiar el valor de display de inline (el valor predeterminado para los enlaces de anclaje) a inline-block.

Para permitir que el botón aumente en anchura en función del contenido del texto, inline-block resulta una opción más flexible que float con una anchura, width, establecida.

A continuación, tendremos que añadir algunas características del box-model como margin y padding. El margen va fuera de la caja, así que, siguiendo el método "Outside In", esto debería ser lo primero.

Las siguientes cosas a añadir son los colores. Para separar cada grupo de tipos de propiedad, me gusta dejar una línea en blanco, esto hace que cada sección destaque mucho más.

A continuación podemos añadir los bordes y las sombras para proporcionar algo de profundidad, seguido de cualquier propiedad tipográfica, de nuevo separado por una línea en blanco.

Leer código

Una ventaja 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 gran imagen como el ancho o la posición de un elemento, sé que estaré mirando hacia la parte superior de una regla. Si quiero ajustar algo como text-transform o list-style, voy a estar mirando hacia la parte inferior del bloque.

Tener el código estructurado de esta manera también es realmente útil para otros que lean el CSS; si te enfrentas a código organizado así, es muy fácil ver todas las partes de los componentes que componen un módulo de botón. Al escribir código, es importante que su lectura resulte lo más fácil posible a nuestros compañeros desarrolladores; esto hace que el código sea más fácil de entender y mantener.

Preprocesadores

Aquí he utilizado vanilla CSS para explicar mis métodos, pero puedes aplicar el enfoque "Outside In" con la mismo eficacia en tu Sass, LESS o Stylus.

Conclusión

Codificar puede ser algo muy personal. Si utilizas un método diferente para organizar tu CSS, ¡sería genial escucharte! Deja un comentario para continuar el debate.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.