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
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
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 
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
- margin
- padding
- float
- clear
- display
- width
- height
- line-height
- background
- ostylowanie tekstu
- color
- font-size
- font-weight
- font-family
- text-align
- text-decoration
- text-transform
- white-space
- text-indent
- text-shadow
- word-spacing
- letter-spacing
- 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.
Dodaj komentarz
Zezwolono używać:
BBCode
Zabroniono używać:
znaczników HTML
Irzinek