Forum PHP.pl > czytelny kod css

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

y3ti

12.11.2005, 20:26:40

Witajcie,

Od dawna juz dreczy mnie takie pytanie: jaki jest dobry "styl" kodowania css.
Chodzi mi teraz o czytelne pisanie kodu css. Jak go formatowac? Jak powinno
sie robic wciecia? Czy jakos sortowac selektory i wlasciwosci?

Jak zauwazylem ogladajac rozne strony, kazdy koduje jak mu sie podoba.
Jedni pisza

Kod

#menu { font-size: 12px; padding: 5px; background-color: #E0E0E0; border: 1px #C0C0C0 solid; margin: 0; float: left; width: 500px; list-style: none }

Inni robia wciecie i ukladaja wlasciwosci alfabetycznie:

Kod

#menu {
   background-color: #E0E0E0;
   border: 1px #C0C0C0 solid;
   float: left;
   font-size: 12px;
   list-style: none;
   margin: 0;
   padding: 5px;
   width: 200px;
}

Jeszcze inni aby kod byl czytelny, dokladaja (zbedna) nazwe elementu xHTML ul

Kod

ul#menu {
   background-color: #E0E0E0;
   border: 1px #C0C0C0 solid;
   float: left;
   font-size: 12px;
   list-style: none;
   margin: 0;
   padding: 5px;
   width: 200px;
}

Jeszcze inni dziela wlasciwosci na "rodzaje" (wyglad, pozycjonowanie itp.)

Kod

ul#menu {
   background-color: #E0E0E0;
   border: 1px #C0C0C0 solid;
   font-size: 12px;
   list-style: none;

   float: left;
   margin: 0;
   padding: 5px;
   width: 200px;
}

Niektorzy uzywaja komentarzy, inni nie. Sa tez tacy co sortuja alafabetycznie tez selektory tj.:

Kod

a {
....
}

body {
....
}

p {
....
}

div#container {
....
}

div#footer {
....
}

div#left {
....
}

.error {
....
}

.books {
....
}

Pytanie moze troszke abstakcyjne, jednak dla mnie nie. W php tez jest "ladny styl" pisania. To samo jest w SQL,
w C/C++ ....

Czy jakis dokument opisujacy dobry styl kodowania CSS?

12.11.2005, 22:33:19

hm, osobiscie pisze w jednej linii + komentarze, komentarze... staram sie takze dzielic na miejsce gdzie zostal uzyty styl.. np. po lewej stronie, prawej, na gorze... ostatnio tez coraz bardziej sie sklaniam do robienia podzialu na tpl gdzie zostal uzyty dany styl lub w nazwie to okreslam ( jesli styl zadko sie pojawia na stronie )

.johnny

13.11.2005, 00:45:27

Ja zwykle piszę w jednej linii, gdybym robił wcięcia, arkusz miałby kilometry długości.
Dodawanie nazwy elementu, jak np. ul#menu w niektórych sytuacjach ma sens i poprawia czytelność arkusza.
Komentarzy używam zwykle do rozdzielenia "sekcji" arkusza, czyli np. "layout" (zwykle głowne elementry strony, które zazwyczaj floatuję), "ogólne" (a, cite, p itp.), "ramka" (jeżeli na danej stronie sa jakieś bloczki) itp. Rzecz jest oczywiście umowna, ja tak robię z przyzwyczajenia.

Mam też zwyczaj, że poszczególne własności zapisuję w mniej więcej tej samej, wypracowanej samemu kolejności:

Kod

el { display:; float:; width:; height:; margin:; padding:; background:; border:; font... text etc. }

Dzięki temu zazwyczaj nie tracę czasu na przeszukiwanie każdej regułki z osobna.

Z drugiej jednak strony nie uważam swoich arkuszy za szczyt czytelności, być może ktoś osiągnął coś więcej w tej dziedzinie...

Uważam tez jednak, że CSS jako dane pobierane przez klienta powinien być pisany możliwie zwięźle. Dlatego np. pisanie "rozwlekłe" może dodać całkeim sporo balastu - np. 25 regułek po 5 własności razy 2 zbędne bajty w linii (\n i \t) = 250 bajtów, a to juz coś jest (np. ~10% 2-kilowego pliku). Jeszcze więcej wyjdzie, jak ktoś zapisuje nowe linie poprzez \r\n i robi takie fajne i przez wszystkich uwielbiane wcięcia za pomocą 4 spacji.

