Názory k článku
Udržovatelný stylopis: CSS kód, ze kterého nerozbolí hlava

ty linky na http://kratce.vzhurudolu.cz/ nefunguji..

Nahradte ve jmenu serveru slovo "kratce" za "blog" a linky budou fungovat. Chtel jsem sem puvodne vlozit opravene linky, ale muj prispevek byl zdejsim systemem vyhodnocen jako SPAM a nesel mi odeslat ani po prihlaseni... :-(

souhlas, většina lidí nemá 40' monitor, tam bych si možná přepych mohl dovolit psát všechno extra na řádek, ale na svém 21' monitoru bych viděl pravidla pro jeden, dva prvky a to by se mi ladilo dost špatně
navíc stále více lcd panelů se vyrábí v wide provedení, což je optimální pro "inline" zápis, při "roztahaném" budu mít 85% pracovní plochy nevyužité
jen bych za názvem prvku a za každým pravidlem (středníkem) dal jednu mezeru), ale ne za dvojtečku, tím se znesnadňuje čtení
(píšu ve GVIm, téma dark blue na windows)

40" monitor není vůbec potřeba. Osobně používám 19" případně 21" a vidím běžně čtyři až sedm prvků na jedné obrazovce. To mi přijde docela dost.

V poslední době, když musím pracovat s cizími stylopisy, tak jenom šílím, protože používají inline zápis bez mezer za dvojtečkami. Pokud si chci přečíst nějakou definici celou, musím scrollovat do stran. Na vertikální scrollování mám kolečko na myši, můžu si přidat zarážky a skákat jedním kliknutím na definice, se kterými práve pracuju.

Osobně dávám přednost zápisu, který je v článku popsán.

Programuji na 15" notebooku a nemám s tím sebemenší problém.

Nevím, co by mělo komukoliv vadit na scrollování stránky, to co bych musel složitě hledat v inline zápisu očima, hledám (dle mého názoru rychleji) jen scrolováním stránky dolů, kde si hledaného hned všimnu...

Zvírazňovače jsou fajn, ale tak jako pomáhají v inline zápisu, tak pomáhají i v odetnrovaným zápisu...

Mimoto že inline zápis se špatně komentuje... tak aby bylo vše jasné a nemuselo se scrollovat do stran (když je scrollování tolik někomu proti mysli...).

Jsem tu jediný, kdo při práci s cizím stylopisem, v němž kodér použil jemu vyhovující pravidla formátování, používám PSPad a prostě si ho pomocí položky menu "Přeformátovat CSS" překlopím do strukturovaného zobrazení případně naopak? Nebo nerozumím vašemu komentáři?

Kolega Štěpán Pilař mluvil o cizím stylopisu a na to jsem reagoval.

Ale to je ostatně fuk, celé tohle téma je ryze subjektivní a každý kodér má své vymakané a oblíbené postupy, jak si práci zefektivnit. V tomto případě navíc než kdy jindy platí okřídlené rčeni - "každému, co jeho jest".

SVN tak dalece neznám a počítám, že v ničem podobném nikdy pracovat nebudu.

Osobně mi vyhovuje styl v článku pojmenovaný jako "velkorysý" s pravidlem na každém řádku. Honza Bien zase preferuje řádkový stylopis (všechny definice na jednom řádku) a když jsme spolu pracovali na příkladech ke knize o CSS, neměli jsme problém se ve vlastních stylopisech zorientovat.

Tolik subjektivně k subjektivnímu článku na závěr mého subjektivního komentáře.

na webu je dost nástrojů (i online) pro převod z "inline stylu" do "sloupcového zápisu"

Závidím vám! Vstřebáváte kód lépe než leckterý prohlížeč :-)

Zdrojem inspirace proč psát stylopis velkoryse a ne "počítačově" může být typografie nebo třeba Karel Kryl :-)

Srovnejte komprimovaný zápis:

Z rozmláceného kostela v krabici s kusem mýdla přinesl jsem si anděla Polámali mu křídla
Díval se na mě oddaně já měl jsem trochu trému tak vtiskl jsem mu do dlaně lahvičku od parfému

S velkorysým

Z rozmláceného kostela
v krabici s kusem mýdla
přinesl jsem si anděla
Polámali mu křídla
Díval se na mě oddaně
já měl jsem trochu trému
tak vtiskl jsem mu do dlaně
lahvičku od parfému

Vy sa vzdy musite do kazdeho navazat ze ano ? Mate socialny problem ?

Martin chcel len ukazat, ze cela basen je lepsie citatelna a pochopitelna vtedy, pokial sa upravi do kratkych vystiznych viet. Nie do dlhej stracajucej sa podoby.

