selectores - ¿Cuál es la mejor manera de organizar las reglas de CSS?
selectores css (22)
Además de todos los consejos mencionados por otros, tiendo a dividir mi CSS en múltiples archivos . Un archivo para la navegación principal, uno para el pie de página, uno para la tipografía principal, uno para formularios, uno para cada ''objeto'' distinto en la página.
Luego creo una hoja de estilos general que @import s todos esos archivos. Cuando estoy listo para implementar en un entorno de producción, un pequeño script de Ruby expande esas declaraciones @import en un solo archivo, reduciendo así la cantidad de solicitudes HTTP requeridas.
En mi experiencia esto funciona mucho mejor que mantenerlo todo en un archivo durante el desarrollo.
Además, trato de comentar mis reglas de CSS tanto como sea posible. Uso comentarios de varias líneas para la descripción general de la regla y comentarios de una sola línea para explicar líneas simples:
#some_object {
/*
* What, where, why, how...
*/
font-size: 1.2em; /* 12px */
}
Finalmente, cuse CSSEdit grupos e indentación para combinar reglas relacionadas:
/* @group My section title */
#some_rule {
...
}
/* @end */
¿Qué estrategias te ayudan a realizar un seguimiento de un gran número de reglas de CSS? ¿Cómo organizas tus archivos, tus bloques de código y tus reglas?
Aprecio particularmente los consejos dados en este artículo .
Descubrí que los selectores basados en id o class son menos frágiles a los cambios y más fáciles de mantener que los que he basado en la posición. Luego segmentamos nuestras reglas en el sitio (global) y las reglas de aplicación. Dentro de cada archivo organizamos las cosas alfabéticamente y de menor a más específico (por especificación css). No minimizamos ni reducimos la legibilidad de nuestras reglas, y las comenzamos como si fuera un código. Cuando refactorizo una página HTML, lo primero que hago es quitarle el estilo al contenido y moverlo a los archivos css. Sé que este es probablemente obvio.
/Alano
El uso más eficiente de CSS implica una importante reutilización de las clases. Aunque a veces es fácil agrupar sus clases y sus ID en función de dónde aparecen en una página, este método se rompe rápidamente cuando comienza a reutilizar adecuadamente las clases que terminan apareciendo en varias áreas.
Además, debe evitar nombrar sus clases de CSS después de su aparición, como h1.blue o tr.55. Nombrar clases de CSS de esta manera derrota completamente el propósito de usar CSS. Tenga en cuenta que algún día puede querer cambiar todo lo que es azul, a rojo. Si nombra sus clases .blue y .red, debe tocar el marcado para realizar su tarea. Sin embargo, si nombra sus clases .moduleHeader o similar, puede cambiar los colores de esos moduleHeaders en el archivo css sin tocar el marcado.
Los archivos css bien diseñados con una significativa reutilización de clases se organizan mejor alfabéticamente por clase. Este método siempre estará organizado y tendrá sentido para todos los que trabajen en su proyecto.
Prefiero organizar mis clases alfabéticamente en un pedazo grande y luego tengo otro pedazo para mi ID organizado alfabéticamente.
Dependiendo del tamaño del sitio, puede ser una buena idea colocar elementos estructurales en un archivo y elementos "estilísticos" (colores, opciones de fuentes, etc.) en otro archivo css. Esto le permite tener un sitio perfectamente utilizable con SÓLO los elementos estructurales, y también le permite "rediseñar" el sitio tocando o intercambiando la hoja de CSS "estilística".
En la práctica, prefiero tener una hoja de css más grande con las cosas "bonitas" y la estructura, ya que es molesto cambiar entre las dos en un entorno de producción. Sin embargo, dependiendo de la estructura de su equipo, puede funcionar mejor para usted en otro arreglo.
Dentro de una declaración de clase o ID, organizo mis atributos alfabéticamente también. He intentado otras estructuras organizativas, pero la única que parece funcionar para otras personas, sin capacitación, es alfabéticamente.
Estoy de acuerdo con la mayoría de lo que se ha publicado aquí. También descubrí que separar el diseño y el estilo termina siendo más un dolor que una ayuda, aunque suene bien en teoría. Sin embargo, me gusta separar mi css en varios archivos. Generalmente tengo un CSS principal para los principales elementos de diseño de mi sitio y luego varios archivos más pequeños, a menudo en una jerarquía, ya que necesito elementos de diseño más especializados. Un problema con esto es que puede ser difícil saber qué archivo CSS contiene el elemento de estilo que me interesa, pero organizo mis proyectos con Aptana, que tiene herramientas de búsqueda. Además, Firebug ayuda con esto.
También he descubierto que prefiero mantener mis reglas de CSS más o menos autónomas en lugar de separarlas en reglas más pequeñas y luego concatenarlas en la definición de la clase. Me resulta más fácil de mantener si todo el código de un div, por ejemplo, está en una o dos reglas en lugar de muchas que podría tener que buscar. Esto puede significar que hay alguna repetición de código y un archivo css más grande, pero la diferencia no parece ser tan grande y prefiero la mantenibilidad.
Generalmente intento poner las reglas de genéricas a específicas. Por ejemplo, el comienzo del documento puede tener reglas para body, div, h1 ect. Después de eso me moveré a las reglas específicas de la clase. Seguido al final de las reglas por id.
También he visto a las personas agrupar reglas por su uso. Por ejemplo, si su página tiene una tabla; puede agrupar todas sus reglas para diseñar la tabla, las celdas y los datos juntos. Posiblemente agregue algunos comentarios en el archivo css para explicar para qué es cada sección para que sea más fácil encontrarla más tarde.
Mantengo todos los estilos aplicados directamente a las etiquetas en la parte superior de mi hoja de estilos. Debajo hay algunas clases generales de CSS.
Después de eso es la estructura principal, generalmente global. en general, me resulta más fácil seleccionar continuamente por difuntos, por ejemplo:
#container { width: 600px; ... }
#container #header { .... }
#container #header h1 { font-size: massive; }
#container .column [ .. }
#container #left-column {.. }
#container #left-column #content { ... }
Esto tiene el beneficio de proporcionar un tipo de sangría, y usted puede ver fácilmente la estructura de la página desde el CSS. A veces tendrá que cambiar el nombre de su regla de estilo en la estructura de los cambios de página, pero no es un gran problema. Este estilo funciona mejor cuando todas tus reglas están en una línea.
Cambio ligeramente las cosas cuando se trata de la parte de contenido de mi hoja de estilos, y simplemente descoloco al salir de mi div de contenido.
#content h2 { ... }
#content h3 { ... }
#content ol,
#content ul,
#content dl { ... }
Finalmente, termino con las reglas de estilo para páginas particulares. He descubierto que tiene más sentido darle al chico una identificación basada en el nombre de archivo o URI, y el cuerpo en una clase del directorio actual del archivo. Esto hace que sea muy fácil dirigir las reglas de estilo en el CSS principal a una página en particular, o grupo de páginas si es necesario. (obviamente, debe sopesar eso para no incluir una nueva hoja de estilo).
Dentro de mis declaraciones de reglas de estilo, mantengo todas mis reglas bien ordenadas, yendo desde atributos de visualización, posición, tamaño, margen, borde, relleno, fondo, color, atributos de texto, atributos de línea, atributos de palabra a atributos de fuente. Conceptualmente yendo de afuera hacia adentro (se podría argumentar que la fuente pertenece por encima de los atributos del texto. Siempre y cuando seas consistente, eso es todo lo que importa).
Utilizo taquigrafía para recuadros (por ejemplo, margen y borde) porque TENGO que TENER QUE RECORDARlos (Superior, Derecha, Inferior, Izquierda). Evito usar taquigrafía para fondo y para fuentes, porque son un poco más difíciles de recordar.
Por ejemplo:
.rule {
display: block; visibility; visible;
position: relative; float: left; z-index: 1; top: 3px; left: 10em;
width: 100px; height 30px; overflow: hidden;
margin: 1px 3px 5px 1px; border:3px dotted #ff0; padding: 5px;
background-color: #f0f; background-image: url(/foo/bar); color: #000;
text-align: left; text-decoration: none; line-height: 3px; word-spacing: 2px; letter-spacing: 1px;
font-family: sans-serif; font-weight: bold; }
Me encontré con este organizador a través de @smashmag en twitter, funciona mejor de lo que imaginaba - styleneat.com
Ejecuto mi CSS una vez que he terminado y listo para entregar, o cuando mi hoja de estilos se vuelve demasiado complicada de manejar.
Me gusta almacenar css en una carpeta de contenido que contiene contenido estático para un sitio. Entonces generalmente trato de tener un archivo css por "contexto comercial". Entonces, si tuviera una sección de sitio web donde los usuarios se registraran para ferias, la url podría ser "[host] / shows /" y mi archivo css sería "[host] /content/styles/shows.css". Si las cosas se vuelven más complicadas y los "shows" se vuelven demasiado grandes, entonces podría crear una carpeta "content / shared /" y un "content / shows /" para que coincida con los subdominios de "shows". Cambiar el nombre de los problemas se vuelve trivial con Resharper o "Buscar y reemplazar".
Mi enfoque básico es mirarlo desde un punto de vista programático y estilístico.
- Evita la repetición
- Comenta grandes bloques de código
- Si es posible, use las propiedades abreviadas css
- Etiquete las clases con sensatez, evite cosas como class_001 / tom_cruise que no tienen sentido
Ordene sus archivos CSS así:
- declaraciones de elementos
- próximas clases globales
- contenedores y secciones de diseño.
Enlace útil: http://www.456bereastreet.com/archive/200610/useful_tips_for_writing_efficient_css/
Mis 4 consejos:
Organice su CSS para sangrar elementos secundarios más que el resto:
#main_side {
width: 392px;
padding: 0;
float: right; }
#main_side #featured_articles {
background: #fff; }
#main_side #frontpageads {
background: #fff;
margin: 8px 0; }
Use los shorthands:
margin:5px 0 4px 10px;
Divida su hoja de estilo en secciones específicas:
Estilos globales: (cuerpo, párrafos, listas, etc.), encabezado, estructura de página, encabezados, estilos de texto, navegación, formularios, comentarios, extras
Opcional: use un compresor para comprimir su código en un tamaño de archivo más pequeño.
Normalmente dividiré el archivo css principal en secciones según el lugar de la página donde aparezcan las reglas, por lo que habrá una sección para el encabezado de la página web, otra para la (s) barra (s) de navegación, y así sucesivamente.
También rompo un archivo separado para medios impresos.
Al igual que los archivos de programa, uso bloques de comentarios para indicar qué reglas se encuentran en la siguiente sección.
Sin embargo, no creo que haya ventajas de rendimiento significativas en tener varios archivos pequeños en comparación con un único archivo grande.
Para las secciones realmente grandes, también es bueno dividir la hoja en trozos lógicos más pequeños, cada uno de los cuales tiene su propia hoja y etiqueta de enlace. De esta forma, cuando necesite ajustar una pequeña parte de los estilos de la barra de navegación para que admita el nuevo botón, la mayoría del resto de sus estilos son hojas que no tienen cambios y, por lo tanto, aún están en caché en las máquinas de sus usuarios.
Roto en secciones y subsecciones con un índice en la parte superior. Alfabetizado.
Separe las reglas de diseño del color y las reglas estilísticas.
Si está dividiendo su CSS en archivos separados y tiene muchos de ellos, tenga en cuenta que Internet Explorer tiene un límite de 31 archivos CSS. No cargará ningún estilo más allá de ese límite.
Además, por supuesto, si tiene muchos archivos, está creando trabajo adicional para su servidor web y aumentando el número de conexiones, lo que ralentizará las cargas de su página (nuevamente, especialmente en Explorer), por lo que es mejor combinar su CSS en un solo archivo monolítico cuando despliega su sitio, incluso si los tiene separados durante el desarrollo.
Use CleverCSS , un lenguaje de marcado pequeño que elimina el dolor de la escritura y la organización de CSS.
Yo uso varias técnicas:
- Agrupar por #ID / Clase
- Comenta los principales bloques, usando un guión bajo para facilitar la búsqueda (/ * _IDName / *)
- El uso de la abreviatura de CSS ayuda a mantener el tamaño del archivo bajo, lo que facilita su administración.
Hay algunos buenos artículos en la red que he usado. Intentaré encontrarlos de nuevo.
para un gran archivo de reglas CSS lo organizaría de esta manera
- proporcione primero cualquier reinicio de reglas de CSS
- proporcione cualquier regla general / genérica (por ejemplo, p {color: # 553423;} siguiente
- divide el resto del documento por secciones de la página
- ponga cada regla en una línea con reglas generales seguidas por reglas más específicas
- alfabetizar selectores dentro de cada regla
ejemplo:
/*****
/* ~masthead
/*****
#masthead {background-color: #cc00ff; color: #fff; width: 950px; }
#masthead h1 { background: transparent url(logo.png) no-repeat; text-indent: -9000px; width: 200px; }
/*****
/* ~content
/*****
#content { background-color: #fedefd; margin:0; width: 357px; }
#content h1 { font-size: 120%; font-weight: bold; margin: 50px 20px 50px 70px; }
#content p em { color: magenta; }
De esta manera puedes
- Busque fácilmente una sección (busque ~ masthead y se encuentra en la parte superior de la sección)
- escanee fácilmente todas las reglas de una sección a la vez para determinar si algo está cubierto o no
- ajuste fácilmente las reglas incluso en líneas largas. la alfabetización de selectores asegura que el "color" no aparece dos veces en la misma regla
- Realizo un archivo predeterminado para algunas reglas predeterminadas (aplicado a la mayoría de las subpáginas)
- Cada subpágina tiene su propia hoja de estilo .css (si es necesario)
- Uso shorthands (fondo: #FFF url (../ images / header_1.jpg) 0 0 repeat-x;)
- Clases ony si tengo más de un elemento con clase dada (si un elemento - use id)
- Evita la repetición, si puedes heredar, hazlo