Ten problem rzecz jasna nie dotyczy wspomnianych języków takich jak php, SQL czy C, stąd większa jest w nich swoboda wyboru stylu kodowania.

dr_bonzo

13.11.2005, 10:58:06

Ja ukladam selektory hiearchicznie (wg. XHTMLa)

Kod

div.main
    div.title
        a.topMenu
    div.body
// itd.

Kazda wlasciwosc w osobnej linijce, pogrupowana z innymi opisujacymi: text, obramowania, itd.

Dodatkowo stosuje Wspaniale-Uwielbiane-Przez-Wszystkich-Czterospacjowe-Wciecia.

Kod css jak kadzy inny kod musi byc czytelny i latwy w utrzymywaniu wiec z tym sie nie zgodze:

Cytat

Z drugiej jednak strony nie uważam swoich arkuszy za szczyt czytelności, być może ktoś osiągnął coś więcej w tej dziedzinie...

Uważam tez jednak, że CSS jako dane pobierane przez klienta powinien być pisany możliwie zwięźle.

Jak chcesz zmiejszyc objetosc cssa to skonwertuj "czytelnego" cssa to minimum.

Cytat

(np. ~10% 2-kilowego pliku).

jesli strona ma 50kB to te 250 bajtow to jest NIC, szczegolnie ze arkusz styli jest pobierany tylko raz na wizyte(wlaczenie przegladarki).

.johnny

13.11.2005, 13:08:35

Cytat(dr_bonzo @ 2005-11-13 11:58:06)

jesli strona ma 50kB to te 250 bajtow to jest NIC, szczegolnie ze arkusz styli jest pobierany tylko raz na wizyte(wlaczenie przegladarki).

Hmm, może i tak.
Z drugiej strony, o ile się nie mylę, CSS pobierany jest przed wyświetleniem czegokolwiek (bo jest w <head />), dlatego jego wielkość jest bardziej odczuwalna dla odwiedzającego.

Cytat(dr_bonzo @ 2005-11-13 11:58:06)

Jak chcesz zmiejszyc objetosc cssa to skonwertuj "czytelnego" cssa to minimum.

Tego robić nie zamierzam - swoje rozwiązanie uważam za kompromis między czytelnością a wielkością pliku.

Natomiast pomysł z wcięciami wg hierarchii jest ciekawy - przetestuję.

dr_bonzo

13.11.2005, 13:20:18

Cytat

Z drugiej strony, o ile się nie mylę, CSS pobierany jest przed wyświetleniem czegokolwiek (bo jest w <head />), dlatego jego wielkość jest bardziej odczuwalna dla odwiedzającego.

Nie wiem jak to jest na prawde -- ale czasami na operze i na niektorych stronach css laduje sie z opoznieniem, co skutkuje pojawieniem sie strony bez zastosowanych styli, a gdy styl sie juz doladuje to wszystko jest ok.

ghostrider

13.11.2005, 13:43:28

ja mam troche inna metode

trzymam deklaracje dla koloru, fontów, pozycjonowania w odzielnych plikach
np:
master_fonts.css
master_color.css
master_position.css
potem @importuje w
import_final.css

ta technika nie jest optymalna jesli chodzi o wielkosci plików, wiecej jest do d....
ale prawdza się przy "czytelnosci", wypracowałem ja już dawno temu i doceniłem kiedy w zwiazku ze śmiercią JP II przerabiałem 7 serwisów na czarno-szaro-białe, poszło szybciutko.
druga rzecz która robie to usuwanie "white-spaces" po stworzeniu pliku, czyli staram sie aby wszystko było w jednej lini, oczywiście mam "robocze" wersje plików które formatuje tak zeby było mi je wygodnie czytać.

revyag

15.11.2005, 10:27:09

Robię podobnie jak dr_bonzo. Trzymam wszystko w jednym pliku, jedyny podział jaki mam, to tylko wtedy gdy któraś podstrona musi mieć wersję do druku.
Poza tym przy tworzeniu styli, według mnie ogromnym ułatwieniem jest programik TopStyle
Pokazuje całą hierarchię styli i dzięki temu łatwo jest nawigować po pliku. No i ma kolorowanie kodu(eclipsowate), uzupełnianie składni, automatyczne robienie wcięć

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.