A ano, nepouzil tam ciarky. Ale ked uz na nic ine neviete poukazat, tak je to s vami zle.

Ja nechapem vasi dogmaticku zanietenost a vymyslanie takych veci, ktore ma robit pocitac. Od toho tu je. Clovek cloveku ma odovzdat co najpochopitelnejsie udaje. Stoju to uz je jedno, on si to aj tak spracuje podla seba.

Jste dobrej, Howeeene. Skoro jako robot. Tak se ještě jednou poplácejte po rameni.

Jinak já CSS nekóduji, zato píšu zdrojáky. A mám také raději velkorysý styl, než všechno na jedné řádce. Velkorysý styl mi mnohem lépe zajistí, že nepřehlédnu nějakou chybku (ano já vím, moderní nástroje obarví, opraví chyby a automaticky verzují), a že se ve svém i cizím kódu lépe vyznám.
Pak jsou tu starobylá typografická pravidla z dob našich moudrých předků, a ty jsou pro mě zajímavější, než vaše robotí vnímání světa.
Jak bylo řečeno, každému co jeho jest.

Argumentovat "stroj rychleji zpracuje inline zápis" a "šetří to travic" může jen velmi neznalý člověk nebo srandista, zato výhody velkorysého zápisu jsou dobře vidět při používání svn a podobných nástrojů, při diffování a patchování.

Vy ste to zase nepochopil alebo sa snazite znova o demagogiu v prospech seba. Ja osobne si myslim, ze v prospech seba.

On argumentoval tym, ze vas argument o tom, ze inline zapis pocitace spracuju rychlejsie a preto tak pisete je mylny. Ked clovek pise inline zapisom tak ma k tomu ine argumenty. Rychlost je vzdy minimalne na druhom mieste.

Sám preferuji taktéž inline zápis, ovšem s mezerama za středníkem i za tečkou. Samozřejmě souhlasím, že stylopis by měl být přehledný a nějaký ten komentář neuškodí (já si třeba označuji nadpisy jednotlivých částí webu a pod ně píšu předpisy pro prvky, co se tam nachází) Takže třeba takhle:

/*footer*/
p{color: #000; font-size: .9em; width: 100%; text-align: center}

Přehledný, jasný. A když už něco jasný není, nebo po roce nebude, máme tu firebug či webdeveloper, který nám už předpisy pro konkrétní prvek dohledá nejen na více místech jednoho CSS ale i ve více CSSkách, když už jsme si to takhle roztahali.

Díky za příklad. Co třeba ale jen trochu upravený kód?

/*footer*/
p{color: #000; font-size: .9em; width: 500px; text-align: center; clear: both; margin: 10px 0px; padding: 5px 5px 0px 5px;}

Osobně, kdybych takový kód po vás převzal, musel bych jít za nějakým CSSTidy a požádat jej o převod do velkorysé podoby. Ano, Firebug je skvělý a i neuvěřitelně zkomprimovaný kód převede do čitelnější podoby. Proč by ale za nás měl počítač (Firebug) naši práci převádět do čitelné podoby? To bychom měli dělat sami, my jsme lidé a pro nás je čitelnost důležitá. Od počítače chci přesně opačný proces - komprimaci a tedy převod do nečitelné podoby.

O syntax-highlighting jsem slyšel poprvé včera vnoci, ale do úvah, na kterých je založen článek, se je naštěstí podařilo těsně před uzávěrkou vměstnat. :-)

Ale vážně - vy tvrdíte, že komprimovat by měl člověk a dekomprimovat počítač. Já tvrdím opak.

Člověk potřebuje komunikovat srozumitelným způsobem. Kodér je člověk a proto často předává kód jiným lidem. Vždyť kód je také jazyk. Je to prostředník mezi člověkem a počítaček. A také člověkem a člověkem. Proto by člověk měl dbát na to, aby jeho jazyk byl srozumitelný lidem.

O syntax-highlighting jsem slyšel poprvé včera vnoci..
Pak ovšem váš článek a obhajobu "velkorysého" zápisu naprosto chápu.

Ó, pardon, větu jsem zřejmě nedostatečně označil jako ironii.

Ale inline zápis evidentně srozumitelný je, když ho řada lidí používá. Co na tom nechápete?

Řada lidí také lže a krade. Pardon, to považujete za argument hodný svého jména? :-)

