Aber wenn man jemandem rechenschaftspflichtig ist, hat man nach seinen Anforderungen zu arbeiten.
Ob das dann wirtschaftlich ist eine ganz andere Frage.
Man sollte lieber auf die Thematik zurück kommen.
Use efficient CSS selectors
Code:
ul.menu, ul.menu ul { list-style-type:none; margin: 0; padding: 0; width: 15em; } ul.menu a { display: block; text-decoration: none; } ul.menu li { margin-top: 1px; } ul.menu li a { background: #333; color: #fff; padding: 0.5em; } ul.menu li a:hover { background: #000; } ul.menu li ul li a { background: #ccc; color: #000; padding-left: 20px; } ul.menu li ul li a:hover { background: #aaa; border-left: 5px #000 solid; padding-left: 15px; }
Diese CSS hat zwei Nachteile
1. schwer lesbar
2. extrem schlechte Effizienz
Eine Umsetzung nach den "Use efficient CSS selectors" - Regeln sieht so aus:
Code:
.menu{list-style-type:none;margin:0;padding:0;width:220px;} .menu a{display:block;text-decoration:none;list-style-type:none;} .menu-li{margin-top:1px;list-style-type:none;} .menu-li-ul-li{margin-top:1px;list-style-type:none;} .menu-li a{background:#9cc6ee;color:#000;padding:.75em;} .menu-li a:hover{background:#fff;color:#a9121c;} .menu-li-ul-li a{background:#d5f1fc;color:#000;padding-left:15px;} .menu-li-ul-li a:hover{background:#fff;border-left:5px #a9121c solid;padding-left:15px;}
Solche verschachtelten Selektoren findet man eigentlich überall - da sollte man sich ran setzen und das zu einfachen Klassen machen - es wirkt.
Kommentar