Wie CSS-Code vereinfachen
https://stackoverflow.com/questions/3610649
-
26-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich arbeite mit einem bestehenden Stück CSS-Code, dass wie folgt aussieht (Auszug aus einem viel größeren Kreis von Code):
.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;
}
Mein Hauptproblem dabei ist, die Komplexität: jede Regel hat 3-5 Selektoren auf sie, es ist wirklich schwer, herauszufinden, machen die Regel gilt. Es gibt 25 Regeln hier für vier Tasten mit Text Styling. Es kann nicht so schwer! Sein
Einige Hintergrundinformationen: dieses CSS-Stile ein Widget, das zeigt vier Bitmap-Bilder, von denen einer ausgewählt wird, aus einem einzigen Bitmap CSS-Sprites verwenden. Nicht ausgewählte Bilder kommen aus einer Reihe des großen Bitmap und das Bild in dem ausgewählten Zustand kommt von einer anderen Reihe. Das ausgewählte Bild wird in eine Box gesetzt, die breiter und höher als die Boxen von nicht ausgewählten Bildern.
So gibt es ein Programm, das dies etwas kognitiv überschaubaren vereinfachen? Gibt es ein Tool, das die Werte sind nicht erforderlich, da sie ersetzt werden durch spezifischere Selektoren identifizieren können? Gibt es bewährte Methoden für den Umgang mit CSS, so dass Sie nicht unnötig selektive Wege erhielten?
Update: 2010-08-31 00.25
sah Also ich in weniger als eine Möglichkeit, den CSS-Code von Konzeptualisierung. Und weil mein Code nicht in weniger ist, schaute ich auf css2less . Hier ist ein Auszug von dem, was css2less erzeugt auf dem Code in Frage:
.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;
}
}
}
....
}
Also hier ist das Ding: apl_widget_levelX ist tatsächlich einzigartig. Ich denke, ein gutes Werkzeug, diese erzeugen kann:
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;
....
}
ähnliche Kommentare zu den ausgewählten / nicht ausgewählten Elementen.
Ich mag, wo die Antworten gehen, aber ich bin auf der Suche nach Werkzeugen mein Leben einfacher zu machen. Der vollständige CSS-Code in dieser Datei ist 2500 Zeilen und die gesamte Suite ist 11000 Zeilen.
Update: 2010-09-01 09.50
Das ist, was ich drehte es in der Hand:
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;
}
Bisher 175 Zeilen. Jetzt 75 Zeilen. Der größte Teil des Codes (40 Zeilen) hat die CSS spriting.
Update 2010-09-01 11.30
HTML sieht nun wie:
<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 vorher sah aus wie:
<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>
Lösung
Basierend auf dem von ihm entsandten HTML ich folgende Änderungen vorschlagen würde:
Die inneren Klassen apl_widget_label und apl_widget_value sind unnötig und kann einfach mit einzigartigen Elementen ersetzt (die innerhalb des li einzigartig ist). Dies kann die Wähler etwas länger, ist aber viel besser strukturiert und besser lesbar. Auch die div um die Verbindung ist nicht notwendig, da der Link direkt gestylt werden.
<ul class="apl_widget_content">
<li id="apl_widget_level1">
<div>Level </div><a href="#">1</a>
</li>
...
mit
.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;
}
Sie können auch die top, width und height Eigenschaften in der Ebene Regeln für die ul.apl_widget_content li(.selected) Regeln bewegen:
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;
}
Es wäre toll, wenn man die Beseitigung des „ausgewählte Ebene“ IDs bekommen kann (die mit s enden), aber ich kann eine vernünftigen Art und Weise nicht denken, die IE6 noch unterstützt.
Ich sehe gerade, dass Sie die li zu display: inline gesetzt haben, während halten Blockelemente sie insde. Sie werden damit vorsichtig sein müssen, denn obwohl sie technisch korrekter CSS seines genaues Rendering ist nicht wirklich definiert. Sie können stattdessen display: inline-block oder float: left betrachten.
Andere Tipps
Im Folgenden sind nur Kommentare; Es ist schwer, endgültige Antworten auf Fragen wie diese zu geben, esp. wenn die HTML-Struktur ist nicht verfügbar.
Das erste, was wirklich habe ich war die lange Klassennamen . Wenn Sie so viele Wiederholungen innerhalb des Namen haben der Klassen, ich glaube, Sie etwas falsch machen. Namen wie
.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img
Wirklich werden soll (wie etwas) verkürzt:
.apl_widget .fourlevel .panel img
Vor allem, wenn Ihre Wähler sind grundsätzlich 90% sich wiederholend, wie
.apl_widget_level.apl_widget_level1
Es gibt nur keinen Sinn dafür! In CSS, einen Präfix die Kaskade garantiert Vererbung, so Hinzufügen von Namen zu allen Ihrer Klasse ist einfach notwendig. Sicher, wenn Sie bis zu dem Punkt bekommen haben Indizierung Ihre Klassennamen, seine Zeit zu tauschen sie für ids aus, wie
#level1
Es kann scheint klein, aber es hat wirklich machen CSS mehr wartbar, wenn Sie Selektoren haben, die kompakt und weniger Wiederholungen - zumindest werden Sie nicht so viel Zeit Scannen durch Selektoren verbringen.
Wenn die HTML-Struktur des Widgets überall gleich dem Code ist, dann können Sie tatsächlich für Elemente einige der Klassen auszulagern. Es wird natürlich Stil Wiederverwertbarkeit zu reduzieren, aber wenn man bedenkt, dass Widgets oft nicht die gleiche Struktur und Design wie der Rest der Seite wählen, soll es möglich sein, für einfachere Widget Stile auf Klassen knausern. Selektoren wie (sagen wir)
.profile img
wäre sicherlich besser sein, als nur, dass img eine Klasse geben - seine beiden sofort klar, was Sie tun, und einfach zugleich zu halten.
Etwas anderes möchten Sie vielleicht zu tun ist, um nur Code für Sonderfälle , wie dieser sehr vereinfachten Fall
a {
color: white;
background: #666;
text-decoration: none;
}
a.special {
color: #B8E9FF;
}
a.brilliant {
color: #FFAFAF;
}
Entfernen Sie auch die wiederholten Klassen, die das gleiche in jedem Fall bleibt. Auch die Cascade ihr volles Potenzial nutzen.
3-5 Selektoren max ist nicht ungewöhnlich. 3-5 für ist jede eine von ihnen, though. Die CSS-Selektoren sollten logisch von einfach bis komplex gehen, da mehr Fälle hinzugefügt werden. So versucht, die Basis des Widgets finden, definiert einen Standard und Code Ihren Weg nach oben.
Die Code-Snippet selbst ist nicht zu schlecht, außer für die Aufnahme von zu vielen und zu langen Klassennamen. Umschreiben von unten nach oben, obwohl oft zu Optimierungen führen, esp. wenn die Anforderungen des Projektes seit dem letzten Entwickler geändert haben (Wir brauchen nicht IE6 mehr zu unterstützen, hurra!) Aber noch einmal, ohne die Struktur zu sehen, ist es schwer, endgültige Lösungen zu machen.
Wenn es nur für vier Tasten ist, würde ich die Seite nach oben in einem modernen Browser ziehen und einen Entwicklungs-Toolkit (Firebug in Firefox, Libelle in Opera, die WebKit-Entwickler-Tools in Safari / Chrome) verwenden Sie die Schaltflächen in Frage zu inspizieren sehen und was die effektiven Stile auf jeweils.
Vielleicht möchten Sie diesem Artikel ich nicht lesen zu lange zurück, es hat einen wirklich guten Überblick über die Vor-und Nachteile sind Ihre CSS zu organisieren. Ich würde auch einen Blick auf die Unterseite des Artikels nehmen es einige Links zu etwas mehr Informationen.
Von den Blicken von Dingen, die Ihre Widget Stile schienen ein wenig über Bord mit dem classitis zu gehen, aber zumindest seinen dokumentiert, kann ich nicht die zählt, wie oft ich nicht dokumentieren CSS-Klassen gesehen habe.
ich denke, dass Sie den Namen Ihres clases ändern müssen, ich sehe, dass Sie für fast alles „.apl_widget_label“ verwenden und das Element Styling auf die Wähler abhängig.
Beispiel:
/* 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 {
warum eine andere Klasse nicht namens „Mini-Display“ und dann wäre Ihr Element sein, wie:
<div class=".apl_widget_label mini-display">..</div>
und Ihre CSS wäre:
.mini-display{..}
Wenn Sie nicht wie es tun ... Ich habe einige Leute gesehen, die die Klassen wie diese
erstellt<div class="left margin-auto big red ...">..</div>
, wobei jede Klasse etwas Bestimmtes auf dem Element ändert (das heißt links => float: left;). Und sie haben wie eine Bibliothek von Klassen, dass sie immer verwenden.