Ono riadkovy styl aj odriadkovany styl maju nieco do seba. Len musia byt dobre organizovane, co samozrejme spomina aj tento clanok.
Z mojich skusenosti viem, ze zapis do riadku je dobry pokial nepresiahne dlzku 4-5 definicii. Potom sa stava necitatelnym a velmi jednotvarnym.
Naopak pokial treba zapisat viac direktiv, tak je dobre vyuzit odriadkovanie, pretoze pre oko je jednoduchsie citat kratke dlzky riadkov nez dlhe.

Inak suhlasim s tebou v tom, ze preco by mal pocitac previest nasi hnusnu pracu do pouzitelnej podoby. Prave to ma robit opacne, my mame urobit peknu pracu, a o optimalizacie sa ma postarat pocitac. Na to tu predsa je.

pro mně je tento způsob zápisu s mezerami na dvoutečkou špatně čitelný, pokud bych neměl obarvený kód, tak pořádně nevidím, kde končí jedna definice...

Překvapivě od toho tu syntax-highlighting máme. A kromě pár extrémních editorů (Notepad, nano...) se dá nastavit ve všem.

Pisete fakt tendencne a mlzivo, ze vam to snad aj niektori uveria.

No nejako zabudate na fakt, ze existuje taka pekna vec co sa vola CACHE. A pri casto navstevovanych strankach, pocitam ze tam ti ludia chodia kazdy den, zapracuje velmi dobre prehliadac.

Vy viete vsetko, ostatni nevedia nic. S takymi som sa stretol vela krat, vyskakuju len na internete. V skutocnom zivote je to s nimi naopak velmi zle.

Ano poziadavok sa posiela stale. Toho som si vedomi. Kedysi som bol podobne na tom ako vy. Setrit, setrit, setrit. Lenze praca vyvojara je drahsia ako to zelezo na ktorom to bezi.

Neexistuju len dobri a zli vyvojari. Je tam aj kategoria pragmaticki vyvojari, poculi ste o nich ?

Tak to jste měl štěstí. Já už pár takových potkal i v běžném životě. Extrovertní osobnosti využívající faktu, že jen z cca 20% záleží na tom co umíte, ale ze 70% záleží na tom, jak to umíte prodat. Měl jsem kolegu, který se půl dne mořil s nějakým problémem. Pak přišel jiný kolega, podrbal se za uchem a za minutu bylo hotovo. Z reakce našeho "extroverta" jsem se pak hodně naučil. Na manažerském mítingu neřekl "podívejte jak jsem hloupý, že jsem na to ani po půl dni nepřišel", ale velmi sebejistě prohlásil "podívejte jak těžký problém to byl, ani já jsem na to za půl dne nepřišel". Hoween zjevně patří do stejné kategorie - ze svých nedostatků dělá své přednosti a manipulativní rétorikou se snaží ostatní přesvědčit, že jeho obvykle mimořádné názory nejsou "out" ale "in". Zkrátka snaží se budit dojem těžkého profesionála, který všechno zná, všechno ví a všechno už naprogramoval dvakrát. Možná jím je, možná ne. Nevím, ale podle pravidla "když ti bůh někde přidal, jinde ti musel ubrat" mám nedůvěru k lidem, kteří mají rozvinuté "marketingové" dovednosti.

Ale teď k celému článku - subjektivní článek o ničem (o tom ale asi rubrika je). Jediné co podle mého názoru je dobré dodržovat je pasáž o používání zkrácených zápisů. Zkratek je moc a jeden pak neví, zda původní autor "nedohlédl" všech dopadů zkratky, nebo v tom byl naopak záměr. Jestli jsou vlastnosti na jedné řádce nebo na více je v době syntax highlighting opravdu jedno.

Ach jo. Proč používat hlavu, když to všechno můžu dát stroji. ... viz výše, optimalizaci CSS kódu dělám už tím, jak jej píšu

Komprimujete kód hlavou a šetříte tím svůj software a hardware? :-) To je příkladně ekologické!

Zároveň tím ale zvyšujete pravděpodobnost, že člověk, který kód bude chtít převzít po vás, sáhne po zcela neekologickém řešení - použije software, aby stylopis rozšifroval.

A pokud mi chcete tvrdit, že počet požadavků na server není důležitý..

Počet požadavků je samozřejmě důležitý, více se mu bude věnovat druhý díl článku.

Pridavam se k autorovi clanku, preferuji zapis na vice radku. Chapu jsou zde dve strany, jedna preferuje to druha ono. Je zde ale dalsi argument proti inline zapisu - verzovani (SVN, GIT, Mercurial atp.)
Je mnohem jednodussi cist diff, kdyz presne vidim ktery radek byl odebran a ktery smazan.
Posudte sami:

- #content #hlavicka2 p#menu li a { width: 130px; padding: 10px 4px 10px 6px; display: block; float: left; text-transform: uppercase; background-color: #4DBEE9; color: #292929; }
+ #content #hlavicka2 p#menu li a { width: 180px; padding: 10px 4px 10px 6px; display: block; float: left; text-transform: uppercase; background-color: #4DBEE9; color: #292929; }

vs.

#content #hlavicka2 p#menu li a {
...
- width: 130px;
+ width: 180px;
...
}

V kterem z dvou vyse uvedenych zapisu zjistite jaka byla opravdu zmena rychleji?
Jinak toto samozrejme plati i pro jine jazyky.
Pokud vam vadi prilis zobrazeneho kodu naraz, tak na to pouzivam folding..

PS: omlouvam se ze u druheho prikladu jsem umazal ostatni vlastnosti, ale mistni system chtel prispevek oznacit jako SPAM, berte to prosim tedy orientacne..

jasne, tyhle nastroje zvyraznujici zmenu znam, neda se ale prece predpokladat, ze je pouziva kazdy.
Navic kdyz ovladam SVN z terminalu, tak si nebudu zapinat zelvu nebo neco podobnyho.

Mne sa pacili tieto nedavno publikovane tipy http://www.hongkiat.com/blog/20-useful-css-tips-for-beginners/

Ja používam abecedné poradie (pokial nie je potrebné inak), je v tom problém? Som totiž php programátor a css beriem ako nutné zlo, keďže to nemá kto iný robiť...
Príklad:
.objekt {
border:1px solid black;
border-bottom: 2px solid black;
display:block;
float:left;
font-size:1.2em;
height:100px;
width:100px;
}

php prográmator? to je nějaká omezující nemoc? v tvém podání to tak vyznělo :-P

nj, mám takú diagnózu :-)

Vyzkoušel jsem už také několik způsobů a momentálně mi příjde nejlepší tento :)

div#menu4    {}
div#menu4 ul {margin: 0; padding: 0;}
div#menu4 li {float: left;}
div#menu4 a  {}

Oblíbil jsem si ho z těchto důvodů:

• vejde se více na obrazovku
• jelikož pracuji na širokoúhlém displayi, lépe ho využiji
• deklarace začínají od stejného místa
• a celkově mi to osobně příjde přehlednější

Není to všespásné - pokud ze potřeba zapsat něco opravdu dlouhého, co by se na řádek nevešlo, použiji klasický rozšířený a je to. Také má člověk trochu víc práce s formátováním, ale nic zásadního. Komentáře jsem si zvykl psát, vyplatí se to. Ve výsledku je jedno, jaké formátování použiji, nakonec to stejně přechroustá script, ze kterého vypadne kompaktní verze. Samozřejmě, je to o zvyku a osobních preferencích, tak to tak nehroťte :)

Málem bych zapomněl na obvyklou posloupnost:

1. pozicování
2. float & display
3. rozměry
4. margin & padding
5. color/font/line-height/text-align...
6. border
7. background
8. zbytek

Snad je tam tak nějak vše podstatné a na nic jsem nezapomněl. Ve většině případů postupuji právě zhruba takto - zatím mi to vyhovuje.

Někdy se hodí, aby se pouhým kouknutím do css dala odhadnout struktura html, ale v tomto případě mi tam zůstali tak nějak do počtu :)

