Formatowanie CSS – zagadka
Dodane 10 lipca 2008 w kategorii Net,Techblog.Kwestia, która mnie nurtuje od jakiegoś czasu – dlaczego wszyscy (no dobra, prawie wszyscy) formatują kod CSS tak:
.something
{
width: 100px;
height: 30px;
border: 2px solid #ABC;
}
.something a
{
text-transform: uppercase;
color: #666;
}
.somethingElse
{
float: left;
clear: both;
display: block;
padding: 5px;
}
...a nie tak?
.something { width: 100px; height: 30px; border: 2px solid #ABC; }
.something a { text-transform: uppercase; color: #666; }
.somethingElse { float: left; clear: both; display: block; padding: 5px; }
Jakoś nie przychodzi mi do głowy żadna odpowiedź, poza „no bo przecież wszyscy tak robią”. Wyższość drugiego sposobu wydaje mi się bowiem oczywista – kilkakrotna różnica w liczbie zajętych linijek (w powyższym przykładzie cztery zamiast dwudziestu) to nie w kij dmuchał, a chyba mało kto lubi mieć kod rozciągnięty na dziesięć ekranów, gdy można go praktycznie bez straty dla czytelności zmieścić na dwóch. Oczywiście „zwinięty” kod wymaga przyjęcia jakiejś ustalonej kolejności znaczników, żeby je łatwo znajdować wzrokiem, ale odrobina wewnętrznej dyscypliny to chyba nie taki wielki problem.
OK, rozumiem, że niektórym (a może nawet większości) mimo wszystko wygodniej mieć każdy znacznik w osobnej linijce – ale żeby ci „niektórzy” stanowili 99% webmasterów? Tego jakoś nie kumam.
Potrafi mi to ktoś wytłumaczyć?
Komentarze![[Atom]](/files/comments-feed.png)
Dla mnie drugi fragment zdaje się nieczytelną plamą znaków mimo iż problemów ze wzrokiem nie mam. Oczywiście potrafię to przeczytać, ale przy siedzeniu nad CSS przez 8h staję się to męczące. Ja daję każdą właściwość w osobnej linijce i jeszcze trzymam się kolejności ( layout/pozycja(display,float,top,left), margin/padding, dalej kolory, ramki, czcionki ).
Nie rozumiem dlaczego miałbym oszczędzać na linijkach. Dlaczego mam nie rozciągnąć kodu na 10 ekranów skoro nawet przy dziesięciu linijkach lepiej użyć wyszukiwania niż zaiwaniać po kodzie kursorami.
odpowiedź: Pierwszy przykład jest o wiele czytelniejszy – tyle :)
Skanujac tekst lecisz w dol po atrybutach (1 sposob) w drugim trzeba sie przebijac przez wartosci. A pozatym, dlaczego nie pisze sie:
if(condition){doSmth(); dupa = Klas.new; cosJeszczeZrob_Iw_ogole[sad];}
?:>
Pozatym lepiej scrollowac w pionie niz w pionie i poziomie ;)
@neaf
>Dla mnie drugi fragment zdaje się nieczytelną plamą znaków mimo iż problemów ze wzrokiem nie mam.
Hmm, ja mam problemy ze wzrokiem, a jednak widzę wszystko bez problemu – tym bardziej w edytorze, gdzie jest jeszcze kolorowanie składni.
> Dlaczego mam nie rozciągnąć kodu na 10 ekranów skoro nawet przy dziesięciu linijkach lepiej użyć wyszukiwania niż zaiwaniać po kodzie kursorami.
Ale wciskanie co chwila ctrl+f jest dużo bardziej męczące, niż przeskakiwanie kilku czy kilkunastu linijek, gdy od razu widzisz, gdzie jest interesujący Cię fragment.
@teamon
Scrollować w poziomie? Strasznie wąski ekran masz;-).
Zresztą jak jest dużo atrybutów przy jednym elemencie, to przecież można je rozbić na dwie czy trzy linijki.
13,3 + podglad na strone (CSSEdit) ;]
1. Można powiedzieć, że to już taki ‘standard’ formatowania.
2. Przyzwyczajenie – jak raz się nauczysz, to już tak zostanie (zależy na czym ktoś się uczył -> wynika z 1).
3. Łatwiej jest pracować na czyimś kodzie, gdy jest on formatowany tak jak lubisz. Jeśli się dostosujesz do standardu, to będziesz miał łatwiej.
4. Gdy dostosujesz się do tego ‘standardu’, to inni będą mieć ułatwioną prace przy Twoim kodzie.
Pierwszy sposób dla mnie czytelniejszy. A przejście do następnej linijki to tylko jeden bajt (chr(13)), więc nie tak dużo.
skoro tak argumentujesz swój styl kodzenia to czemu nie wrzucisz wszystkiego do jednej linijki? ;) http://marines.jogger.pl/files/s.css
A ja (dla odmiany) lubię oszczędzać na enterach (ale nie do przesady) i np. wstawienie klamerki { w całą linię jest dla mnie burżujstwem zbyt rozwalającym kod – to samo z pustymi liniami po każdym elemencie.
Dodatkowo w przypadku CSS-a, po skończeniu pisania usuwam każde przejście do nowej linii po właściwościach, a puste linie zostawiam tylko do podzielenia bloków.
Przyklad pierwszy jest zwyczajnie czytelniejszy.
Ja tez daje sobie rade z odszyfrowaniem drugiego, bez najmniejszego problemu, ale sam sposob zapisu nie jest tak ergonomiczny i latwy w interpretacji.
Jak już to poprzednicy zauważyli – sposób pierwszy jest poprostu czytelniejszy.
A co do „objętości” – większość edytorów posiada zawijanie treści ;)
Wrap to zło. Wtedy to dopiero sie nie mozna polapac. Chyba, ze chodzilo ci o kompresowanie (usuwanie bialych znakow etc) ;)
Jestem pewny, że chodziło o folding. Np zwijanie styli dla jednego elementu.
Hm. zAwijanie vs zwijanie. Jezyk polski jest glupi ;p
Ja formatuję kod CSS: #x .dupa {text-align:center; color:#342; position:absolute; top:10px}
i też nigdy nie kumałem po co rozbijać kod na linie, bo po prostu za dużo się trzeba naprzewijać.
Tak sformatowany i dodatkowo pokolorowany kod jest całkiem czytelny, a np. uporządkowany alfabetycznie (czego sam nie stosuję, bo po prostu nie jest dla mnie problemem przeszukiwanie listy atrybutów) jest jeszcze bardziej czytelny.
alfabetycznie? raczej kaskadowo #top \n #top h1 \n etc. Zreszta, do przegladania css to jest firebug ;)
Chyba chodziło o style nie selektory. :)
A moze ;p To wtedy raczej ukladalbym grupami [box-model] [font] [...]
No ja tak właśnie układam :) http://pastie.org/231701
Nie uwazacie ze indent – 2 spacje wystarczy :>?
Wolę jeden tab… w edytorze mam ustawione właśnie na szerokość dwóch spacji.
Też mnie zastanawia, czemu wszyscy stosują cztery spacje, skoro już dwie dają wyraźne wcięcie.
To ustaw zeby zamienial ci automatycznie taby na X spacji :) Przydaje sie wlasnie przy wklejaniu gdzies itp
Ja daję jeden TAB i po sprawie. ;)
Nie widzę powodu, jak ktoś skorzysta z pliku to ustawi sobie tak jak lubi. :) http://neaf.ath.cx:4000/ — A tu strona, do której ten CSS, ale na razie projekt :) I zgaśnie jak wyłączę komputer :D .
tab-size tez mozna ustawic ;) @neaf merb?
Merb :) Ale postawiony na wirtualnej maszynie, bo lubię kodzić na Windowsie :) No i mi Fireworks przy stronach potrzebny,
MAsz iMaca i siedzisz na windzie? Zdrada! :P
Nieeeee… No co Ty… iMac dopiero leci do Polski ( albo już przyleciał? :D ) Tak czy inaczej wyruszył jakiś tydzień temu.
Ufff nie stasz mnie tak wiecej :P (tak, robie sobie jaja ;p)
Jeszcze zmysłów nie postradałem :D ( ładny czat się zrobił – idę umyć garnki ;] )
Przykład pierwswzy jest czytelniejszy jeśli strona jest w budowie, jak się skończy to zazwyczaj zwijam to do jednej linijki, oszczędzam na kb przy większych projektach :D
@pijanyadmin Mówisz, że tych białych spacji jest pare tysięcy by zyskać chociaż 4kb? ;)
tak właśnie o tym :P i przy większej ilości plików css niż tylko jednym…
@pijanyadmin To pytaniem jest na ile ten CSS jest ładnie ułożony, bo nie sztuka jest pisać osobno style dla każdego elementu jak mamy np. klasy. ( Nie umiejszam tutaj umiejętności – taka tylko refleksja ;] )
Upodobania dot. formatowania kodu to w sumie sprawa dość indywidualna (co zresztą widać w powyższej dyskusji). To, że lubisz kiedy wszystko jest takie zwięzłe, jest po prostu jednym z wielu punktów widzenia i należy go tolerować jak każdy inny — bez tłumaczenia, jaki jest jego sens.
W Tao Te Ching można przeczytać: „mędrcy robią wielkie rzeczy, kiedy jeszcze są małe”. Dlatego lepiej poukładać wszystko tak, żeby na pierwszy rzut oka dało się znaleźć, niż potem przypadkiem coś przeoczyć i poświęcić pół dnia na szukanie. Może przez większość czasu nie ma takiej potrzeby, ale kiedy coś się sypnie i trzeba szybko poprawić, to zwykle dobrze jest być na to przygotowanym.
Zależy, ostatnio css robię „działowo”, bo tego wymaga projekt, jak się coś sypnie to problemu ze znalezieniem nie mam, nawet w tej jednej linijce. Kwestia przyzwyczajenia, poza tym… miny ludzi po obadaniu źródła pliku aby skopiować coś... bezcenne :D
A ja nie utrudniam ludziom zaglądania do mojego kodu… Wiele nauczyłem się z CSSów Riddla – inni mogą uczyć się ode mnie. :)
Tak jak pisałem, kwestia podejścia, jak ktoś chce to i tak to rozszyfruje, a jak nie… To moje zobaczenia „zawodowe”, nikomu nie musi się to podobać :) a co do nauki, popieram samo uczenie metodą prób i błędów, a nie na zasadzie „ten czy ten zrobili tak i ja zrobię ctrl+c/v” I nie mam na myśli tutaj samego kopiowania, tylko używania podglądania do nauki, to samo jest w kursach.
Ale w kursach nie ma wszystkiego ;)
to złe kursy czytasz :P
Imho nic nie zastapi real-use przykladow :)
Nigdy nie korzystałem z kursów, nigdy nie czytałem książek, wszystkiego nauczyłem się przechodząc od razu do praktyki ( pierwszego Joggera na którym zacząłem się bawić szablonami miałem jeszcze w podstawówce ) szukając konkretnych rozwiązań po internecie i w cudzych plikach. Taka metoda mi najbardziej odpowiadała. Teraz, po kilku latach zaczynam sobie porządkować wiedzę obszerniejszymi tekstami.
Oczywiście chodzi mi o CodeFolding.
btw: stytlów nie styli ;)
…bo tak proste regułki ciężko nazwać prawdziwym CSS-em? Kiedy dojdzie Ci na długości selektorów i liczbie odpowiadających im różnych elementów, to może zrozumiesz, na czym polega niechęć do poziomego paska przewijania.
Tak gwoli ścisłości — moje formatowanie jest bliższe pierwszego, ale klamrę otwieram na końcu linii z selektorem, a poszczególne wartości ładnie wyrównuję, by znajdowały się jedna pod drugą.
A ja formatuje wcinajac na wysokosc konca nadrzednego elementu…
Formatowanie docelowe jest nieistotne, skoro można później bez problemu usunąć większość białych znaków (tych sąsiadujących z klamrami i średnikami, złamania wierszy) przy pomocy krótkiego skryptu. Niech każdy sobie formatuje jak chce, jeśli jednak plik ma być później edytowany to orientacja pionowa, nie pozioma.
@Michał Górny
Stworzyłem wiele CSS-ów z prawdziwego zdarzenia, prawie wszystkie formatowałem „swoim” stylem i nigdy nie przysporzyło mi to problemów. Wręcz przeciwnie, to „tradycyjny” styl mnie spowalnia.
Co do przewijania w poziomie – rzadko mi się zdarza, żeby jakiś element nie mieścił się w linii, a jeśli już, to zawsze można go rozbić na dwie lub więcej.
Odpowiedź jest prosta, autor tego wpisu jest lepszy od „99%” webmasterów. Przynajmniej jeśli chodzi o percepcję. Niestety nie każdy jest taki rzutki i witki więc orze jak może.
pisząc „tego” miałem na myśli „powyższego” ;>
dlaczego? bo tu masz 3 wartosci. gdy masz ich 30 albo 300 to juz jest troche mniej ciekawie.
ja trzymam zazwyczaj ladny kod CSS, bo prosciej sie go edytuje, a potem zwijam go, zeby zajmowal mniej miejsca. tak jest na nerdblogu (chociaz tam jest ten problem, ze ladny i zwiniety kod sie rozsynchronizowaly, a nie mam czasu go znowu poprawic)
ehh, musze zaczac wiecej spac:
tutaj masz 3 linijki.
juz nie mowiac o tym, ze kazdy element, ktoremu przydzielasz style ma rozna dlugosc, wiec ‘skanowanie’ po tekscie to szukanie igly w stogu siana.
@(s)zymon
Daruj sobie te złośliwości, ja tu nie chcę się nad nikogo wywyższać, przedstawiam tylko swój punkt widzenia.
@D4rky
> bo tu masz 3 wartosci. gdy masz ich 30 albo 300 to juz jest troche mniej ciekawie.
Wręcz przeciwnie – wtedy to się dopiero zaczyna robić ciekawie, bo mam na jednym ekranie ok. 40 elementów, zamiast pięciu czy sześciu – a to znakomicie ułatwia znalezienie tego, który mnie akurat interesuje.
Cichy – jesli wszystko masz posegregowane w logicznej kolejnosci to dobrze wyciety kod ulatwia wyszukiwanie, a ta zupa nie. Ale to twoj wybor, oby tylko nikt nie musial z toba pracowac ;]
Jak czegoś szukam, to zwykle po nazwie elementu, a ta jest w obu formatowaniach w tym samym miejscu, więc nie wiem, dlaczego układ atrybutów miałby tu coś zmieniać. Jeśli kolejność jest logiczna, to nie widzę żadnego problemu. Jeśli nie jest, to nawet najładniejszy format nie pomoże.
A współpraca z innymi webmasterami jak dotąd układała mi się bardzo dobrze:-).
Dlatego, że svn diff czy cvs diff -u lepiej pokazuje zmiany w pierwszym przypadku ;)