¿Cómo simplificar el código CSS
https://stackoverflow.com/questions/3610649
-
26-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy trabajando con una pieza existente de código CSS que tiene este aspecto (extraído de un cuerpo mucho más grande de código):
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
/* zoom:1 */ /* IE Sheet */
}
/* a panel container */
.apl_widget_fourLevel .apl_widget_level {
float:left;
position:relative;
overflow:hidden;
text-align:center;
width:102px;
height:150px;
margin:0 1px 0 0;
}
/* extra height for widgets with the supplementary data beneath the panels */
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_client1 .apl_widget_level {
height:auto;
}
/* extra height for widgets with the supplementary data beneath the panels */
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level {
height:auto;
width:90px;
}
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected {
width:102px;
}
/* the gray label in the panel
enforce for mini display */
.apl_widget_fourLevel .apl_widget_level .apl_widget_label,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
position:absolute;
top:20px;
left:0;
width:100%;
margin:0;
color:#555;
font-weight:normal;
text-transform:uppercase;
font-size:100%;
line-height:1.0em;
z-index:1;
}
/* offset for mini labels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_label {
margin-top:20px;
font-size:85%;
}
/* label cascade reset for IE6, sigh */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
margin-top:0;
font-size:100%;
}
/* the value displayed in the panel */
.apl_widget_fourLevel .apl_widget_level .apl_widget_value,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
position:absolute;
top:45px;
left:0;
width:100%;
margin:0;
color:#fff;
font-weight:bold;
font-size:28px;
line-height:1.0em;
z-index:1;
}
/* offset for mini value */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_value {
margin-top:15px;
font-size:24px;
}
.apl_widget_fourLevel.apl_widget_client1 .apl_widget_level .apl_widget_value {
margin-top:3px;
font-size:20px;
font-weight:normal;
opacity:0;
-moz-opacity:0;
-webkit-opacity:0;
filter: alpha(opacity=0);
}
/* value cascade reset for IE6, sigh */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
margin-top:0;
font-size:28px;
}
/* range values smaller */
.apl_widget_fourLevel.apl_widget_fourLevelRange .apl_widget_level .apl_widget_value {
margin-top:7px;
font-size:15px;
}
.apl_widget_fourLevel .apl_widget_value a {
color:#fff;
}
/* supplemental value beneath the panel */
.apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore {
position:absolute;
bottom:0px;
left:0;
width:100%;
color:#0072ad;
font-weight:bold;
font-size:28px;
z-index:1;
}
.apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore a {
color:#0072ad;
}
/* low values will be lighter color */
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore,
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore a {
color:#30a2dd;
}
/* the image container element */
.apl_widget_fourLevel .apl_widget_level .apl_widget_panel {
overflow:hidden;
width:100%;
height:135px;
position:relative;
}
/* the panel image itself */
.apl_widget_fourLevel .apl_widget_level .apl_widget_panel img {
position:absolute;
top:0;
left:-5px;
margin-top:-150px;
}
/* Individual Level image offsets */
.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img {
left:-5px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level2 .apl_widget_panel img {
left:-105px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level3 .apl_widget_panel img {
left:-205px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level4 .apl_widget_panel img {
left:-305px;
}
/* mini panel offsets */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_panel img {
margin-top:-300px;
margin-left:-6px;
}
/* reset image offset via margin for highlighted/selected style */
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelSelected .apl_widget_panel img {
margin:0;
}
Mi principal problema con esto es la complejidad: cada regla tiene 3-5 selectores en él, por lo que es muy difícil averiguar qué regla se aplica. Hay 25 reglas aquí para estilizar cuatro botones con el texto. No puede ser eso! Dura
Algunos antecedentes: este estilos CSS de un widget que muestra cuatro imágenes de mapa de bits, uno de los cuales se selecciona, a partir de un único mapa de bits usando sprites CSS. imágenes seleccionadas provienen de una fila de la gran mapa de bits y la imagen en el estado seleccionado proviene de otra fila. La imagen seleccionada se pone en una caja que es más ancho y más alto que las cajas de las imágenes seleccionadas.
Entonces, ¿hay un programa que va a simplificar esto a algo cognitivamente manejable? ¿Existe una herramienta que puede identificar qué valores son innecesarios, ya que se sustituyen por los selectores más específicos? ¿Existen mejores prácticas para hacer frente a CSS de manera que usted no consigue caminos innecesariamente selectivos?
Actualización: 2010-08-31 12:25
Así que miró a los menos como una forma de conceptualizar el código CSS. Y porque mi código no es en menos, miré hacia arriba css2less . He aquí un extracto de lo css2less produce en el código en cuestión:
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
.apl_widget_level.apl_widget_level1 {
.apl_widget_panel {
img {
left:-5px;
}
}
}
.apl_widget_level.apl_widget_level2 {
.apl_widget_panel {
img {
left:-105px;
}
}
}
.apl_widget_level.apl_widget_level3 {
.apl_widget_panel {
img {
left:-205px;
}
}
}
.apl_widget_level.apl_widget_level4 {
.apl_widget_panel {
img {
left:-305px;
}
}
}
....
}
Así que aquí está la cosa: apl_widget_levelX son realmente único. Creo que una buena herramienta podría generar esto:
img#apl_widget_level1 { left:-5px; }
img#apl_widget_level2 { left:-105px; }
img#apl_widget_level3 { left:-205px; }
img#apl_widget_level4 { left:-305px; }
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
....
}
comentarios similares para los elementos seleccionados / no seleccionados.
Me gusta cuando las respuestas se van pero estoy en busca de herramientas para hacer la vida más fácil. El código CSS completo en este archivo es de 2500 líneas y todo el conjunto es de 11.000 líneas.
Actualización: 2010-09-01 09:50
Esto es lo que lo convirtió en la mano:
ul.apl_widget_content {
width: 492px;
height: 140px;
position: relative;
}
ul.apl_widget_content li {
background: url(/home/hbrown/tmp/widget_fourlevel_1.png) no-repeat;
list-style: none;
display: inline;
position: absolute;
text-align:center;
text-transform:uppercase;
}
#apl_widget_level1 {
left:5px; top: 0px;
background-position: -13px -300px;
width: 86px; height: 133px;
}
#apl_widget_level2 {
left:105px; top: 0px;
background-position: -113px -300px;
width: 86px; height: 133px;
}
#apl_widget_level3 {
left:205px; top: 0px;
background-position: -213px -300px;
width: 86px; height: 133px;
}
#apl_widget_level4 {
left:305px; top: 0px;
background-position: -313px -300px;
width: 86px; height: 133px;
}
#apl_widget_level1s {
left:5px; top: 0px;
background-position: -5px 0px;
width:102px; height: 133px;
}
#apl_widget_level2s {
left:105px; top: 0px;
background-position: -105px 0px;
width:102px; height: 133px;
}
#apl_widget_level3s {
left:205px; top: 0px;
background-position: -205px 0px;
width:102px; height: 133px;
}
#apl_widget_level4s {
left:305px; top: 0px;
background-position: -305px 0px;
width:102px; height: 133px;
}
div.apl_widget_label {
padding-top: 35px;
font-size: 85%;
font-weight:normal;
top: 20px;
line-height:1em;
}
.selected .apl_widget_label {
padding-top: 15px;
}
div.apl_widget_value {
font-size:24px;
margin-top:10px;
}
.selected div.apl_widget_value {
margin-top:15px;
}
.apl_widget_value a {
text-decoration:none;
color:#FFF;
}
Anteriormente 175 líneas. Ahora 75 líneas. La mayor parte del código (40 líneas) hace lo spriting CSS.
Actualización 2010-09-01 11:30
HTML ahora se ve así:
<ul class="apl_widget_content">
<li id="apl_widget_level1">
<div class="apl_widget_label">Level </div>
<div class="apl_widget_value"><a href="#">1</a></div>
</li>
<li id="apl_widget_level2">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value"><a href="#">2</a></div>
</li>
<li id="apl_widget_level3s" class="selected">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value"><a href="#">3</a></div>
</li>
<li id="apl_widget_level4">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value"><a href="#">4</a></div>
</li>
</ul>
HTML previamente que parecía:
<div class="apl_widget_strand_fourLevel apl_widget_fourLevelMini">
<div class="apl_widget_content">
<div class="apl_widget_level apl_widget_level1 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value"><a href="#">1</a></div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level2 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value"><a href="#">2</a></div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level3 apl_widget_levelSelected">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value"><a href="#">3</a></div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level4 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value"><a href="#">4</a></div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
</div>
</div>
Solución
Con base en el código HTML Posteado me gustaría sugerir cambios siguientes:
Las clases apl_widget_label y apl_widget_value interior son innecesarias y pueden simplemente reemplazado con elementos únicos (que es único dentro del li). Esto puede hacer que los selectores un poco más largo, pero mucho mejor estructurado y más legible. También el div alrededor del enlace es innecesario, ya que el enlace puede ser de estilo directamente.
<ul class="apl_widget_content">
<li id="apl_widget_level1">
<div>Level </div><a href="#">1</a>
</li>
...
con
.apl_widget_content li div {
padding-top: 35px;
font-size: 85%;
font-weight:normal;
top: 20px;
line-height:1em;
}
.apl_widget_content li.selected div {
padding-top: 15px;
}
.apl_widget_content li a {
font-size:24px;
margin-top:10px;
text-decoration:none;
color:#FFF;
display: block;
}
.apl_widget_content li.selected a {
margin-top:15px;
}
También puede mover las propiedades top, width y height en las reglas de nivel a las reglas ul.apl_widget_content li(.selected):
ul.apl_widget_content li {
...
top: 0px;
width: 86px;
height: 133px;
}
ul.apl_widget_content li.selected {
width:102px;
}
#apl_widget_level1 {
background-position: -13px -300px;
}
Sería estupendo si pudiera deshacerse de los ID de "nivel seleccionado" (los que termina con s), pero no puedo pensar en una manera razonable, que sigue apoyando a IE6.
Yo sólo veo que haya establecido el li a display: inline la vez que mantiene los elementos de bloque ellas insde. Tendrá que tener cuidado con eso, porque a pesar de estar CSS técnica correcta de su representación exacta no está muy definida. Usted puede considerar display: inline-block o float: left lugar.
Otros consejos
Los siguientes son sólo observaciones; Es difícil dar respuestas definitivas a preguntas de este tipo, esp. cuando la estructura HTML no está disponible.
La primera cosa que realmente me fue el nombre largo de marcas . Cuando se tiene tanto la repetición dentro de la Nombre de las clases, creo que estás haciendo algo mal. Nombres como
.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img
Realmente debería acortarse a (algo así):
.apl_widget .fourlevel .panel img
Especialmente cuando sus selectores son básicamente 90% repetitivo, como
.apl_widget_level.apl_widget_level1
Simplemente no hay punto para esto! En CSS, la herencia garantías en cascada, por lo que añadir un prefijo también todos los nombres de las clases es sólo necesario. Sin duda, si usted ha llegado hasta el punto de indexación nombres de las clases, es hora de cambiarlos para ids, como
#level1
Puede parecer pequeña, pero realmente hace CSS más fácil de mantener si tiene selectores que son compactos y menos repetitivo - por lo menos no van a pasar mucho tiempo de exploración a través de selectores.
Si la estructura HTML del widget es el mismo en todo el código, a continuación, en realidad se puede intercambiar a cabo algunas de las clases de elementos. Será, por supuesto, reducir reutilización estilo, pero teniendo en cuenta que los widgets son a menudo no comparten la misma estructura y diseño que el resto de la página, debería ser posible para los estilos de componentes más simples a escatiman en clases. Selectores como (por ejemplo)
.profile img
Sin duda, sería mejor que acaba de dar una clase que img - su tanto inmediatamente obvio lo que está haciendo, y fácil de mantener, al mismo tiempo.
Otra cosa que es posible que desee hacer es único código para casos especiales , como este caso muy simplificado
a {
color: white;
background: #666;
text-decoration: none;
}
a.special {
color: #B8E9FF;
}
a.brilliant {
color: #FFAFAF;
}
Además, eliminar los repetidos clases que se mantiene igual en cada caso. Una vez más, utilizar la cascada en todo su potencial.
3-5 selectores max no es inusual. 3-5 para todos uno de ellos es, sin embargo. Los selectores CSS deben ir lógicamente de lo simple a lo complejo, a medida que se añaden más casos. Por lo tanto, trate de encontrar la base del widget, definir un valor predeterminado, y el código de su forma de trabajo.
El fragmento de código en sí no es también mal excepto por la inclusión de demasiados y demasiado largos nombres de clase. Reescribiendo de abajo hacia arriba, aunque a menudo puede conducir a optimizaciones, esp. si los requisitos del proyecto ha cambiado desde la última desarrollador (No necesitamos para apoyar IE6 más, hurra!) Pero, de nuevo, sin ver la estructura que es difícil hacer que las soluciones definitivas.
Si es sólo para los cuatro botones, me tire de la página en un navegador moderno y el uso de un conjunto de herramientas de desarrollo (Firebug en Firefox, libélula en Opera, las herramientas para desarrolladores de WebKit en Safari / Chrome) para inspeccionar los botones en cuestión y ver lo que los estilos son eficaces en cada uno.
Es posible que desee ir más este artículo no leído demasiado tiempo atrás, que tiene una muy buena visión general de los pros y los contras de la organización de su css. También me gustaría echar un vistazo a la parte inferior del artículo que tiene algunos enlaces a algo más de información.
Desde el aspecto de las cosas sus estilos de componentes parecía ir un poco por la borda con la classitis, pero al menos es documentado, no puedo contar el número de veces que he visto clases CSS sin papeles.
creo que es necesario cambiar el nombre de sus clases, veo que está utilizando ".apl_widget_label" para casi todo y el estilo del elemento en función de los selectores.
por ejemplo:
/* the gray label in the panel
enforce for mini display */
.apl_widget_fourLevel .apl_widget_level .apl_widget_label,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
¿por qué no crear otra clase llamada "mini-pantalla" y luego el elemento sería como:
<div class=".apl_widget_label mini-display">..</div>
y el CSS sería:
.mini-display{..}
si no lo hace como si ... He visto algunas personas que crean las clases como esto
<div class="left margin-auto big red ...">..</div>
donde cada clase cambia algo específico sobre el elemento (es decir, a la izquierda => float: left;). Y tienen como una biblioteca de clases que usan siempre.