"zůstaly" :(

Předně děkuji autorovi za otevření tohoto tématu zde na Zdrojáku. O tom, jakým způsobem psát stylopis tak, aby se v něm vyznal i někdo jiný (popřípadě i sám autor po delší době) a aby byl snadno udržitelný, bychom měli mluvit stále dokola.

Osobně jsem zastánce inline zápisu. Proč?

1. Jako uživatel širokoúhlé obrazovky mám přeci jen více místa do strany, než do výšky
2. Jsem šťastný uživatel Macbooku. Pokud jste někdy pracovali s jeho touchpadem zjistíte, že mezi scrolováním dolů a jakýkoli jiným směrem není rozdíl. Pokud ovšem pracuji s myší uznávám, že scrollování do strany jde maličko hůře.
3. Inline zápis mi umožňuje odsadit jednotlivé definice dle toho, jak jsou zanořeny ve struktuře stránky. Např:

.article {margin: 1em; overflow: hidden}
	.article h2  {border-bottom: 0}

Takto se mi lépe orientuje v kódu, nejvíc na levé straně je nadřazený element, věci, které jsou uvnitř něj nastylovány specificky jsou poté odsazeny.

Několikrát jsem řešil to, zda bych měl jednotlivé definice nějak řadit. Někteří lidé to dělají abecedně, jiní na to kašlou a další mají nějaký svůj způsob. Osobně to nikterak neřadím z důvodu toho, že jsem příliš pohodlný takovou strukturu dodržovat a přemýšlet, kam danou definici napsat. Máte někdo zkušenosti s abecedním řazením? Pokud po vás někdo převezme kód, je to pro něj pohodlnější, když ví přesně kde má definici hledat?

Ještě mě zaujal systém Erica Meyera. Ten píše některé definice na jeden řádek a jiné odsazuje na nový. Má v tom určitý systém, kdysi o tom psal, ale nedaří se mi ten článek dohledat.. (pro ilustraci mrkněte na jeho CSS).

Nebo třeba Chris Coyier, ten píše css taky inline zápisem, ovšem rozděluje opticky stylopis na dvě poloviny. V jedné jsou selektory a v druhé definice (viz např. stylopis CSS-tricks.com). Taky zajímavé a opticky to nevypadá špatně...

Prostě možností je mnoho, škoda že se článek jimi aspoň trošku nezabýval a rovnou šel stylem co řádek, to definice. Určitě to může spoustě lidem sedět, další spousta lidí ale raději vidí více selektorů najednou a má větší přehled nad dědičností (imho je to z inline zápisu lépe vidět - tedy alespoň já to tam lépe vidím. To je důvod, proč ho používám. S čímž je částečně spojené to zanořování o kterém jsem mluvil.

Co vy na to? Používáte některou z uvedených věcí, nebo máte svůj vlastní styl? Řadíte jednotlivé definice, nebo je necháváte ležet?

Nijak. Napíšu #nav první a pod něj napíšu #nav li. Ale záleží to na osobních preferencích, že.

Máš pravdu, v subjektivním článku se asi má obhajovat jeden postup. :)

K Natalii a vytváření zpětné vazby

Ona má nepochybně pravdu, vytvářím tím určitou vazbu. Ale vem si modelový příklad. Mám z html5 element article a v něm nějaký nadpis, jméno autora etc. Mě osobně dává smysl to, že tyto dva prvky budou v tomto elementu nastylovány vždy stejně. Pokud tedy změním html strukturu třeba tak, že přesunu jméno autora na konec článku, tak se mi v CSS žádné odsazení nezmění (v CSS si naznačuji závislost, že prvek address se vyskytuje v prvku article). Pokud bych prvek address vyndal z elementu article, tak se najednou vztahuje zcela k jiné části obsahu a nemá se na něj co vztahovat jakákoli definice pro prvek address v article. Bude pravděpodobně vypadat zcela rozdílně a bude třeba napsat jinou/původní přepsat. A pokud už to přepisuji, zmáčknout ctrl+x a ctrl+v na správném místě stylu, mi přijde jako minimální cena za to, že člověk po mě přijde a koukne: jo, tady je článek, v něm je prvek address a ani se nemusí koukat do html...

Je to možná trošku zmatené, ale snad je z toho vidět ta myšlenka..

Honzo, na příklad s článkem a jeho dceřinnými prvky velmi pravděpodobně nebudeš tou závislostí odsazování ve stylopisu na struktuře kódu omezován.

"Velmi pravděpodobně" pro mě ale není dost a hlavně v jiných případech nebude platit. Vezmi si třeba definici layoutu - tam se vnořování může měnit nejen z pohledu času a vývoje projektu, ale také z pohledu různých šablon projektu.

Dávám přednost pravidlům, která lze používat obecně, a u tohoto to neplatí.

88GqOH ewutvbkkoynp, [url=http://qu­qeksacoeiw.com/]qu­qeksacoeiw[/ur­l], [link=http://gcg­ovlrutrcc.com/]gcgo­vlrutrcc[/lin­k], http://snlpsysspgcy.com/

Mne sa okrem spominanych postupov osvedcilo tabulatorovat jednotlive idcka a classy podla hierarchie.

#header
#header h1
#header h1 a

potom netreba ani komentare a vsetko sa da lahko najst

co tady proboha resite? piste to v ramci teamu a projektu (tym muze byt i jeden clovek:) stejne, drzte v git/svn/cokoliv, do produkce to hazejte minifikovany a nemarte cas zbytecnou diskuzi.. je to jen css..

Nikdy by ma nenapadlo, koľko sa dá diskutovať či používať inline zápis alebo nie. Keď niekomu vyhovuje inline viac, tak je to jeho vec. Len otázne je, či tomu bude rozumieť aj osoba, ktorá ho bude po ňom čítať.