Pregunta Gestión de Explosión de CSS


He estado confiando mucho en CSS para un sitio web en el que estoy trabajando. En este momento, todos los estilos CSS se están aplicando por etiqueta, por lo que ahora estoy tratando de moverlo a un estilo más externo para ayudar con cualquier cambio futuro.

Pero ahora el problema es que me he dado cuenta de que recibo una "Explosión de CSS". Me resulta cada vez más difícil decidir cómo organizar y resumir mejor los datos dentro del archivo CSS.

Estoy usando una gran cantidad de div etiquetas dentro del sitio web, pasando de un sitio web basado en tablas. Así que estoy obteniendo muchos selectores de CSS que se ven así:

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

div.footer {
  /* Styles Here */
}

div.body {
  /* Styles Here */
}

/* And many more */

Todavía no está mal, pero como soy un principiante, me preguntaba si se podrían hacer recomendaciones sobre la mejor manera de organizar las diversas partes de un archivo CSS. No quiero tener un atributo CSS separado para cada elemento en mi sitio web, y siempre quiero que el archivo CSS sea bastante intuitivo y fácil de leer.

Mi objetivo final es facilitar el uso de los archivos CSS y demostrar su poder para aumentar la velocidad del desarrollo web. De esta manera, otras personas que puedan trabajar en este sitio en el futuro también se incorporarán a la práctica de utilizar buenas prácticas de codificación, en lugar de tener que aprenderlo de la manera en que lo hice.


668
2018-02-12 16:03


origen


Respuestas:


Esta es una muy buena pregunta. Donde quiera que miro, los archivos CSS tienden a perder el control después de un tiempo, especialmente, pero no solo, cuando se trabaja en equipo.

Las siguientes son las reglas que yo mismo estoy tratando de cumplir (no siempre me las arreglo).

  • Refactorizar temprano, refactorizar a menudo. Limpia frecuentemente los archivos CSS, fusiona varias definiciones de la misma clase. Eliminar definiciones obsoletas inmediatamente.

  • Al agregar CSS durante la corrección de errores, deje un comentario sobre lo que hace el cambio ("Esto es para asegurarse de que el cuadro esté alineado a la izquierda en IE <7")

  • Evitar redundancias, p. definiendo lo mismo en .classname y .classname:hover.

  • Usa comentarios /** Head **/ para construir una estructura clara.

  • Use una herramienta embellecedora que ayuda a mantener un estilo constante. yo suelo Polystyle, con lo cual estoy bastante contento (cuesta $ 15 pero es dinero bien gastado). Estoy seguro de que también hay otros gratuitos (Actualización: como por ejemplo Code Beautifier Residencia en CSS Tidy, una herramienta de código abierto que aún no he usado pero que parece muy interesante.)

  • Construye clases sensatas. Vea a continuación algunas notas sobre esto.

  • Use semántica, evite la sopa DIV - use <ul>s para menús, por ejemplo.

  • Defina todo lo más bajo posible (por ejemplo, una familia de fuentes predeterminada, color y tamaño en el body) y use inherit donde sea posible

  • Si tienes CSS muy complejo, quizás un precompilador de CSS te ayude. Estoy planeando investigar xCSS por la misma razón pronto. Hay muchos otros alrededor.

  • Si trabaja en equipo, resalte también la necesidad de calidad y estándares para los archivos CSS. Todo el mundo es importante en los estándares de codificación en su (s) lenguaje (s) de programación, pero hay poca conciencia de que esto también es necesario para CSS.

  • Si trabajas en equipo, hacer Considere usar el Control de versiones. Hace las cosas mucho más fáciles de rastrear, y la edición de conflictos es mucho más fácil de resolver. Realmente vale la pena, incluso si estás "solo" en HTML y CSS.

  • No trabajes con !important. No solo porque IE = <7 no puede manejarlo. En una estructura compleja, el uso de! Important menudo es tentador para cambiar un comportamiento cuya fuente no se puede encontrar, pero es veneno para el mantenimiento a largo plazo.

Construyendo clases sensatas

Así es como me gusta construir clases sensatas.

Primero aplico ajustes globales:

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

Luego, identifico las secciones principales del diseño de la página, p. el área superior, el menú, el contenido y el pie de página. Si escribí un buen marcado, estas áreas serán idénticas a la estructura HTML. 

Entonces, comienzo a la construcción de clases CSS, especificando tanto la ascendencia de lo posible y razonable, y agrupar clases relacionadas en la mayor medida 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

Piense en toda la estructura de CSS como una árbol con definiciones cada vez más específicas cuanto más lejos estés de la raíz eres. Desea mantener el número de clases lo más bajo posible y desea repetirse lo menos posible.

