678 votos

Gestión de CSS explosión

He estado depender en gran medida de CSS para una web que estoy trabajando. Ahora mismo, todos los estilos CSS se aplican en cada etiqueta de base, y por eso ahora estoy tratando de mover a más de un condicionamiento externo para ayudar con cualquier cambio en el futuro

Pero ahora el problema es que he notado que me estoy haciendo un "CSS Explosión". Cada vez es difícil para mí decidir cómo organizar y resumen de datos dentro del archivo CSS.

Estoy utilizando un gran número de div etiquetas en el sitio web, pasando de una gran mesa basado en la web. Así que estoy recibiendo una gran cantidad de selectores CSS que este aspecto

div.title {
  background-color: blue;
  color: white;
  text-align: center;
}

div.footer {
  /* Styles Here */
}

div.body {
  /* Styles Here */
}

/* And many more */

No es demasiado malo, pero como soy principiante, me preguntaba si de recomendaciones sobre la mejor manera de organizar las diferentes partes de un archivo de CSS. No quiero tener un atributo CSS para cada elemento en mi sitio web, y siempre quiero que el archivo CSS a ser bastante intuitiva y fácil de leer.

Mi objetivo final es facilitar el uso de los archivos CSS y demostrar su poder para aumentar la velocidad de desarrollo de la web. De esta forma, otras personas que pueden trabajar en este sitio en el futuro también tendrá en la práctica de la utilización de buenas prácticas de codificación, en lugar de tener que recoger la forma en que lo hice.

558voto

Pekka 웃 Puntos 249607

Esta es una muy buena pregunta. En todas partes te miro, archivos CSS tienden a salirse de control después de un tiempo - especialmente, pero no únicamente, cuando se trabaja en equipo.

Las siguientes son las reglas que yo misma estoy tratando de adherirse a (no es que yo siempre se las arreglan para.)

  • Refactorizar temprano, refactorizar a menudo. Con frecuencia limpiar los archivos CSS, se fusionan varias definiciones de la misma clase. Quitar obsoleto definiciones de inmediato.

  • Al añadir CSS durante la corrección de errores, dejar un comentario en cuanto a lo del cambio ("Esto es para asegurarse de que el cuadro está alineada a la izquierda en IE < 7")

  • Evitar los despidos, por ejemplo. la definición de la misma cosa en .classname y .classname:hover.

  • La utilización de comentarios /** Head **/ de construir una estructura clara.

  • El uso de un prettifier herramienta que ayuda a mantener una constante de su estilo. Yo uso Polystyle, con el que estoy bastante contento (cuesta $15, pero es dinero bien gastado). Estoy seguro de que hay libres de alrededor así como (Actualización: como por ejemplo el Código de formateo automático de los queries basado en CSS Tidy, una herramienta de código abierto no he usado yo, pero se ve muy interesante.)

  • Construir sensible clases. Vea a continuación una serie de notas sobre esto.

  • El uso de la semántica, evitar DIV sopa de uso <ul>s para los menús, por ejemplo.

  • Definir todo en un nivel tan bajo como sea posible (p. ej. un defecto de la familia de fuentes, el color y la talla en la body) y el uso inherit donde sea posible

  • Si usted tiene muy complejo de la CSS, tal vez un CSS pre-compilador de ayuda. Creo que lo voy a mirar en xCSS por la misma razón pronto. Hay varios otros a su alrededor.

  • Si trabaja en un equipo, ponen de relieve la necesidad de estándares de calidad para los archivos CSS así. Todo el mundo con grandes estándares de codificación en su lenguaje de programación(s), pero hay poca conciencia de que esto es necesario para CSS.

  • Si trabaja en un equipo, hacer considerar el uso de Control de versiones. Esto hace las cosas mucho más fáciles de rastrear, y la edición de los conflictos que mucho más fácil de resolver. Realmente vale la pena, incluso si usted está "solo" en HTML y CSS.

  • No trabajo con !important. No sólo porque IE =< 7 no se puede tratar con él. En una estructura compleja, el uso de !importante es tentador para cambiar una conducta cuya fuente no puede ser encontrado, pero es veneno para el mantenimiento a largo plazo.

