GoldenLine
Zaloguj się
Łukasz Kliś

Łukasz Kliś Fullstack Engineer @
Luko

Temat: Sortowanie właściwości w CSS

Dotychczas większość kodu CSS, która była pisana na potrzeby stron wizytówek była pisana na zasadzie "o czym pamiętam to klepię", bez zachowania jakiejkolwiek konwencji, co do kolejności wypisywania właściwości CSS.

Ostatnio jednak uznałem, że warto coś takiego wprowadzić, w Internecie czytałem o kilku wariantach, które stosowano, m.in. alfabetycznie, według ilości znaków w linii, etc. Na forum SitePointa natknąłem się kiedyś na posta, w którym przedstawiono pewien sposób sortowania właściwości w plikach CSS, dzięki czemu jest się w stanie utrzymać pewnego rodzaju porządek.

I tutaj pytanie do Was - czy u Was w firmach stosuje się coś podobnego, czy to, jak koder wklepuje kod nikogo nie interesuje?

PS. Mam nadzieję, że podobny temat się nie pojawił - jeżeli tak, to przepraszam.Łukasz Kliś edytował(a) ten post dnia 31.03.11 o godzinie 23:16Łukasz Kliś edytował(a) ten post dnia 02.04.11 o godzinie 10:47
Link do wypowiedziLink
Tomasz Prichacz

Tomasz Prichacz procesy i
technologie
@TEACHERSteam

Temat: Sortowanie właściwości w CSS

Ciężko to nazwać porządkiem. Ale zwyczajnie lecę w takiej kolejności, jak są ułożone elementy na stronie od góry do dołu. Mając jeden plik styli mniej więcej mogę szybko przeskoczyć do danej zawartości, wiedząc na jakiej "wysokości" strony się znajduje...

Ale też chętnie poznam inne "techniki" porządkowania css :)
Link do wypowiedziLink

konto usunięte

Temat: Sortowanie właściwości w CSS

Porządek w css zależy od tego jak komu wygodniej się pisze, najczęściej tak jak kolega wyżej pisze sie jak leci po kolei.

Jednak jest kilka ale, jak sie zaczyna kodować to już na start warto mieć przygotowany zestaw plików w których istnieje już kod bo bez sensu za każdym razem klepać <html></html> itp...

W moim przypadku idę krok dalej, mam przegotowaną "bibliotekę" klas.


.left{float:left;}

.absolut{position:absolute;}


i one znajduję się na początku css a jeszcze wyżej jest body i inne znaczniki typu h1, p itp..

Ale jest jedno ale.


p{color:#000;}

p{color:#fff;}


Jakiego koloru będzie paragraf ??

I to jest jedyna chyba istniejąca reguła jeżeli chodzi o kolejność pisania css.
Link do wypowiedziLink

konto usunięte

Temat: Sortowanie właściwości w CSS

Michał Szaniewski:
W moim przypadku idę krok dalej, mam przegotowaną "bibliotekę" klas.


.left{float:left;}

.absolut{position:absolute;}

Takie nazewnictwo klas CSS kłóci się trochę z rozdzieleniem wyglądu od treści. W html masz wtedy informacje o tym, gdzie co i jak ma być poukładane. Ja zwykle nazywam klasy tak, aby wiedzieć czego dotyczą, a niekoniecznie co robią. Nie twierdzę, że to źle, tylko dorzucam swoje 3 grosze ;)
Link do wypowiedziLink

konto usunięte

Temat: Sortowanie właściwości w CSS

Ja jestem zdecydowanie za porządkowaniem właściwości css.
Nigdy nie trafiłem na wspomniany tu post, jednak kolejność, którą stosuję prywatnie, jest bardzo zbliżona do tam podanej.
"Swoją" kolejność stworzyłem wg mniej więcej takiego schematu:

- na początek właściwości elementu, które mają wpływ także na otaczające go elementy (display, wymiary, floaty, pozycje, overflow)
- potem dopiero właściwości dotyczące samego elementu, jego "wnętrza" (fonty, wysokości linii, kolory, tła itp)

Co do klas typu .left .right itp... oddzielenie funkcji od wyglądu jest oczywiście spoko, ale IMHO można zachowując umiar pogodzić oba podejścia.

Weźmy sytuację, w której korzystamy np ze sprite'a, mamy w nim tonę małych obrazków, ma go ustawione jako tło 100 elementów html. Zamiast umieszczać w pliku css 100 odwołań do jednego pliku z grafiką lub przypisywać to tło do 30 selektorów oddzielonych przecinkami (powiedzmy, że udało się ograniczyć 100 elementów do 30 selektorów) pewnie stworzyłbym jedną klasę w stylu:

.has_bg {
background: url(sprint.png) no-repeat;
}

dorzuciłbym ją do odpowiednich elementów html i wyregulował im indywidualnie tylko background-position/repeat/attachment itp...

Wyglądałoby to w kodzie mniej więcej tak:

<aside class="sidebar has_bg">
</aside>

.sidebar {
background-position: XXpx YYpx;
}

Można się kłócić jak bardzo jest to semantyczne, jednak w wielu przypadkach pomogłoby w pisaniu bardziej elastycznego kodu.rafał krupiński edytował(a) ten post dnia 01.04.11 o godzinie 13:03rafał krupiński edytował(a) ten post dnia 01.04.11 o godzinie 13:04
Link do wypowiedziLink
Dariusz Sikorski

Dariusz Sikorski Front-End Web
Developer, Ux/Ui
Designer

Temat: Sortowanie właściwości w CSS

Bardzo dobry temat!

Myślę, że sortowanie alfabetyczne selektorów (nie właściwości), to nie najlepszy pomysł, ponieważ nie informuje developera na jaki "obszar" elementów właśnie spogląda w CSS'ie.

-------------------------------

Opiszę kolejność z jakiej sam korzystam:

1. Style, których nie będę edytował:
a) Reset
b) Ewentualny Grid
c) Skiny dla pluginów (jak jQuery Ui)
d) własny zestaw przydatnych, klas (.clear, .clearfix, itd)

