Come semplificare il codice CSS
https://stackoverflow.com/questions/3610649
-
26-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto lavorando con un pezzo esistente di codice CSS che assomiglia a questo (tratto da un corpo molto più grande di codice):
.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;
}
Il mio problema principale con questo è la complessità: ogni regola ha 3-5 selettori su di esso, il che rende davvero difficile capire quale regola si applica. Ci sono 25 regole qui per lo styling quattro pulsanti con il testo. Non può essere così! Duro
Alcuni retroscena: questo stili CSS un widget che mostra quattro immagini bitmap, una delle quali è selezionata, da una singola bitmap utilizzando sprite CSS. immagini non selezionati vengono da una riga della bitmap grande e l'immagine nello stato selezionato proviene da un'altra riga. L'immagine selezionata viene messo in una scatola che è più larga e più alta rispetto alle scatole di immagini non selezionate.
Così, c'è un programma che semplificare questo a qualcosa di cognitivamente gestibile? Esiste uno strumento in grado di identificare quali valori sono inutili perché sono sostituiti da più selettori specifici? Ci sono le migliori pratiche per affrontare con i CSS in modo che non si ottiene percorsi inutilmente selettivi?
Aggiornamento: 2010-08-31 00:25
Così ho guardato in meno come un modo di concettualizzare il codice CSS. E perché il mio codice non è in meno, ho guardato css2less . Ecco un estratto di quello che css2less produce il codice in questione:
.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;
}
}
}
....
}
Quindi, ecco la cosa: apl_widget_levelX sono in realtà unica. Penso che un buon strumento potrebbe generare questo:
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;
....
}
commenti simili per gli elementi selezionati / non selezionati.
Mi piace dove le risposte stanno andando ma cerco di strumenti per rendere la vita più facile. Il codice CSS completo in questo file è di 2500 linee e l'intera suite è 11000 righe.
Aggiornamento: 2010-09-01 09:50
Questo è quello che ho girato in 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;
}
In precedenza 175 linee. Ora 75 linee. La maggior parte del codice (40 linee) fa lo sprite CSS.
Aggiornamento 2010-09-01 11:30
HTML ora appare come:
<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 in precedenza sembrava:
<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>
Soluzione
Sulla base del HTML Ripubblicato suggerirei seguenti modifiche:
L'interno classi apl_widget_label e apl_widget_value sono inutili e possono semplicemente sostituiti con elementi unici (che è unico all'interno del li). Questo può rendere i selettori leggermente più lunga, ma molto meglio strutturato e più leggibile. Anche il div intorno il link è inutile, in quanto il collegamento può essere designato direttamente.
<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;
}
È anche possibile spostare le proprietà top, width e height nelle regole livello per le regole 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;
}
Sarebbe bello se si potesse eliminare gli ID "livello selezionato" (quelli che termina con s), ma non riesco a pensare ad un modo ragionevole, che supporta ancora IE6.
Ho appena visto che è stata impostata la li a display: inline mantenendo elementi di blocco li insde. Dovrete stare attenti con quello, perché, pur essendo corretta tecnica CSS sua interpretazione esatta non è davvero definito. Si può considerare display: inline-block o float: left posto.
Altri suggerimenti
I seguenti sono solo commenti; E 'difficile dare risposte definitive a domande come questa, esp. quando la struttura HTML non è disponibile.
La prima cosa che veramente mi ha fatto era il nome lungo di classe . Quando hai così tanto ripetizione all'interno del nome delle classi, penso che stai facendo qualcosa di sbagliato. Nomi come
.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img
In realtà dovrebbe essere ridotto a (qualcosa di simile):
.apl_widget .fourlevel .panel img
Specialmente quando i selettori sono fondamentalmente 90% ripetitivo, come
.apl_widget_level.apl_widget_level1
Non c'è proprio nessun punto per questo! Nei CSS, la garanzie cascata eredità, in modo da aggiungere un prefisso troppo tutti i vostri nomi di classe è solo necessario. Sicuramente se hai ottenuto al punto di indicizzazione i vostri nomi della classe, il suo tempo per scambiarle per ids, come
#level1
Si può sembra piccola, ma lo fa davvero fare CSS più gestibile se hai selettori che sono compatti e meno ripetitivo - almeno non spenderà scansione in tempo tanto attraverso selettori.
Se la struttura HTML del widget è la stessa in tutto il codice, allora si può effettivamente scambiare alcune delle classi per gli elementi. Sarà naturalmente ridurre stile riutilizzabilità, ma dato che i widget sono spesso non condividono la stessa struttura e il design, come il resto della pagina, dovrebbe essere possibile per i più semplici stili di widget a lesinare sulle classi. I selettori come (diciamo)
.profile img
sarebbe certamente meglio che solo dare quel img una classe - la sua sia immediatamente evidente quello che stai facendo, e di facile manutenzione, allo stesso tempo.
Un'altra cosa che si potrebbe desiderare di fare è quello di solo il codice per i casi particolari , come in questo caso molto semplificato
a {
color: white;
background: #666;
text-decoration: none;
}
a.special {
color: #B8E9FF;
}
a.brilliant {
color: #FFAFAF;
}
Inoltre, rimuovere le classi ripetute che rimane lo stesso all'interno di ciascun caso. Anche in questo caso, utilizzare la cascata per il suo pieno potenziale.
3-5 selettori max non è insolito. 3-5 per tutti uno di loro è, però. I selettori CSS dovrebbero logicamente passare dal semplice al complesso, in quanto vengono aggiunti più casi. Quindi, provare a trovare la base del widget, definire un default, e il codice il vostro senso.
Il frammento di codice in sé non è anche male tranne che per l'inserimento di troppi e troppo lunghi nomi delle classi. Riscrittura dal basso verso l'alto anche se può spesso portare a ottimizzazioni, esp. se i requisiti del progetto è cambiato dall'ultima sviluppatore (Non abbiamo bisogno di supportare più IE6, evviva!) Ma ancora una volta, senza vedere la struttura è difficile rendere le soluzioni definitive.
Se è solo per quattro pulsanti, mi piacerebbe tirare la pagina in un browser moderno e utilizzare un toolkit di sviluppo (Firebug in Firefox, Libellula in Opera, gli strumenti di WebKit per sviluppatori di Safari / Chrome) per ispezionare i pulsanti in questione e vedere che cosa gli stili efficaci sono su ciascuno.
Si potrebbe desiderare di andare oltre questo articolo io non leggo troppo tempo indietro, ha una buona panoramica dei pro ei contro di organizzare il vostro CSS. Mi piacerebbe anche dare un'occhiata alla parte inferiore di questo articolo ha alcuni link per qualche informazione in più.
Dalla bellezza di cose che i vostri stili di widget sembrava andare un po 'in mare con la classitis, ma almeno la sua documentata, non posso contare il numero di volte che ho visto classi CSS senza documenti.
penso che avete bisogno di cambiare il nome dei tuoi clases, vedo che si sta utilizzando ".apl_widget_label" per quasi tutto e lo stile l'elemento a seconda delle selettori.
Ad esempio:
/* 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 {
perché non creare un'altra classe denominata "mini-display" e poi il vostro elemento sarebbe come:
<div class=".apl_widget_label mini-display">..</div>
e il vostro css potrebbe essere:
.mini-display{..}
se non piace ... Ho visto alcune persone che crea le classi come questo
<div class="left margin-auto big red ...">..</div>
dove ogni classe cambia qualcosa di specifico sull'elemento (cioè a sinistra => float: left;). E hanno come una libreria di classi che hanno sempre utilizzato.