Edificio sensible clases

Así es como me gustan a construir sensible clases.

Puedo aplicar la configuración global del primero:

body { font-family: .... font-size ... color ... }
a { text-decoration: none; }

Entonces, me identifico las principales secciones de la página de diseño - por ejemplo. la parte superior de la zona, el menú, el contenido y el pie de página. Si escribí bien marcado, estas áreas serán idénticos con la estructura HTML.

Entonces, yo comienzo a la construcción de clases CSS, especificando tanto la ascendencia de lo posible y razonable, y la agrupación de las clases relacionadas con la tan estrechamente como sea posible.

div.content ul.table_of_contents 
div.content ul.table_of_contents li 
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber

Pensar en la totalidad de la estructura de CSS como un árbol con cada vez más específicas, de las definiciones más lejos de la raíz que son. Desea mantener el número de clases tan bajo como sea posible, y desea que se repita a sí mismo como rara vez es posible.

Por ejemplo, digamos que usted tiene tres niveles de menús de navegación. Estos tres menús diferentes, pero también comparten ciertas características. Por ejemplo, todos ellos son <ul>, todos ellos tienen el mismo tamaño de fuente, y los elementos son todos uno al lado del otro (como contraposición a la representación predeterminada de un ul). Además, ninguno de los menús tiene cualquier bala puntos (list-style-type).

En primer lugar, definir el común de las características de una clase denominada menu:

div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }

luego, se definen las características específicas de cada uno de los tres menús. El nivel 1 es de 40 píxeles de alto; en los niveles 2 y 3 de 20 píxeles.

Nota: también puede usar varias clases de esto, pero Internet Explorer 6 tiene problemas con varias clases, por lo que en este ejemplo se utiliza ids.

div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }

El marcado para el menú tendrá un aspecto como este:

<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>

Si usted tiene semánticamente similares elementos de la página - como estas tres menús - tratar de sacar los puntos en común primero y los puso en una clase; luego, el trabajo fuera de las propiedades específicas y aplicarlos a clases o, si usted tiene al soporte técnico de Internet Explorer 6, ID.

HTML diversos consejos

Si se añaden estas semántica en el código HTML de salida, los diseñadores más tarde puede personalizar el aspecto de los sitios web y/o aplicaciones con puro CSS, lo cual es una gran ventaja y ahorro de tiempo.

  • Si es posible, dar a cada página el cuerpo de una clase única: <body class='contactpage'> esto hace que sea muy fácil para agregar la página de ajustes específicos a la hoja de estilo:

    body.contactpage div.container ul.mainmenu li { color: green }
    
  • Cuando la construcción de los menús de forma automática, añadir la cantidad de CSS contexto como sea posible para permitir la extensa estilo posterior. Por ejemplo:

    <ul class="mainmenu">
     <li class="item_first item_active item_1"> First item </li> 
     <li class="item_2"> Second item </li> 
     <li class="item_3"> Third item </li> 
     <li class="item_last item_4"> Fourth item </li> 
    </ul>
    

    De esta manera, cada elemento de menú se puede acceder para su estilo de acuerdo a su contexto semántico: Si es el primer o el último elemento de la lista; Si es actualmente el elemento activo; y por número.

Nota que esta asignación de varias clases, como se indica en el ejemplo de arriba no funciona correctamente en IE6. Hay una solución para hacer IE6 capaz de tratar con múltiples clases; yo no lo he probado todavía, pero se ve muy prometedor, procedentes de Dean Edwards. Hasta entonces, tendrá que definir la clase que es más importante para usted (número de elemento activo, o la primera/última) o recurrir al uso de Identificadores. (booo IE6!)

88voto

Andy Ford Puntos 4595

Esta pregunta se ha hecho/contestado varias veces a lo largo de Stack Overflow. Aquí son solo 4 ejemplos:

En todos los 4 de mi respuesta ha incluido el asesoramiento para descargar y leer Natalie Downe PDF CSS Sistemas. (El PDF incluye toneladas de billetes, no en las diapositivas, así que lea el PDF!). Tome nota de sus sugerencias para la organización.