2. Style edytowalne - już konkretnie dla Tego projektu:
a) definicje własnych czcionek @font-face
b) style globalne - dotyczące wszystkich podstron (tj body {font: 12px/18px...}
c) style contentu - opis wyglądu konkretnych podstron, klasy staram się nazywać i opisywać uniwersalnie, aby były użyteczne na innych podstronach.

3. Fixy dla IE 6-8. Jeśli można, staram się tego unikać.

-------------------------------

Wszystkie powyższe pliki - podpunkty trzymam w osobnych plikach, a jako, że używam LESS PHP - na wyjściu łączę je w jeden i kompresuję, aby zmniejszyć liczbę HTTP requestów, pominę więc załączenie przydatnych klas LESS'a, żeby nie robić zamieszania.

Pozdrawiam serdecznieDariusz Sikorski edytował(a) ten post dnia 02.04.11 o godzinie 17:36Dariusz Sikorski edytował(a) ten post dnia 02.04.11 o godzinie 17:37Dariusz Sikorski edytował(a) ten post dnia 02.04.11 o godzinie 17:38
Link do wypowiedziLink
Łukasz Stępa

Łukasz Stępa Front-End developer

Temat: Sortowanie właściwości w CSS

Osobiście sortuje selektory i style do nich na jakiś tam swój wyuczony sposób który sobie przez dłuższy czas obrałem.

Staram się selektory elementów css wrzucać w kolejności elementów html tak jak idą na stronie bo łatwiej jest się w nich połapać, bo wiem że po elemencie takim mogę się spodziewać innego(wiadomo że nie da się tego zrobić zawsze bo często klasy są pożyczane dla innych elementów na stronie). Osobiście często wrapperów nie daje po kolei oraz selektorówi nazw klas globalnych jak p, .clear, .hidden, h1 itp. Podobnie @font-face na początku.

Same style to tak jak już ktoś wspomniał, wpierw style dla ułożenia elementu jak float|display|position|overflow, a w dalszej kolejności font|line-height|border|color|background

Myśle że dobrym pomysłem byłoby wprowadzenie jakiegoś standardu sortowania, jednak trzeba by to zrobić na próbce tysiącach linii kodu oraz tyle samo koderów których selektory kodu w mniejszym lub większym stopniu by się pokrywały.
Link do wypowiedziLink

konto usunięte

Temat: Sortowanie właściwości w CSS

Kolejnosc nie gra wiekszej roli i mimo iz mam pliki po kilka tysiecy linii, to kolejnosc wlasciwosci jest dosc losowa.

Bardziej istotne dla mnie jest wciecie kodu... np. .mojBox {costam} ale mojBox .title {} juz zaczyna sie z tabem od lewej strony, tak by bylo widac ze jest to "w drzewki" .mojBox'a :)
Nie znam poki co nikogo kto by tak robil i w sumie nie wiem czemu... duzo latwiej pozniej sie takie CSSy rozwiazuje :)Andrzej Winnicki edytował(a) ten post dnia 04.04.11 o godzinie 12:50
Link do wypowiedziLink