Por ejemplo, supongamos que tiene tres niveles de menús de navegación. Estos tres menús se ven diferentes, pero también comparten ciertas características. Por ejemplo, son todos <ul>, todos tienen el mismo tamaño de letra, y los elementos están todos juntos (a diferencia de la representación predeterminada de un ul) Además, ninguno de los menús tiene ningún punto de viñeta (list-style-type)

Primero, define el común características en una clase llamada menu:

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

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

Nota: también puedes usar múltiples clases para esto pero Internet Explorer 6 tiene problemas con múltiples clases, entonces este ejemplo usa 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ú se verá así:

<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 tiene elementos semánticamente similares de la página - como estos tres menús - tratar de llegar a los puntos en común primero y ponerlos en una clase; luego, resuelva las propiedades específicas y aplíquelas a las clases o, si tiene que admitir Internet Explorer 6, ID's.

Sugerencias de HTML diversas

Si agrega esta semántica en su salida de HTML, los diseñadores pueden personalizar más tarde el aspecto de los sitios web y / o aplicaciones utilizando CSS puro, lo que es una gran ventaja y ahorro de tiempo.

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

    body.contactpage div.container ul.mainmenu li { color: green }
    
  • Al construir menús automáticamente, agregue la mayor cantidad de contexto de CSS posible para permitir un estilo extenso más adelante. 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 plato del menú se puede acceder de peinado según su contexto semántico: Ya se trate de la primera o último elemento de la lista; Si es el artículo actualmente activo; y por número.

Nota que esta asignación de múltiples clases como se describe en el ejemplo anterior no funciona correctamente en IE6. Hay un solución alternativa hacer IE6 capaz de tratar con múltiples clases; No lo he intentado todavía pero parece muy prometedor, viniendo de Dean Edwards. Hasta entonces, deberá establecer la clase que sea más importante para usted (número de elemento, activo o primero / último) o recurrir al uso de ID. (booo IE6!)


551
2018-02-12 16:39



Aquí hay solo 4 ejemplos:

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

EDITAR (02/02/2014) cuatro años después, yo diría:

  • Use un pre-procesador CSS y administre sus archivos como parciales (yo personalmente prefiero Sass con Compass, pero Less también es bastante bueno y hay otros)
  • Lea sobre conceptos como OOCSS, SMACSSy BEM o getbem.
  • Eche un vistazo a lo populares que son los marcos de CSS Oreja y Fundación Zurb están estructurados. Y no descarte menos marcos populares: Inuit es interesante, pero hay muchos otros.
  • Combine / minimice sus archivos con un paso de compilación en un servidor de integración continua y / o un corredor de tareas como Grunt o Gulp.

87
2018-01-20 17:16



No escribir encabezados en CSS

Simplemente divida las secciones en archivos. Cualquier comentario de CSS, debería ser solo eso, comentarios.

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

Use un script para combinarlos en uno; si necesario. Incluso puede tener una buena estructura de directorios, y simplemente haga que su script busque de forma recursiva .css archivos.

Si debe escribir encabezados, tenga un TOC al comienzo del archivo

Los encabezados en el TOC deberían ser perfectamente iguales a los encabezados que escriba más adelante. Es un dolor buscar encabezados. Para agregar al problema, ¿cómo se supone que alguien sabe que tiene otro encabezado después de su primer encabezado? PD. no agregue doc-like * (estrella) al comienzo de cada línea cuando escriba TOC, simplemente hace que sea más molesto seleccionar el texto.

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

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

En primer lugar, cuando editas el guión, existe una probabilidad del 50/50 de que prestes atención a lo que está fuera del bloque de la regla (especialmente si se trata de una gran porción de texto;)). En segundo lugar, hay (casi) ningún caso en el que necesite un "comentario" afuera. Si está afuera, es 99% del tiempo un título, así que mantenlo así.

Divida la página en componentes

Los componentes deberían tener position:relative, no padding y no marginla mayor parte del tiempo Esto simplifica mucho las reglas, y permite mucho más simple absolute:position'de elementos, ya que si hay un contenedor de posición absoluta, el elemento de posición absoluta utilizará el contenedor al calcular top, right, bottom, left propiedades.

La mayoría de los DIV en un documento HTML5 suelen ser un componente.

Un componente también es algo que puede considerarse una unidad independiente en la página. En términos sencillos, trate algo así como un componente si tiene sentido tratar algo así como un caja negra.

Volviendo al ejemplo de la página QA:

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

Al dividir la página en componentes, divide su trabajo en unidades manejables.

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

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

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

Si no son legibles en una línea, al menos colóquelos cerca:

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

Utilice 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