EDITAR (2014/02/05) cuatro años más tarde, yo diría que:

  • El uso de CSS pre-procesador y administrar sus archivos como parciales (yo personalmente prefiero Sass con Brújula, pero Menos es muy buena también y hay otros)
  • Lee sobre conceptos como OOCSS, SMACSS, y BEM
  • Echa un vistazo a cómo populares CSS frameworks como Bootstrap y Zurb de la Fundación se estructuran. Y no descarten el menos popular entre los marcos de los Inuit es interesante, pero hay muchos otros.
  • Se combinan/comprime tus archivos con un paso de generación en un servidor de integración continua y/o una tarea corredor como Gruñir o Trago.

73voto

srcspider Puntos 2623

No escribir encabezamientos en CSS

Sólo dividir las secciones en archivos. CSS comentarios, debe ser solo eso, comentarios.

reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css

Utilizar una secuencia de comandos para combinarlos en uno solo; si es necesario. Usted puede incluso tener una buena estructura de directorios así, y acaba de tener su secuencia de comandos de detección de forma recursiva para .css ficheros.

Si usted debe de escribir encabezamientos, tiene una tabla de contenido al inicio del archivo

Los títulos de la tabla de contenido debe ser perfectamente iguales a los títulos de escribir más tarde. Es un dolor de búsqueda de títulos. Para añadir el problema, ¿cómo exactamente es que nadie suponga que saber que usted tiene el otro encabezado después de su primera cabecera? ps. no agregue doc-como * (asterisco) al principio de cada línea al escribir Toc, solo hace que sea más molesto para seleccionar el texto.

/* Table of Contents
   - - - - - - - - -
   Header stuff
   Body Stuff
   Some other junk
   - - - - - - - - -
 */
...
/* Header Stuff 
 */
...
/* Body Stuff 
 */

Escribir comentarios o dentro de las reglas, y no fuera del bloque

En primer lugar, cuando se modifique la secuencia de comandos no hay un 50/50 de probabilidades de que usted va a prestar atención a lo que está fuera de la regla de bloque (sobre todo si es un gran pegote de texto ;) ). En segundo lugar hay (casi) no caso de que usted necesita un "comentario" en el exterior. Si es en el exterior, que es el 99% del tiempo de un título, por lo que mantenerlo de esa manera.

Dividir la página en los componentes

Componentes debe tener position:relative, no padding y no margin, la mayoría del tiempo. Esto simplifica % reglas de mucho, así como lo que permite mucho más sencillo, absolute:position'ing de elementos, ya que si hay una absoluta coloca el recipiente en el elemento con posición absoluta utilizará el contenedor cuando computing top, right, bottom, left propiedades.

La mayoría de los DIVs en un documento HTML5 son generalmente de un componente.

Un componente es también algo que puede ser considerado como una unidad independiente en la página. En términos de los laicos tratar algo como un componente si que tiene sentido para tratar algo como una caja negra.

Va con la garantía de calidad de la página de ejemplo de nuevo:

#navigation
#question
#answers
#answers .answer
etc.

Mediante la división de la página en los componentes, dividir el trabajo en unidades manejables.

Poner reglas con un efecto acumulativo en la misma línea.

Por ejemplo, border, margin y padding (pero no outline) se suman a las dimensiones y el tamaño del elemento que están estilo.

position: absolute; top: 10px; right: 10px;

Si ellos no son sólo la que se puede leer en una línea, por lo menos ponerlos en las proximidades:

padding: 10px; margin: 20px;
border: 1px solid black;

El uso de la taquigrafía cuando sea posible:

/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;

Nunca repita un selector de

Si usted tiene más instancias del mismo selector, hay una buena posibilidad de que usted inevitable terminará con varias instancias de las mismas reglas. Por ejemplo:

#some .selector {
    margin: 0;
    font-size: 11px;
}
...
#some .selector {
    border: 1px solid #000;
    margin: 0;
}

Evitar el uso de Etiquetas como selectores, cuando se puede utilizar id/clases

En primer lugar las etiquetas DIV y SPAN son la excepción: usted nunca debe usar de ellos, ¡nunca! ;) Sólo se utiliza para unir una clase o id.

