Artykuły na każdy temat

[CSS] Standardy kodowania arkuszu stylu

Dodano 08.03.2010r. o 00:52
Jak wszyscy wiemy przy pisaniu aplikacji WWW bazujemy na standardach ustalonych wcześniej. Nie wiem czy wiecie ale praktycznie każdy z nas używa swoich lub wymuszonych standardów kodowania. Swoje stosujemy przede wszystkim gdy tworzymy stronę samodzielnie bez pomocy innych. Standardy wymuszone to nic innego jak reguły gry narzucone przez grupę, w której pracujemy. Często firmy produkujące strony internetowe mają swoje standardy jak pisać dane fragmenty kodu. Za chwilę zapoznam Was z moimi. Zanim jednak to zrobię chce jeszcze chwilkę pomówić o tym. Co nam dają z góry ustalone standardy? Otóż przede wszystkim to, że w momencie edycji wiemy dokładnie gdzie powinniśmy się spodziewać danego fragmentu kodu. Oto prosty przykład. Przypuśćmy, że ułożyliśmy na biurku książki w kolejności alfabetycznej od lewej do prawej. Następnie piękna koleżanka chciała z nami zagrać w prosta grę. Zasady gry są banalne. Ona mówi tytuł książki, a Twoim zdaniem jest jak najszybsze podanie ów książki koleżance. Proste prawda? Znając regułę, według której rozłożyliśmy książki z łatwością odnajdujemy to czego szukamy. Proszę sobie teraz wyobrazić co się dzieje gdy książki zostały ułożone losowo. W takim przypadku będziemy np. przeglądać tytuły od lewej do prawej. Właśnie dlatego powinniśmy stosować standardy kodowania. One pozwolą nam na szybsze znajdywanie elementów. W pracy grupowej zazwyczaj mamy z góry założone reguły gry dlatego też powinniśmy się do nich stosować. Takie działanie z pewnością zwiększy wydajność pracy grupy.

Style kodowania

Pierwszy typ

W swoim życiu spotkałem się z kilkoma rodzajami pisania stylów. Pierwszy z nich wygląda następująco:
Kod:
*
{
    margin: 0; 
    padding: 0;
}
body
{
    background: #FAF;
}
Powyższy styl jest bardzo czytelny lecz przy większych stronach pasek w edytorze może stać się maciupki. Przeszukiwanie i edytowanie CSS napisanego w ten sposób może stać się nie lada problemem.

Drugi typ

Ja nazywam to stylem pośrednim. Jest to coś pomiędzy typem pierwszym, a trzecim. Jest stanowczo wygodniejszy jeżeli chodzi o przeszukiwanie i edytowanie aniżeli pierwszy.
Kod:
*
{
    margin: 0; padding: 0; font-size: 14px;
}
body
{
    background: #FAF;
}

Trzeci typ

