Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

Jak pisać czytelny CSS

  • 28.11.2010 12:16:12
  • CSS
  • 2

Dzisiaj przedstawię Wam moją konwencję kodowania w CSS. Ważne jest aby w arkuszach stylów panował porządek. Dzięki temu kod będzie się łatwiej edytowało, i co ważne, osoby które po nas będą edytować kod też nie będą miały problemów z dojściem o co tutaj chodzi.

Główną ideą tego artykułu jest przedstawienie Wam kilku praktycznych porad czy też wskazówek z których od jakiegoś czasu sam korzystam. Nie chcę nikogo na siłę przekonywać, że moje jest lepsze jak nie najlepsze. Mam też nadzieję, że w komentarzach podzielicie się swoimi nawykami, być może lepszymi niż te zawarte tutaj.

Kolejność stylów

Niby błacha rzecz, ale warto się tutaj na chwilę zatrzymać. Gdy przeglądałem różny kod (a było tego naprawdę dużo), to czasami nie wiedziałem czy mam się śmiać czy płakać. Burdel w kodzie niesamowity. Każdy styl był pod sobą (lub w jednej linii) i były ustawiane w kolejności przypadkowej. Np.

element {
   backgrond: #fff;
   text-align: right;
   float: left;
   position: absolute;
   padding: 10px;
   top: 10px;
   left: 20px;
   margin: 5px;
}

Wygląda to tak jakby ktoś patrzył na obrazek i myślał: "o grafik dał białe tło, tekst jest do prawej, element ma opływać, odstępy po 10 pikseli, itd.

Taki kod, wbrew pozorom, ciężko się czyta. Jest to oczywiście jedna z konwencji - random :).

Podział ze względu na typ własności. Tego typu kodowania jeszcze nie spotkałem i szczerze mówiąc, to nie stosowałem (z paroma wyjątkami). Jak łatwo się domyśleć chodzi w tej konwencji o sortowanie stylów ze względu na właściwości. Np. grupa odpowiedzialna za odstępy, pozycjonowanie elementów, tekst.

element {
   backgrond: #fff;
   position: absolute;
   top: 10px;
   left: 20px;
   margin: 5px;
   padding: 10px;
   font-size: 13px;
   color: #f00;
   text-align: right;
   float: left;
}

Jak dla mnie jest to jakiś porządek, ale szukanie odpowiedniej właściwości może być uciążliwe.

Kolejność alfabetyczna. Jak dla mnie jest to najlepsza opcja, bo narzuca odgórny porządek i szukanie odpowiednich stylów nie jest problemem.

element {
   backgrond: #fff;
   float: left;
   left: 20px;
   margin: 5px;
   padding: 10px;
   position: absolute;
   text-align: right;
   top: 10px;
}

Aha. Nie piszcie stylów w jednej linii, przynajmniej w środowisku developerskim, bo potem się pochlastacie w tym gąszczu linijek. Lepiej to zrobić już na produkcji.

Na koniec ostatnia rzecz, czyli podział stylów na konkretne bloki. Nie ukrywam, że najlepiej byłoby odwzorować kolejność pojawiania się elementów w CSS tak jak jest to w HTML. Czyli, jeżeli pierwszym elementem na stronie jest #top a ponim jest #navTop, to taka sama kolejność powinna być w CSS. Dzięki temu edycja czy też szukanie stylów jest dużo szybsze i prostsze. Dobrą opcją jest stworzyć blok ze stylami globalnymi, przed wszystkimi elementami z HTML.

Style globalne

O ile jest to możliwe, to warto stworzyć blok ze stylami globalnymi. Dzięki niemu można stworzyć definicje stylów dla wspólnych elementów (które często się powtarzają). Po co kopiować te same style x razy? Szkoda transferu :). Takimi elementami mogą być anchory, tabelki, listy czy nagłówki.

Jeżeli będziemu potrzebowali coś zmienić, to wystarczy nadpisać jedną lub kilka właściwości.

Kwestia selektorów i dobierania się do konkretnych elementów na stronie, to temat na oddzielny temat.

Autor wpisu

Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar cypherq

10.12.2010 cypherq

Iiiii tam. Myślałem o nieco bardziej rozbudowanym arcie. Coś o wcięciach, klamrach,
darmowych narzędziach do porządkowania kodu CSS. Np. http://www.cleancss.com/ czy csstidy na której tamtej serwis się opiera.

Gavatar Tomasz Kowalczyk

05.01.2011 Tomasz Kowalczyk

Ja, podobnie jak w kodzie PHP, stosuję lekko zmodyfikowany styl Whitesmitha. Grupowanie atrybutów względem ich kolejności alfabetycznej albo grupy znaczeniowej jest fajne, ale chyba nigdy jeszcze nie chciało mi się "aż tak" kombinować w projektach - zawsze wychodziła z tego co najmniej losowa lista.

Dodaj komentarz