chevron-left chevron-right

[CSS] Jak poprawnie pisać style?

Zamierzam Wam zaprezentować kilka porad dotyczących arkuszy styli o których warto pamiętać. Korzystanie z nich na pewno na początku może się okazac uciążliwe, ale z biegiem czasu te sposoby są po prostu maxymalnie użyteczne.

Więc zaczynamy:

      Zawsze resetuj domyślne ustawienia przeglądarek:

      html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
   margin: 0;
   padding: 0;
}

      Dzięki temu można uniknąc dziwnych niespodzianek ze strony różnych przeglądarek.

      Staraj się układać opcje stylu CSS alfabetycznie, czyli zamiast:

      div#header h1 {
   z-index: 101;
   color: #000;
   position: relative;
   line-height: 24px;
   margin-right: 48px;
   border-bottom: 1px solid #dedede;
   font-size: 18px;
}

      Korzystaj z takiego rozwiązania:

      div#header h1 {
   border-bottom: 1px solid #dedede;
   color: #000;
   font-size: 18px;
   line-height: 24px;
   margin-right: 48px;
   position: relative;
   z-index: 101;
}

      Dzięki temu od razu widać, gdzie co jest w kodzie.

      Organizuj swój kod CSS:

       /*****Reset*****/
Tutaj usuwamy marginesy.
 
/*****Podstawowe style*****/
Definiujemy podstawowe style: body, h1-h6, ul, ol, a, p, itd. 
 
/*****Style dla szablonu*****/
Zdefiniuj podstawowe elementy szablonu: header, footer, itd.
 
/*****Header*****/
Tutaj możesz zdefiniować wszystkie style dla elementu header.
 
/*****Content*****/
Tutaj zdefiniuj style dla treści strony.
 
/*****Footer*****/
Tutaj z kolei możesz zdefiniować style dla stopki strony. 
 
/*****Itd*****/
I tak kolejno grupuj style dla strony, dla każdego elementu.

      Dzięki temu można uniknąc balaganu na stronie.

      Stosuj jeden styl pisania kodu, unikaj mieszania styli kodowania:

      div#header { float: left; width: 100%; }
div#header div.column {
    border-right: 1px solid #ccc;
    float: rightright;
    margin-right: 50px;
    padding: 10px;
    width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }

      Taki styl pisania jest zły. Należy stosować jeden z nich dla czytelności kodu.

Myślę, że te kilka porad pomoże Wam efektywnie pisać kod dla arkuszy styli CSS