Esta...

div#answers div.answer table.statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
    outline: 3px solid #000;
}

Debe ser escrita así:

#answers .answer .statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

Debido a que el exceso colgando los DIVs no añadir nada a la selección. También la fuerza de un innecesario de la etiqueta de la regla. Si se va a cambiar, por ejemplo, .answer de un div a article su estilo se rompería.

O si prefieres más claridad:

#answers .answer .statistics {
    color: pink;
    border: 1px solid #000;
}
#answers .answer table.statistics {
    border-collapse: collapsed;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

La razón de ser de la border-collapse propiedad es una propiedad especial, que sólo tiene sentido cuando se aplica a un table. Si .statistics no es un table no debe aplicarse.

Reglas genéricas son malos!

  • evite escribir genérico/reglas de magic que si se puede
  • a menos que sea para un CSS-reset/unreset, todos sus genéricos magia debe aplicar al menos un componente de la raíz

No ahorrar tiempo, hacen que su cabeza estalla; así como realizar el mantenimiento de una pesadilla. Cuando estás escribiendo la regla, se puede saber donde se aplican, sin embargo, que no tiene la garantía de que su regla de no meterse con usted más tarde.

Para añadir a esto las normas genéricas son confusos y difíciles de leer, incluso si usted tiene alguna idea de que el documento que está el estilo. Esto no quiere decir que no debe escribir las normas genéricas, simplemente no los use a menos que realmente la intención de ellos son genéricos, y aun les añada como mucho el alcance de la información en el selector de como usted puede.

Cosas como esta...

.badges {
    width: 100%;
    white-space: nowrap;
}

address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

...tiene el mismo problema como el uso de variables globales en un lenguaje de programación:. Usted necesita darles alcance!

#question .userinfo .badges {
    width: 100%;
    white-space: nowrap;
}

#answers .answer .userinfo address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

Básicamente, que se lee como:

components                   target
---------------------------- --------
#answers .answer   .userinfo address
-------- --------- --------- --------
domain   component component selector 

Me gusta el uso de Identificadores de cada vez que un componente sé que es un singleton en una página; sus necesidades pueden ser diferentes.

Nota: Idealmente, usted debe escribir sólo lo suficiente. Mencionar más componentes en el selector sin embargo, es el más misericordioso de error, en comparación con mencionar a menos componentes.

Supongamos que usted tiene un pagination componente. Se utiliza en muchos lugares a través de su sitio. Este sería un buen ejemplo de cuando usted estaría escribiendo una regla genérica. Digamos que usted display:block al individuo de número de página de enlaces y darles un fondo gris oscuro. Para que sean visibles usted tiene que tener reglas como esta:

.pagination .pagelist a {
    color: #fff;
}

Ahora digamos que usted utilice su paginación para una lista de respuestas, usted puede encontrar algo como esto

#answers .header a {
    color: #000;
}
...
.pagination .pagelist a {
    color: #fff;
}

Esto hará que el blanco de los enlaces de color negro, que no desea.

La incorrecta manera de solucionarlo es:

.pagination .pagelist a {
    color: #fff !important;
}

La forma correcta de solucionar es:

#answers .header .pagination .pagelist a {
    color: #fff;
}

Complejo de la "lógica" de los comentarios no trabajo :)

Si usted escribe algo como: "este valor es dependiente de bla-bla combinado con la altura de bla-bla", es simplemente inevitable vas a cometer un error, y todo se caen como un castillo de naipes.

Los comentarios no simple; si usted necesita "operaciones lógicas" considerar uno de los lenguajes de plantillas CSS como SASS o MENOS.

¿Cómo hago para escribir una paleta de colores?

Dejar esto para el final. Tiene un archivo de toda su paleta de colores. Con este archivo de su estilo debe tener cierto nivel de color de la paleta en la reglas. Su paleta de colores debe sobrescribir. Usted cadena de selectores utilizando un nivel muy alto componente principal (ej. #page) y, a continuación, escriba su estilo como un auto suficiente regla de bloque. Puede ser en color o algo más.

por ejemplo.

#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
    color: #222; background: #fff; 
    border-radius: 10px;
    padding: 1em;
}