konto usunięte

Temat: Sortowanie właściwości w CSS

Andrzej Winnicki:
Kolejnosc nie gra wiekszej roli i mimo iz mam pliki po kilka tysiecy linii, to kolejnosc wlasciwosci jest dosc losowa.

Bardziej istotne dla mnie jest wciecie kodu... np. .mojBox {costam} ale mojBox .title {} juz zaczyna sie z tabem od lewej strony, tak by bylo widac ze jest to "w drzewki" .mojBox'a :)
Nie znam poki co nikogo kto by tak robil i w sumie nie wiem czemu... duzo latwiej pozniej sie takie CSSy rozwiazuje :)Andrzej Winnicki edytował(a) ten post dnia 04.04.11 o godzinie 12:50

Wcięcia obrazujące zagnieżdzenia to u mnie standard. Jeżeli chodzi o sortowanie właściwości to mam kolejność zbliżoną do tego, co opisał rafał krupiński. Kolejność danych właściwości też ma dla mnie jakieś znaczenie, style dla poszczególnych podstron (jeżeli są różne) oddzielam komentarzem w stylu:

/* -----[ foto page styles ]------------------ */
Piotr Lewandowski edytował(a) ten post dnia 04.04.11 o godzinie 13:51

Dodatkowo w osobnych plikach trzymam reset CSSów oraz style opisujące budowę layoutu (wielkości głównych divów tj. header, content, footer, ich wrapperów, itp)Piotr Lewandowski edytował(a) ten post dnia 04.04.11 o godzinie 13:52Piotr Lewandowski edytował(a) ten post dnia 04.04.11 o godzinie 13:52
Link do wypowiedziLink
Łukasz Stępa

Łukasz Stępa Front-End developer

Temat: Sortowanie właściwości w CSS

Fakt, kod w "drzewku" to dodatkowe ułatwienie w szukaniu:) Każdy pod-element elementu nadrzędnego to +1 do wcięcia ;) Dodatkowo jeszcze mi osobiście w css ułatwia ustawienie dla pierwszego selektora danego elementu(korzeń danego drzewka) każdy styl w osobnej linii np:
#wrapper {
margin: ;
width: ;
}
.content { float: ; position: ; padding: ;} etc etc..
Link do wypowiedziLink

konto usunięte

Temat: Sortowanie właściwości w CSS

Łukasz Stępa:
Fakt, kod w "drzewku" to dodatkowe ułatwienie w szukaniu:) Każdy pod-element elementu nadrzędnego to +1 do wcięcia ;) Dodatkowo jeszcze mi osobiście w css ułatwia ustawienie dla pierwszego selektora danego elementu(korzeń danego drzewka) każdy styl w osobnej linii np:
#wrapper {
margin: ;
width: ;
}
.content { float: ; position: ; padding: ;} etc etc..

ja raczej nie robię KAŻDEGO stylu w osobnej linii, bo to niepotrzebnie wydłuża plik (chodzi o to, ile styli na raz widać na ekranie a nie o rozmiar), raczej umieszczam daną GRUPĘ styli w jednej linii...
Link do wypowiedziLink
Marcin Pawlas

Marcin Pawlas kocham poniedziałek

Temat: Sortowanie właściwości w CSS

Piotr Lewandowski:
Łukasz Stępa:
Fakt, kod w "drzewku" to dodatkowe ułatwienie w szukaniu:) Każdy pod-element elementu nadrzędnego to +1 do wcięcia ;) Dodatkowo jeszcze mi osobiście w css ułatwia ustawienie dla pierwszego selektora danego elementu(korzeń danego drzewka) każdy styl w osobnej linii np:
#wrapper {
margin: ;
width: ;
}
.content { float: ; position: ; padding: ;} etc etc..

ja raczej nie robię KAŻDEGO stylu w osobnej linii, bo to niepotrzebnie wydłuża plik (chodzi o to, ile styli na raz widać na ekranie a nie o rozmiar), raczej umieszczam daną GRUPĘ styli w jednej linii...

mi się łatwiej czyta, przy skomplikowanym rozbudowanym pliku css z jedno liniowcami dostaję oczopląsu :)
Link do wypowiedziLink

konto usunięte

Temat: Sortowanie właściwości w CSS

Marcin Pawlas:

mi się łatwiej czyta, przy skomplikowanym rozbudowanym pliku css z jedno liniowcami dostaję oczopląsu :)