Trzeci rodzaj stylu przewiduje jedną linijkę na jeden bądź kilka elementów.
Kod:
* { margin: 0; padding: 0; font-size: 14px; }
body, p { background: #FAF; }
div { margin: 0 auto; width: 600px; background: #FFF; }
Ten styl jest prosty, przejrzysty (o ile zna się reguły pisania takiego stylu), łatwo w nim przeszukiwać i optymalnie jest dość szeroki. Szerokość w erze 21 calowych monitorów nie powinna powodować większych problemów, prawda? To nie to samo co kiedyś jak mięliśmy do dyspozycji rozdzielczość 800x600 Wink

Pamiętajmy, że tych styli jest o wiele więcej. Ja pokazałem tylko trzy, które musiał mi posłużyć jako przykład.

Detale

Cała sztuka polega na detalach dlatego też czasami warto być pedantem. Co mam na myśli? Po pierwsze zachowanie spacje przed { oraz wewnątrz nawiasów klamrowych. Naturalnie aby zaoszczędzić parę znaków możemy usunąć spacje oraz zbędny ; na końcu lecz taki kod powoli staje się nieczytelny. Gra nie warta świeczki w małych i średnich serwisach. W większych projektach można się pokusić o dwustronna konwersje stylu. To jednak temat na inny artykuł. Tak samo ludzie oszczędzają na znakach ' w miejscu definiowania adresu do tła obrazkowego. Moim zdaniem te dodatkowe dwa bajty jedynie dodają większa czytelność kodu.

Druga rzeczą na którą zwracam uwagę jest wielkość liter w podawaniu koloru. Zawsze podaję kolory z dużych liter jeżeli takowe występują w zapisie heksagonalnym. Oznacza to, że nie #f0f lecz #F0F.

Różnica miedzy class a id

Różnica jest bardzo prosta tzn. class stosować możemy wielokrotnie natomiast id tylko raz w całym dokumencie. Proszę pamiętać, że czasami tworzenie klasy jest zbędne i id wystarczy Wink

Optymalizacja

Pamiętajmy także, że czasami zdarza się spotkać kolor #FFAABB, który to można skrócić do zapisu #FAB. Jeżeli mamy taka możliwość to korzystajmy z niej.

Pamiętajcie także aby dokonywać modyfikacji pliku stylu tak ażeby wielkość jego była jak najmniejsza. Czasami nie warto łączyć stylów przy długich nazwach. Poniżej zaprezentuje prosty przykład.
Kod:
#bardzo_dluga_cecha_raz { color: #012; background: yellow; }
#bardzo_dluga_cecha_dwa { color: #345; background: yellow; }
Ten kod składa się z 122 znaków.

A teraz optymalizacja:
Kod:
#bardzo_dluga_cecha_raz, #bardzo_dluga_cecha_dwa { background: yellow; }
#bardzo_dluga_cecha_raz { color: #012; }
#bardzo_dluga_cecha_dwa { color: #345; }
Po optymalizacji mamy 156 znaki. Warto było?
Kod:
#a, #b { background: yellow; }
#a { color: #012; }
#b { color: #345; }
Teraz mamy 72 znaki i znowu pytanie brzmi czy warto było?

Zapis powyższego kodu bez optymalizacji:
Kod:
#a { color: #012; background: yellow; }
#b { color: #345; background: yellow; }
Odpowiedz na pytanie brzmi tak, warto było ponieważ gdybyśmy nie zoptymalizowali to powyższy kod miałby 80 znaków Wink Im krótsza nazwa tym lepiej. Niestety nie możemy kosztem czytelności kodu optymalizować. Pamiętajmy o tym.

Nazewnicwtwo

Bardzo ważne jest także nazewnictwo id oraz class. Ja np. często współpracuję z paroma grafikami z rożnych części globu, dlatego też wszelkie nazwy musza być po angielsku. Naturalnie nazwa musi odzwierciedlać obiekt, który opisujemy.

Powtarzanie właściwości

W momencie gdy nastąpi powtórzenie się jakiejś cechy lepiej jest zapisać ja dla kilku elementów. Miejscem w którym ja to robię jest napotkanie pierwszej deklaracji elementu w którym cecha się powtarza.

Kolejność cech

Najważniejsze w tej sztuce to wypracować i znać swoja kolejność używania argumentów. Poniżej zaprezentuje Wam swoja kolejność. Naturalnie na tej podstawie możecie stworzyć własny standard, który ułatwi Wam w przyszłości prace z Kaskadowymi Arkuszami Stylów.

Kolejność cech - lista

  1. margin
  2. padding
  3. float
  4. clear
  5. display
  6. width
  7. height
  8. line-height
  9. background
  10. ostylowanie tekstu
    1. color
    2. font-size
    3. font-weight
    4. font-family
    5. text-align
    6. text-decoration
    7. text-transform
    8. white-space
    9. text-indent
    10. text-shadow
    11. word-spacing
    12. letter-spacing
  11. ostylowanie obramowania (jeżeli mamy przypadek, w którym musimy przypisać rożne style dla poszczególnych elementów obramowania to kolejność jest następująca: top, right, bottom, left)

Przykładowy style.css używając mojego standardu

Kod:
* { margin: 0; padding: 0 }
img, img a { border: 0 }
body { background: #FDFDFD; font-size: 12px; font-family: "Trebuchet MS", Georgia, Times, "Times New Roman", Verdana, Geneva, Arial, Helvetica, serif, sans-serif }
#top { background: #8E0608 }
#top_frame { height: 105px; background: url('images/top.jpg') repeat-x }
#ie { padding: 0px 10px 5px 90px; background: #FFF url('images/warning.png') no-repeat 4px 0px }
#ie, #banner { border: 2px solid #EA080A }
.page_container { margin: 0 auto; width: 778px }
.page_container_space, #ie, #text, #text_main, #menu, #adds { margin-top: 10px }
#page_name, #page_description { float: left; width: 302px; color: #FFF }
#page_name { margin-top: 22px; height: 20px; line-height: 20px; font-size: 20px; font-weight: bold }
#page_description { height: 16px; line-height: 16px; font-size: 12px }
#banner { margin-top: 6px; float: right; width: 472px; }
#banner_frame { width: 468px; height: 60px; border: 2px solid #9B0707 }
#banner_frame img { float: left }
#top_line { margin-top: 6px; float: left; height: 25px; line-height: 25px }
#random_article { width: 560px; float: left; font-weight: bold }
#site_options { width: 218px; float: right }
#random_article a, #site_options a { color: #000; font-weight: normal }
#text { padding-right: 9px; width: 559px; float: left }
#text_main pre.code { width: 532px }
#text_main, dd a { color: #626B70 }
#text_main h1, #text_main h2, #text_main h3, #text_main h4, #text_main h5, #text_main h6 { border-bottom: #EEF1F2 solid 1px }
#menu { padding-left: 10px; float: right; width: 200px; background: url('images/menu_dotted.gif') repeat-y }
dd a { text-decoration: none }
dd a:hover { color: #A9A9A9 }
#footer { margin-top: 10px; float: left; border-top: #EEF1F2 solid 1px }
#footer_left { padding-left: 5px; float: left; width: 560px }
#footer_left a { color: #626B70; text-decoration: none }
#footer_left a:hover { text-decoration: underline }
#footer_right { width: 208px; padding-right: 5px; float: right }
#footer_right a { color: #626B70; font-weight: bold; text-decoration: none }
#adv { margin-bottom: 5px; float: left; width: 100% }
#adv a { text-decoration: underline }

Komentarze

Publikowane komentarze są prywatnymi opiniami użytkowników serwisu. Serwis nie ponosi odpowiedzialności za treść opinii. W trosce o zachowanie poziomu dyskusji wszystkie komentarze podlegają akceptacji przed ich publikacją dlatego proszę cierpliwie czekać aż komentarz zostanie opublikowany.

Irzinek

Dodano 20.09.2010r. o 21:26
Bardzo pouczające i przyda się bardzo Smile

CapaciousCore

Dodano 23.06.2010r. o 21:31
@Dealis otóż zapis #000000 i #000 jest jednakowo poprawny. Oba oznaczają to samo. Ten drugi jest po prostu krótszy.

Dealis

Dodano 23.06.2010r. o 21:25
"Jeżeli mamy taka możliwość to korzystajmy z niej. " - spróbuj tak zrobić, to validator od razu wyrzy... wywali Ci błąd... poprawnie jest #000000, a nie #000

komi92

Dodano 19.04.2010r. o 20:32
Bardzo fajnie się czytało;]

Na tyle, że postanowiłem również wypracować własną metodę kolejności w stylach. Przy poprawianiu kodowania na mojej stronie wykorzystam te rady z pewnością, pozdrawiam!:>

Dodaj komentarz

Zostaw komentarz jeżeli możesz! Nie bądź przysłowiowym botem! Nie bądź obojętny! Ciebie to nic nie kosztuje, a mi sprawi uśmiech na twarzy.
Zezwolono używać: BBCode
Zabroniono używać:
znaczników HTML

(Wymagany)

(Wymagany, niepublikowany)

(Nie wymagana)

Token:

Obrazek dla bota

(Przepisz tylko cyfry!)

(Wymagana)