La idea es simple, su paleta de colores es una hoja de estilo independiente de la base del estilo, que se cascada .

Menos nombres, requiere menos memoria, hacer el código más fácil de leer

Menos uso de los nombres es mejor. Lo ideal es utilizar muy simple (y corto!) palabras: el texto, el cuerpo, el encabezado.

Me parece también que la combinación de palabras simples es más fácil entender entonces tener una sopa de largo "apropiado" de las palabras: postbody, posthead, userinfo, etc.

Mantener el vocabulario de los pequeños, de esta manera, incluso si algún extranjero que vienen a leer a su estilo-la sopa (como sí mismo después de un par de semanas ;)) solo necesita entender que cuando las palabras se utilizan más bien donde cada selector se utiliza. Por ejemplo, yo uso .this cada vez que un elemento supuestamente es "el elemento seleccionado" o "el elemento actual", etc.

Limpiar después de ti mismo

Escrito CSS es como comer, a veces de salir de un lío detrás. Asegúrese de limpiar que el desorden, o la basura de código sólo se acumulan. Quitar clases/ids que no utilice. Quitar las reglas CSS que no utilice. Asegúrese de que todo está bien apretado y usted no tiene un conflicto o duplicado de reglas.

Si, como he sugerido, tratados algunos envases como cuadros negros (componentes) en su estilo, utiliza los componentes en su selectores, y se mantiene todo en uno dedicado archivo (o bien dividir un archivo con un TOC y encabezados), entonces su trabajo es mucho más fácil,...

Puede utilizar una herramienta como la extensión de firefox Polvo-Me Selectores (sugerencia: el punto es a su sitemap.xml) para ayudarle a encontrar algunos de la basura escondida en tu css a las armas nucleares y feriantes.

Mantener un unsorted.css archivo

Dicen que usted es el estilo de control de calidad de sitio, y ya tiene una hoja de estilos para las respuestas "página", que llamaremos answers.css. Si ahora necesitamos añadir un montón de nuevas css, añadir a la unsorted.css hoja de estilos, a continuación, refactorizar en su answers.css hoja de estilos.

Varias razones para esto:

  • es más rápido para refactorizar en después de que haya terminado, a continuación, que es la búsqueda de reglas (que probablemente no existen) y de inyectar código
  • usted va a escribir cosas que va a quitar, la inyección de código sólo hace que sea más difícil de eliminar que el código de
  • anexar al archivo original conduce fácilmente a la regla/selector de duplicación

55voto

Zimbabao Puntos 5622

Echa un vistazo a 1. SASS 2. brújula

31voto

Moin Zaman Puntos 15424

La mejor manera que yo he visto a contador CSS recargo es el uso de CSS Orientado a Objetos principios.

Incluso hay un OOCSS marco de ahí que es bastante bueno.

Algunas de las ideologías que van en contra de mucho de lo que se ha dicho aquí, en la parte superior de las respuestas, pero una vez que sabes cómo arquitecto CSS en un objeto orientado a la moda, vas a ver que en realidad el trabajo en el mantenimiento de código lean & mean.

La clave aquí es identificar los 'Objetos' o la construcción de patrones de bloque en su sitio y arquitecto con ellos.

Facebook contrató el creador de OOCSS, Nicole Sullivan para obtener un gran ahorro en su extremo delantero de código (HTML / CSS). Sí, usted puede conseguir realmente el ahorro no sólo en su CSS, pero en el código HTML, el cual por el sonido de la misma, es muy posible que usted como usted menciona la conversión de un table basado el diseño en un montón de divs'

Otro gran enfoque es similar en algunos aspectos a OOCSS, es planificar y escribir tu CSS para ser escalable y modular desde el inicio. Jonathan Snook ha hecho una brillante reseña y libro/ebook sobre SMACSS Escalable y Modular de la Arquitectura para CSS

Permítanme conectarte con algunos enlaces:
5 errores de enorme CSS - (Video)
5 errores de enorme CSS - (Diapositivas)
CSS exceso de datos (Diapositivas)

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X