Możemy wyróżnić trzy sposoby pisania deklaracji CSS (a konkretnie segregowania właściwości). Pierwszy sposób zakłada grupowanie par właściwość-wartość na zasadzie ich ważności. Drugi opiera się o segregacji alfabetycznej, trzeci zaś to mówiąc krótko sposób opierający się o brak sposobu… Który z nich jest najlepszy?
Zacznijmy może od końca i przyjrzyjmy się sposobowi polegającemu na braku sposobu:
1. Pisanie deklaracji CSS bez sposobu
Jak łatwo sobie wyobrazić deklarację w CSS można napisać w oparciu o zasadę 'co nam ślina na język przyniesie’. Taka deklaracja będzie wyglądała tak:
1 2 3 4 5 6 7 8 | .deklaracja { background:red; display:inline-block; margin:10px; border:1px solid black; color:blue; padding:10px; } |
W tak napisanej deklaracji ciężko się odnaleźć, nie ma żadnej myśli przewodniej, która była by spójna dla całego arkusza stylów i każdorazowe szukanie określnej właściwości to konieczność przeczytania całej deklaracji.
Przy dużych arkuszach takie deklaracje są nie tylko mało praktyczne, ale wręcz uciążliwe bo uniemożliwiają szybkie odnajdywanie się w wielolinijkowych deklaracjach. Z tego powodu nie warto być leniem i należy zacząć porządkować kod.
2. Pisanie deklaracji z podziałem alfabetycznym
W tym wypadku deklaracja powinna wyglądać tak:
1 2 3 4 5 6 7 8 | .deklaracja { background:red; color:blue; display:block; font-size:1em; line-height:1; margin:5px 10px 10px; } |
Jak łatwo się domyślić cały sens takie podziału polega na segregowaniu part właściwość-wartość alfabetycznie. Uważam, że takie podejście ma sens o tyle, że jest jakąś formą uporządkowania naszego arkusza, ale osobiście wolę rozwiązanie, które przedstawię za chwilę.
Plusem rozwiązania alfabetycznego jest to, że rzeczywiście łatwo odnaleźć poszczególne właściwości w deklaracji. Dzięki temu systematyka arkusza stylów staje się łatwa do przyswojenia.
3. Segregacja oparta o ważność właściwości
Trzecim sposobem segregowania właściwości w deklaracji jest sposób oparty o 'wagę’ właściwości. Zacznijmy od przykładu:
1 2 3 4 5 6 7 8 9 10 11 12 13 | .deklaracja { position:absolute; top:10px; left:10px; display:block; width:100px; height:200px; padding:10px; margin:10px; background:navy; border:none; color:red; } |
W tym wypadku uznajemy, iż pewne właściwości są ważniejsze od innych. Dlatego zaczynamy od pozycji elementu w dokumencie, która jest najważniejsza bo decyduje o stosunku elementu do innych elementów. Oczywiście jeśli zachowujemy domyślną position:static; nie ma większego sensu tego deklarować. Dopiero jeśli pojawi się inna pozycja niż statyczna lub float – wtedy powinniśmy umieścić je na początku deklaracji.
Następnie wymieniamy właściwości związane z box-model’em, które definiują nam wymiary elementu. Jeśli sam box-model definiujemy w danej deklaracji to najlepiej było by zamieścić odopowiednią właściwość na początku tej 'sekcji’ deklaracji.
W dalszej kolejności wymieniamy inne 'sekcje’ właściwości. Tutaj panuje już większa swoboda ponieważ inne właściwości z punktu widzenia konstrukcyjnego nie są tak istotne, więc możemy sobie dobrać kolejność bardziej dowolnie.
A Wy jak segregujecie właściwości w deklaracjach?
Tagi: arkusze stylów • CSS3 • dobre praktyki • front end
ja preferuję opcję 3 ;]
Ja tam lubię jak jest chaotycznie, nie chce mi się tracić czasu na porządkowanie. Niestety moja koleżanka z pracy musi mieć wszystko alfabetycznie. Na szczęście jest klawisz f5 ;)
>W tak napisanej deklaracji ciężko się odnaleźć
Czy ja wiem? To zależy od tego, kto ten styl napisał. Jeśli to jest mój styl, to bez problemu jestem w stanie znaleźć to, czego szukam ;)
Jak dla mnie problem ułożenia CSS sprowadza się do wewnętrznych standardów kodowania danej organizacji. Jeśli się na mnie nic nie wymusza, piszę kod intuicyjnie.
Uważam równocześnie, że sposób alfabetyczny jest najgorszy. Nie umiałbym się w tym odnaleźć. Mimo wszystko pozycjonowanie zawsze się u mnie znajduje bardziej na górze, a tu byłoby w rejonach dolnych. No i taki podział wydaje się równocześnie zbyt sztywny (no alfabetu zmienić się nie da ;)) i zbyt chaotyczny (często obok siebie znajdą się całkowicie niezwiązane ze sobą cechy). Ja sobie często oddzielam poszczególne „kategorie” po prostu enterem – na produkcję i tak trafi cholernie zoptymalizowana wersja, przepuszczona przez takie monstra, jak choćby CSSO.
Jak dla mnie sposób alfabetyczny jest ok o tyle, że pozwala na jakąś segregację właściwości a moim zdaniem to ważne. Osobiście jednak wole sposób trzeci, czyli ten związany z podzieleniem właściwości według ich 'ważności’ – te związane z konstrukcją przodem.
Korzystałem intensywnie ze sposobu alfabetycznego. Odnalezienie się w tym jest proste, wystarczy znać alfabet i od razu wiadomo jak szukać. Problem z alfabetycznym sortowaniem polega na tym, że np. width i height rzadko występują obok siebie. (No ale patrząc prawdzie w oczy – nie edytujemy tych samych styli 10 razy jak wiemy co robimy) Pisanie posortowanych właściwości może wydać się komuś utrudnieniem, a np. Sublime po wciśnięciu F9 posortuje style. Nie trzeba myśleć o alfabecie pisząc. Segregacja oparta o ważność właściwości jak to ładnie zostało napisane jest prze zemnie wykorzystywana gdy widzę jakiś sens takiego podziału – zazwyczaj gdy właściwości jest mniej niż 5 (tak na oko). Powyżej 5 wciskam F9 (mixin-y zawsze na górze). Nie wykluczam CSScomb, ale nie dajmy się zwariować ;P
Przykład + wszystkie taski używane prze zemnie do CSS na github, jeżeli ktoś jest zainteresowany to: https://github.com/MichalRazorZalecki/mrz-boilerplate
Alfabetyczny raczej dla mnie odpada. Nie chciałbym żeby top: X; było na dole deklaracji a bottom: X; na samej górze – odnalezienie się w tym byłoby nie lada wyzwaniem :-)
Jak dla mnie alfabetyczny styl jest ok, tylko w moim przypadku jest on nieco… „zmodyfikowany”. Pozycje, o których wspominasz staram się przenieść zawsze na koniec, dzięki czemu na samym dole mam typ pozycji oraz ich atrybuty, a powyżej posegregowane w kolejności alfabetycznej pozostałe właściwości.
I tak w większości przypadków to kwestia przyzwyczajenia.
Dzielę sobie całą deklaracje na kilka cześci ze względu na to czy modyfikują pozycje, wygląd czy jeszcze jakąś inną pierdółke i oddzielam je wolną linią. Wewnątrz tych mniejszych części panuje chaos ale zwykle te części są na tyle małe, że w ogóle to nie przeszkadza
Mnie zdecydowanie nie odpowiada sposób alfabetyczny. Według mnie najbardziej praktycznym sposobem jest dzielenie „tematyczne”. Zaczynam od wielkości, pozycji, marginesów itp, potem właściwości związane z prezentacją takie jak kolor, a na koniec różne egzotyczne właściwości nie pasujące do wyżej wymienionych. Chociaż tak naprawdę, wszystko kwestia gustu i przyzwyczajeń. Warto jednak zorganizować to tak, żeby pracować jak najefektywniej.
[…] Jak pisać deklaracje CSS? Czyli o kolejności właściwości. […]
Zdecydowanie wole podział na typologie właściwości z nutą sposobu nr 3.. wymiary i położenie, marginesy i odstępy, kolorystyka, fonty itd… :)
Trochę to porządkowanie alfabetyczne traci sens w momencie, kiedy robisz inlinecss. Wtedy Zbadaj element w przeglądarce plus CTRL+F w edytorze.