Comment simplifier le code CSS
https://stackoverflow.com/questions/3610649
-
26-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je travaille avec une pièce existante de code CSS qui ressemble à ceci (extrait d'un corps beaucoup plus grand de 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;
}
Mon problème majeur avec c'est la complexité: chaque règle a sélecteurs 3-5 sur elle, ce qui rend vraiment difficile de comprendre la règle applicable. Il y a 25 règles ici pour le style quatre boutons avec le texte. Il ne peut pas être si difficile!
Un peu d'histoire: ces styles CSS un widget qui montre quatre images bitmaps, dont un est sélectionné, à partir d'une seule image bitmap en utilisant des sprites CSS. images non sélectionnées proviennent d'une ligne de la grande image bitmap et l'image dans l'état sélectionné provient d'une autre rangée. L'image sélectionnée est placée dans une boîte qui est plus large et plus haute que les boîtes d'images non sélectionnées.
Donc, il y a un programme qui va simplifier ce à quelque chose cognitivement facile à gérer? Y at-il un outil qui permet d'identifier les valeurs qui ne sont pas nécessaires, car ils sont remplacés par des sélecteurs plus spécifiques? les meilleures pratiques sont là pour faire face aux CSS de sorte que vous ne recevez pas les chemins inutilement sélectifs?
Mise à jour: 2010-08-31 12:25
Alors j'ai regardé dans moins comme une façon de conceptualiser le code CSS. Et parce que mon code n'est pas en moins, je levais les yeux css2less . Voici un extrait de ce css2less produit sur le code en question:
.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;
}
}
}
....
}
Alors, voici la chose: apl_widget_levelX sont en fait uniques. Je pense qu'un bon outil pourrait générer ceci:
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;
....
}
Des commentaires similaires pour les éléments sélectionnés / désélectionnés.
J'aime où les réponses vont, mais je suis à la recherche d'outils pour rendre ma vie plus facile. Le code complet CSS dans ce fichier est de 2500 lignes et toute la suite est 11000 lignes.
Mise à jour: 2010-09-01 09:50
est ce que je me suis tourné dans la main:
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;
}
Auparavant 175 lignes. Maintenant, 75 lignes. La plupart du code (40 lignes) Le spriting CSS.
Mise à jour 2010-09-01 11:30
HTML ressemble maintenant à:
<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 précédemment ressemblait à:
<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>
La solution
Basé sur le HTML affiché, je vous suggère les modifications suivantes:
Les classes intérieure apl_widget_label et apl_widget_value ne sont pas nécessaires et peuvent simplement remplacés par des éléments uniques (qui est unique dans le li). Cela peut rendre les sélecteurs légèrement plus long, mais beaucoup mieux structuré et plus facile à lire. De plus, le div autour du lien est inutile que le lien peut être directement style.
<ul class="apl_widget_content">
<li id="apl_widget_level1">
<div>Level </div><a href="#">1</a>
</li>
...
avec
.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;
}
Vous pouvez également déplacer les propriétés top, width et height dans les règles de niveau aux règles de 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;
}
Il serait génial si vous pouviez vous débarrasser des ID « niveau sélectionné » (ceux se terminant par s), mais je ne peux pas penser à une façon raisonnable qui soutient encore IE6.
Je vois juste que vous avez défini le li à display: inline tout en gardant les éléments de bloc insde eux. Vous devez être prudent avec cela, parce que, malgré son correcte technique CSS rendu exact est pas vraiment défini. Vous pouvez envisager display: inline-block ou float: left à la place.
Autres conseils
Les paragraphes qui suivent donnent des commentaires; Il est difficile de donner des réponses définitives aux questions comme celle-ci, esp. lorsque la structure HTML n'est pas disponible.
La première chose qui m'a vraiment été les longs noms classe . Quand vous avez tellement répétition dans le nom des classes, je pense que vous faites quelque chose de mal. Des noms tels que
.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img
Vraiment devrait être raccourci à (quelque chose comme):
.apl_widget .fourlevel .panel img
Surtout quand vos sélecteurs sont essentiellement 90% répétitif, comme
.apl_widget_level.apl_widget_level1
Il y a juste pas de point pour cela! En CSS, la cascade garantit l'héritage, afin d'ajouter un préfixe trop tous vos noms de classe est juste nécessaire. Certes, si vous avez obtenu au point de l'indexation vos noms de classe, il est temps de les échanger pour ids, comme
#level1
Il peut semble petit, mais il fait vraiment CSS plus maintenable si vous avez des sélecteurs qui sont compacts et moins répétitif - au moins vous ne serez pas dépenser si l'analyse beaucoup plus de temps par sélecteurs.
Si la structure HTML du widget est le même dans tout le code, alors vous pouvez réellement échanger quelques-unes des classes pour les éléments. Il sera bien sûr de réduire le style réutilisabilité, mais étant donné que les widgets sont souvent ne partagent pas la même structure et la conception que le reste de la page, il devrait être possible pour les styles de widgets plus simples à lésiner sur les classes. Selectors comme (par exemple)
.profile img
serait certainement mieux que de simplement donner cette img une classe - ses deux immédiatement évident ce que vous faites, et facile à entretenir en même temps.
Quelque chose d'autre que vous pouvez faire est de Code uniquement pour des cas particuliers , comme ce cas très simplifié
a {
color: white;
background: #666;
text-decoration: none;
}
a.special {
color: #B8E9FF;
}
a.brilliant {
color: #FFAFAF;
}
En outre, supprimer les redoublements qui reste le même dans chaque cas. Encore une fois, utilisez la Cascade à son plein potentiel.
3-5 sélecteurs max est pas rare. 3-5 pour tous un d'eux est, cependant. Les sélecteurs CSS devraient logiquement aller du simple au complexe, comme plus de cas sont ajoutés. Ainsi, essayez de trouver la base du widget, définir une valeur par défaut, et le code de votre chemin.
L'extrait de code lui-même est pas aussi mauvais sauf pour l'inclusion des noms de classe trop et trop long. Réécriture de bas en haut mais peut souvent conduire à des optimisations, esp. si les exigences du projet a changé depuis le dernier développeur (Nous ne devons soutenir IE6, hourra!) Mais encore une fois, sans voir la structure, il est difficile de faire des solutions définitives.
Si c'est juste pour quatre boutons, je tire la page dans un navigateur moderne et utilise une boîte à outils de développement (Firebug dans Firefox, Libellule dans Opera, les outils de développement de WebKit dans Safari / Chrome) pour contrôler les boutons en question et voir ce que les styles sont efficaces sur chacun.
Vous pouvez aller sur cet article Je lis pas trop longtemps en arrière, il a une très bonne vue d'ensemble les avantages et les inconvénients de l'organisation de votre css. Je prendrais aussi un coup d'oeil au bas de l'article, il a des liens vers quelques informations supplémentaires.
De l'apparence des choses que vos styles de widget ne semblent aller un peu trop loin avec le classitis, mais au moins son documenté, je ne peux pas compter le nombre de fois où je l'ai vu classes CSS en situation irrégulière.
Je pense que vous avez besoin de changer le nom de votre clases, je vois que vous utilisez « .apl_widget_label » pour presque tout et le style de l'élément en fonction des sélecteurs.
par exemple:
/* 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 {
Pourquoi ne pas créer une autre classe appelée « mini-écran », puis votre élément serait comme:
<div class=".apl_widget_label mini-display">..</div>
et votre css serait:
.mini-display{..}
si vous ne l'aimez pas ... Je l'ai vu certaines personnes qui crée les classes comme celui-ci
<div class="left margin-auto big red ...">..</div>
où chaque classe change quelque chose de spécifique sur l'élément (i.e. gauche => float: left;). Et ils ont comme une bibliothèque de classes qu'ils utilisent toujours.