Si tiene más instancias del mismo selector, es muy probable que termine con varias instancias de las mismas reglas. Por ejemplo:

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

Evite usar TAG como selectores, cuando puede usar id / classes

En primer lugar, las etiquetas DIV y SPAN son la excepción: nunca debes usarlas, ¡nunca! ;) Solo utilícelos para adjuntar una clase / 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;
}

Debería escribirse así:

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

Debido a que los DIV colgantes adicionales allí no agregan nada al selector. También fuerzan una regla de etiqueta innecesaria. Si fueras a cambiar, por ejemplo, .answer a partir de una div a un article tu estilo se romperá

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 es la border-collapse la propiedad es una propiedad especial que solo tiene sentido cuando se aplica a un table. Si .statistics no es un table no debería aplicarse.

¡Las reglas genéricas son malas!

  • evite escribir reglas genéricas / mágicas si puede
  • a menos que sea para un restablecimiento / desconexión de CSS, toda su magia genérica se debe aplicar a al menos un componente raíz

No te ahorran tiempo, te hacen estallar la cabeza; así como también hacer que el mantenimiento sea una pesadilla. Cuando está escribiendo la regla, puede saber dónde se aplican, sin embargo, eso no garantiza que su regla no lo moleste más adelante.

Agregar reglas genéricas es confuso y difícil de leer, incluso si tiene alguna idea del documento que está diseñando. Esto no quiere decir que no deba escribir reglas genéricas, simplemente no las use a menos que realmente pretenda que sean genéricas, e incluso ellas añaden tanta información de alcance en el selector como sea posible.

Cosas como esta...

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

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

... tiene el mismo problema que usar variables globales en un lenguaje de programación. ¡Necesitas darles alcance!

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

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

Básicamente eso se lee como:

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

Me gusta usar IDs cuando un componente que conozco es un singleton en una página; tus necesidades pueden ser diferentes.

Nota: idealmente, debe escribir lo suficiente. Sin embargo, mencionar más componentes en el selector es el error más tolerante, en comparación con mencionar menos componentes.

Supongamos que tienes una paginationcomponente. Lo usas en muchos lugares en tu sitio. Este sería un buen ejemplo de cuándo estaría escribiendo una regla genérica. Digamos que display:block el número de página individual se vincula y les da un fondo gris oscuro. Para que sean visibles, debes tener reglas como esta:

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

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

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

Esto hará que sus enlaces blancos en negro, que no desea.

La forma incorrecta de solucionarlo es:

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

La forma correcta de solucionarlo es:

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

Los comentarios complejos de "lógica" no funcionan :)

Si escribe algo así como: "este valor depende de bla-bla combinada con la altura de bla-bla", es inevitable que cometa un error y todo se derrumbará como un castillo de naipes.

Mantenga sus comentarios simples; si necesita "operaciones lógicas", considere uno de esos lenguajes de plantillas CSS como HABLAR CON DESCARO A o MENOS.

¿Cómo se escribe un palet de colores?

