search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[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

Komentowanie jest zablokowane

Brak komentarzy