IMHO wygodniej jest odseparować grupy stylów w każdej linii osobno, np w pierwszej linii mam zawsze rzeczy związane z wyświetlaniem danego elementu (pozycja, overflow, float, display, wymiary, marginy, paddingi), następna linia to wszystko związane z typografią (rozmiar fonta, color, wysokość linii, itp), potem wszelkiego rodzaju bordery, backgroundy itp..

Do tego wcięcia w kodzie i wszystko da się łatwo i szybko odczytać...
Link do wypowiedziLink
Łukasz Stępa

Łukasz Stępa Front-End developer

Temat: Sortowanie właściwości w CSS

Piotr Lewandowski:
IMHO wygodniej jest odseparować grupy stylów w każdej linii osobno, np w pierwszej linii mam zawsze rzeczy związane z wyświetlaniem danego elementu (pozycja, overflow, float, display, wymiary, marginy, paddingi), następna linia to wszystko związane z typografią (rozmiar fonta, color, wysokość linii, itp), potem wszelkiego rodzaju bordery, backgroundy itp..

Do tego wcięcia w kodzie i wszystko da się łatwo i szybko odczytać...


No każdy ma jakąś tam swoją strukture:) ale przyznasz, że gdyby nie sortowanie właściwości, a kod zawsze byłby liniowy na chybił trafił i miałbyś pareset takich kwiatków
.costam{padding:0;margin:20px;position:relative;font:80%;display:block;float:left;}

i we wszystkich właściwości były by na chybił trafił no to można się pogubić :)
Link do wypowiedziLink

konto usunięte

Temat: Sortowanie właściwości w CSS

Dość subiektywne.
Kiedyś pisałem jeden atrybut na linie, później przeszedłem na wszystko ciurkiem w jednej linii i teraz inaczej nie umiem.

A kolejność elementów - standardowa:
- od góry strony, w dół, od ogólnych definicji do szczegółowych
- argumenty od najistotniejszych - display, position, width, height, float, margin, padding, font-*, text-*, color, background, border, CSS3.
- i rozdzielenie na pliki, jeśli ma to większy sens, podział i tak dla mojej wygody - finalnie i tak wszystko leci w jeden skompresowany plik.
Link do wypowiedziLink
Małgorzata Jakubiak

Małgorzata Jakubiak webdesigner

Temat: Sortowanie właściwości w CSS

Przy dużych projektach można stosować kilka plików css, do każdego wstawiając inne rzeczy, np. w pierwszym jest konstrukcja strony, w drugim dekoracje wspólne dla całego serwisu, w trzecim strona główna, w kolejnym komentarze, w jeszcze następnym style do wydruku itd.

W obrębie tych poszczególnych plików też można sobie pewne rzeczy pogrupować, np. nagłówki, elementy menu, wypunktowania.
Link do wypowiedziLink
Łukasz Kliś

Łukasz Kliś Fullstack Engineer @
Luko

Temat: Sortowanie właściwości w CSS

Małgorzata Jakubiak:
Przy dużych projektach można stosować kilka plików css, do każdego wstawiając inne rzeczy, np. w pierwszym jest konstrukcja strony, w drugim dekoracje wspólne dla całego serwisu, w trzecim strona główna, w kolejnym komentarze, w jeszcze następnym style do wydruku itd.

W obrębie tych poszczególnych plików też można sobie pewne rzeczy pogrupować, np. nagłówki, elementy menu, wypunktowania.

Tak troszkę odbiegasz od tematu - tutaj raczej chodziło mi o sortowanie właściwości, a nie info o tym, co z plikami się robi. :)
Link do wypowiedziLink
Rafał S.

Rafał S. Front-end Developer

Temat: Sortowanie właściwości w CSS

[offtopic] Im więcej odrębnych plików CSS tym gorzej... wzrasta liczba żądań.
Link do wypowiedziLink

konto usunięte

Temat: Sortowanie właściwości w CSS

Niekoniecznie.
Co innego ilość request'ów, a co innego ilość plików css.
Coraz więcej serwisów trzyma masę plików a serwuje jeden, skompresowany.
Link do wypowiedziLink

konto usunięte

Temat: Sortowanie właściwości w CSS

Nie jest sztuką kombinowanie jak tu łączyć i kompresować pliki .css jeśli równolegle nie zadbamy o to samo po stronie innych plików statycznych, np grafiki. Jak szaleć to na całego :>
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

CSS Frameworks




Wyślij zaproszenie do
Anuluj