Deja esto para el final. Tenga un archivo para su paleta de colores completa. Sin este archivo, su estilo aún debe tener una paleta de colores utilizable en las reglas. Su paleta de colores debe sobrescribirse. Usted encadena selectores usando un componente principal de muy alto nivel (ej. #page) y luego escribe tu estilo como un bloque de reglas autosuficiente. Puede ser solo color o algo más.

p.ej.

#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 estilos independiente del estilo base, que usted cascada dentro.

Menos nombres, requiere menos memoria, lo que hace que el código sea más fácil de leer

Usar menos nombres es mejor. Idealmente, use palabras muy simples (¡y cortas!): Texto, cuerpo, encabezado.

También encuentro que la combinación de palabras simples es más fácil de entender que tener una sopa de palabras largas "apropiadas": post-cuerpo, post-libro, información de usuario, etc.

Mantenga el vocabulario pequeño, de esta manera, incluso si algún extraño que entra para leer su sopa de estilo (como usted después de unas pocas semanas), solo necesita entender dónde se usan las palabras en lugar de dónde se usa cada selector. Por ejemplo yo uso .this siempre que un elemento sea supuestamente "el elemento seleccionado" o "el elemento actual", etc.

Limpia después de ti

Escribir CSS es como comer, a veces dejas un desastre. Asegúrate de limpiar ese desastre, o el código de basura simplemente se acumulará. Elimine las clases / identificadores que no usa. Elimine las reglas CSS que no usa. Asegúrate de que todo esté bien ajustado y no tengas reglas conflictivas o duplicadas.

Si usted, como sugerí, trató algunos contenedores como cajas negras (componentes) en su estilo, usó esos componentes en sus selectores y guardó todo en un archivo dedicado (o dividió correctamente un archivo con un TOC y encabezados), entonces su el trabajo es sustancialmente más fácil ...

Puede usar una herramienta como la extensión para Firefox Dust-Me Selectors (consejo: apúntela a su sitemap.xml) para ayudarlo a encontrar algo de la basura escondida en sus css nukes y carrietes.

Mantener una unsorted.css archivo

Digamos que está diseñando un sitio de QA, y ya tiene una hoja de estilo para la "página de respuestas", que llamaremos answers.css. Si ahora necesita agregar muchos css nuevos, agréguelos al unsorted.css hoja de estilos luego refactorizar en su answers.css hoja de estilo

Varias razones para esto:

  • es más rápido refactorizarse después de que hayas terminado, luego es para buscar reglas (que probablemente no existan) e insertar código
  • escribirás cosas que eliminarás, inyectar código solo hace que sea más difícil eliminar ese código
  • agregar al archivo original conduce fácilmente a la duplicación de regla / selector

72
2017-08-08 12:57



Mira esto 1. HABLAR CON DESCARO A 2. Brújula


55
2018-01-27 05:18



La mejor manera que he visto para contrarrestar CSS bloat está utilizando principios de CSS orientados a objetos.

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

Algunas de las ideologías van en contra de mucho de lo que se ha dicho aquí en las respuestas principales, pero una vez que sabes cómo diseñar CSS de una manera orientada a objetos, verá que realmente funciona para mantener el código delgado y malo.

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

Facebook contrató al creador de OOCSS, Nicole Sullivan para obtener una gran cantidad de ahorros en su código de front-end (HTML / CSS). Sí, en realidad puede obtener ahorros no solo en su CSS, sino también en su HTML, que por el sonido de esto, es muy posible para usted, ya que menciona la conversión de un table disposición basada en una gran cantidad de dives

Otro gran enfoque es similar en algunos aspectos a OOCSS, es planear y escribir su CSS para que sea escalable y modular desde el principio. Jonathan Snook ha hecho una brillante escritura y libro / ebook sobre SMACSS: arquitectura escalable y modular para CSS

Déjame conectarte con algunos enlaces:
5 errores de CSS masivo - (Video)
5 errores de CSS masivo - (Diapositivas)
CSS Bloat - (Diapositivas) 


31
2018-02-12 16:46



También debe comprender la cascada y el peso, y cómo funcionan.

Noto que está utilizando solo identificadores de clase (div.title). ¿Sabía que también puede usar identificaciones y que una identificación tiene más peso que una clase?

Por ejemplo,

#page1 div.title, #page1 ul, #page1 span {
  // rules
}

hará que todos esos elementos compartan un tamaño de fuente, por ejemplo, o un color, o cualesquiera que sean sus reglas. Incluso puede hacer que todas las DIV que son descendientes de # page1 obtengan ciertas reglas.

En cuanto al peso, recuerde que los ejes CSS se mueven de la mayoría-general / más clara a más específica / más pesada. Es decir, en un selector de CSS un especificador de elemento es anulado por un especificador de clase que es invalidado por un especificador de ID. Los números cuentan, por lo que un selector con dos especificadores de elementos (ul li) tendrá más peso que uno con un único especificador (li).

Piense en ello como dígitos. Un 9 en la columna de unidades sigue siendo menor que uno en la columna de decenas. Un selector con un especificador de ID, un especificador de clase y dos especificadores de elementos tendrá más peso que un selector sin ID, 500 especificadores de clase y 1.000 especificadores de elementos. Este es un ejemplo absurdo, por supuesto, pero entiendes la idea. El punto es que la aplicación de este concepto te ayuda a limpiar un montón de CSS.

Por cierto, agregar el especificador de elemento a la clase (div.title) no es necesario a menos que te encuentres en conflicto con otros elementos que tienen class = "title". No agregue peso innecesario, ya que es posible que necesite usar ese peso más adelante.


16
2018-04-07 19:28



Puedo sugerir Menos CSS marco dinámico

Es similar a SASS como se mencionó anteriormente.

Ayuda a mantener CSS por clase principal.

P.ej.

 #parent{     
  width: 100%;

    #child1
    {    
     background: #E1E8F2;    
     padding: 5px;    
    }

    #child2
   {
     background: #F1F8E2;
     padding: 15px
   }
 }

Que hace esto? Aplica ancho: 100% a # child1 y # child2.

Además, el CSS # child1 específico pertenece a #parent.

Esto rendiría a

#parent #child1
{
 width: 100%;
 background: #E1E8F2;
 padding: 5px;
}

#parent #child2
{
 width: 100%;
 background: #F1F8E2;
 padding: 15px;
}

13
2018-02-12 16:32