Interesuje mnie Wasze stanowisko co uważacie za poprawny kod CSS. Poniżej zamieściłem kilka moich propozycji, ale liczę na Wasze uwagi.
1. Klasa powinna opisywać elementy identyczne, lub przynajmniej podobne wizualnie. Niedopuszczalne jest stosowanie jednej klasy do elemntów o np takiej samej funkcji, ale zupełnie różnym wyglądzie.
Przykład z życia
W sklepie internetowym są przyciski "Do koszyka". Na stronie głównej produkty przedstawione są w szczególny sposób, który nie powtarza się na żadnej z pozostałych podstron. W produktach na głównej przyciski te są kwadratmi w formie ikony, a na pozostałych stronach jako podłużny przycisk z napisem i ikoną. Fizycznie jest możliwe zastosowanie dla nich jednej klasy i zróźnicować ich formatowanie wykorzystując element otaczający (np #mainPage .add i #anyPage .add), ale spowoduje to zagmatwanie kodu. Mimo identycznej funkcji jaką pełnią nie można stosować dla nich jednej klasy.
W tym przypadku powinny one być opisane dwoma różnymi klasami, np: .mainAdd i .add).
2. Formatowanie elementów nie powinno się nadpisywać w kolejnych wpisach. Jest to błąd często popełniany przez leniwych webmasterów, który powoduje straszne problemy w diagnozowaniu błędów i wprowadzaniu poprawek.
Zamiast nadpisywania należy wyciągać część wspólną, a różnice formatować w odpowiednich, osobnych wpisach.
Zamiast
Kod
.exmaple {width: 100px;color:white;}
...
div.exmaple {with: 123px;color:white;}
...
#query .example{with: 30%;color:white;}
...
div.exmaple {with: 123px;color:white;}
...
#query .example{with: 30%;color:white;}
Powinno być:
Kod
.exmaple {color:white;}
#supExple .exmaple {width: 100px;}
...
div.exmaple {with: 123px;}
...
#query .example{with: 30%;}
#supExple .exmaple {width: 100px;}
...
div.exmaple {with: 123px;}
...
#query .example{with: 30%;}
3. Formatowanie elementu w kilku miejscach w kodzie, co łączy się przeważnie z łączeniem formatowania kilku elementów. Jest to bardzo poważny błąd, niestety często popełniany. Jeśli tego unikniemy, wprowadzenie zmiany w jednym z elementów nie będzie powodowało rozjeżdżania się innych.
Zamiast:
Kod
.exmaple1, .example2 {width: 100px;}
...
exmaple1 {color:white;}
...
.example2, .example3{color:red;}
...
exmaple1 {color:white;}
...
.example2, .example3{color:red;}
Powinno być:
Kod
.exmaple1 {width: 100px;color:white;}
...
.exmaple12 {width: 100px;color:red;}
...
.example3{color:red;}
...
.exmaple12 {width: 100px;color:red;}
...
.example3{color:red;}
4. Kod w plikach CSS musi być podzielony w logiczne bloki.
Jeśli cały CSS jest w jednym pliku, to powinien zaczynać się od najogólniejszych elemntów jak: body, table, p, a.
W innym pliku, lub poniżej powinny się znaleźć np: form, input, .button
Następnie elementy opisujące układ strony, np: .top, .left, .main
A dalej cała reszta w blokach takich jak np: /* GALLERY */ ... /* PRODUCTS */
Niestety spotykałem się już z przykładami CSS, które pisane są kompletnie bez bloków i w taki sposób, że każde dodawane formatowanie wstawiane było na końcu aktualnego pliku. Skakanie po takim CSS nie jest przyjemne.
5. Komentarze, komentarze, komentarze. Chyba można zaryzykować twierdzenie, że im więcej tym lepiej.
Pod warunkiem oczywiście, że będą sensowne.
6. Często spotykam się z resetowaniem elementów. Jak wiadomo każda przeglądarka inaczej formatuje dużą część standardowych elementów HTML. Czasem są to niuansy, ale czasem różnice są ogromne. Dlatego wiele osób stosuje coś podobnego:
Kod
body,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{
margin: 0;
padding: 0;
border: 0;
}
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{
margin: 0;
padding: 0;
border: 0;
}
7. Osobne formatowanie dla IE. Nie powinno się tego robić, ale robi i robić będzie dopóki nie znikną IE6 i IE7. Life is brutal
8. Dublowanie stylowania nie jest poważnym błędem, ale powoduje spadek czytelności kodu, przyrost śmieci i więcej pracy przy wprowadzaniu zmian.
Zamiast:
Kod
.link {color:red;font-weight:bold;}
.link:hover {color:blue;font-weight:bold;}
.someEle {background: url(images/someimg.gif) 1em 50% no-repeat;}
div.someEle {background: url(images/OTHERimg.gif) 1em 50% no-repeat;}
.link:hover {color:blue;font-weight:bold;}
.someEle {background: url(images/someimg.gif) 1em 50% no-repeat;}
div.someEle {background: url(images/OTHERimg.gif) 1em 50% no-repeat;}
Należy zapisać:
Kod
.link {color:red;font-weight:bold;}
.link:hover {color:blue;}
.someEle {background: url(images/[i]some[/i].gif) 1em 50% no-repeat;}
div.someEle {background-image: url(images/[i]other[/i].gif);}
.link:hover {color:blue;}
.someEle {background: url(images/[i]some[/i].gif) 1em 50% no-repeat;}
div.someEle {background-image: url(images/[i]other[/i].gif);}