Autor Zpráva
Petr ZZZ
Profil
Přeji všem hezký večer. Diskuse o tučné a netučné kurzívě se začala stáčet k tématu, které se mi už nějakou dobu honí hlavou a zřejmě si zaslouží vlastní vlákno. Jde o otázku, zda je lepší nadefinovat si mnoho jednoduchých tříd a potom v HTML psát např.
<div class="aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll">
, nebo definovat jen málo tříd, zato pekelně složitých, a v HTML psát jen
<div class="aaa">
, kde potom všechno je v jedné třídě:
.aaa { todle; a tohle; a tamto; a taky; toto; a to; i to; a jeste; taky; tamdleto; a nezapomenout; na; tuhlencto; }


Momentálně kráčím po té první cestě, ale to moje CSS už má díky různým systematicky odstupňovaným hejnům marginů, borderů, widthů a heightů, fontsajzů a lajnhajtů víc než 100 kB, připadá mi veliké, začínám se v něm ztrácet a navíc se obávám, že ještě poroste. 80 až 90% těch tříd ve skutečnosti nepotřebuju a jsou tam jen proto, aby se mi snadno ladilo HTML, protože mám v CSS souboru například toto:

.mptaa { margin-top:0px; }
.mpta { margin-top:0.5px; }
.mptb { margin-top:1px; }
.mptc { margin-top:2px; }
.mptd { margin-top:3px; }
.mpte { margin-top:4px; }
.mptf { margin-top:5px; }
.mptg { margin-top:6px; }
.mpth { margin-top:7px; }
.mpti { margin-top:8px; }
.mptj { margin-top:9px; }
.mptk { margin-top:10px; }
.mptl { margin-top:15px; }
.mptm { margin-top:20px; }
.mptn { margin-top:25px; }
.mpto { margin-top:30px; }
.mptp { margin-top:40px; }
.mptq { margin-top:50px; }
.mptr { margin-top:60px; }
.mpts { margin-top:70px; }
.mptt { margin-top:80px; }
.mptu { margin-top:90px; }
.mptv { margin-top:100px; }
.mptw { margin-top:130px; }
.mptx { margin-top:160px; }
.mpty { margin-top:200px; }
.mptz { margin-top:300px; }

Čili arzenál marginů. Třídy na margin-top začínají řetězcem mpt a poslední písmenko je podle abecedy. To vím zpaměti a když něco ladím, tak nemusím pořád lozit do CSS nebo tam neustále něco definovat, protože už to je předdefinované. V HTML sice přebytečné třídy (snad) nemám, ale v CSS ano (to vím). I to je samozřejmě nevýhoda, protože to CSS-soubor nafoukne. Ale přece jen – ten je aspoň jenom jeden, zatímco HTML-souborů může být mnoho. Přesto jsem nerozhodný, co je lepší – definovat třídy vždy jen podle konkrétní potřeby, nebo tak jak to dělám, nadefinovat je do zásoby. Práce v HTML pak sice odsejpá, ale právě za cenu toho, že mám veliké CSS.

Další výhodu to má v tom, že můžu snadno zkoušet. Mám-li pocit, že nefachá margin-bottom tak jak má, dám na zkoušku margin-bottom 100 nebo 200px (název příslušné třídy má 4 znaky) a kouknu, zda to vůbec reaguje. Na paddingy naštestí ještě moc nedošlo, ty mám (aspoň zatím) jen takové, jaké opravdu konkrétně potřebuju. Už mě napadlo, zda tak nějak nevzniká vlastní redakční systém. Vzniká? Kdybych se naučil ještě PHP? (Což ovšem v blízké budoucnosti spíš nehrozí.)

Koukám, zas nějak moc kecám. Shrnu to:

Možnost A: Spousta jednoduchých tříd, veliké CSS plné zbytečností, zato pohodlná práce v HTML. Taky HTML trošku větší, protože je nutno přidělovat více tříd.
Možnost B: Málo pekelně složitých tříd, všechny jen podle konkrétní potřeby, úmorné ladění v HTML kvůli nutnosti neustále kmitat mezi CSS a HTML. Když něco nefunguje, musí se to dělat v CSS, nelze pouze odkázat v HTML na třídu v CSS už existující. Prase aby se v tom vyznalo. Zato (asi) menší objem dat jak v HMTL, tak v CSS.

Tři otázky:
1. Co je lepší, A nebo B?
2. Vzniká cestou A redakční systém?
3. Jak to děláš ty, ty, ty a ty? (Tady všude seděl. :-)

Děkuji předem za plodnou diskuzi.
Str4wberry
Profil
1. Co je lepší, A nebo B?
Podle mě je ideální stav někde mezi. Rozhodně je nesmysl vytvářet si desítky tříd s marginem. Jeho doplnění do CSS souboru je s napovídajícím editorem minimálně stejně rychlé. Navíc osobně při vytváření HTML kódu rovnou vymyslím třídy a jejich umístění, tento kód už se potom víceméně nemění. Se vším si hraji v CSS.


2. Vzniká cestou A redakční systém?
Jaký redakční systém myslíš?


3. Jak to děláš ty, ty, ty a ty?
Snažím se vymyslet, jaké hodnoty mají mezi sebou souvislost. To, že má hlavní nadpis stránky a číslovaný seznam mít stejný margin, neznamená, že jim přiřadím „class=mpta“ — prostě ho přidám do „h1 {}“ i „ol {}“. Kvůli jedné vlastnosti zpravidla nemá cenu vytvářet třídu. Ještě jsi zapomněl na možnost, kdy vyjmenuješ selektory, které dostanou stejné vlastnosti — „h1, ol {}“. Použít jakousi „univerzální třídu“ může mít smysl například u barev, kdy každému prvku, který má mít požadované pozadí, přiřadím třídu. Přijde mně to někdy přehlednější, než přes dva řádky napsané selektory, což je druhá možnost.
Sirius
Profil
Petr ZZZ:
1. Co je lepší, A nebo B?

Pro ladění mít takhle uděláné marginy, proč ne. (Já teda radši přepisuju čísílka :) ...) Ale opravdu jsou potřeba ve výsledku? Není lepší nadefinovat si pro každou věc samostatnou třídu se všema vlastnostma a nechat v CSS jenom to co je tam opravdu třeba? Občas z výslednýho CSS osekám i dobrou čtvrtinu, protože je zbytečná.
Taurus
Profil
Petře, popisuješ B jako pekelně složité třídy, ale ony složité nejsou. Hned máš hezky pohromadě všechny vlastnosti objektu. Nejlepší je zlatá střední cesta, jak psal Str4wberry.
Mějme situaci, kdy na stránce jsou rámečky s textem zarovnaným na levou stranu a jeden budeme potřebovat napravo.

Je zbytečné mít
.ramecek {
  margin: 5px;
  padding: 5px;
  border: 1px solid #f7f7f7;
  line-height: 120%;
}
.left {text-align: left}
.right {text-align: right}

<div class="ramecek left">...</div>
<div class="ramecek left">...</div>
<div class="ramecek left">...</div>
<div class="ramecek right">...</div>


protože stačí následující
.ramecekL, .ramecekR {
  margin: 5px;
  padding: 5px;
  border: 1px solid #f7f7f7;
  line-height: 120%;
  text-align: left;
}
.ramecekR {text-align: right}

<div class="ramecekL">...</div>
<div class="ramecekL">...</div>
<div class="ramecekL">...</div>
<div class="ramecekR">...</div>


Ještě flexibilnější je zápis níž, .right lze napasovat kamkoli
.ramecek {
  margin: 5px;
  padding: 5px;
  border: 1px solid #f7f7f7;
  line-height: 120%;
  text-align: left
}
.right {text-align: right}

<div class="ramecek">...</div>
<div class="ramecek">...</div>
<div class="ramecek">...</div>
<div class="ramecek right">...</div>


Já mám své uni.css s globálním nastavením a šablonu obohacuju/mažu dle projektu. Je potřeba se prostě přizpůsobit situaci a nezajít do žádného extrému z jakékoli strany, které popisuješ.
Petr ZZZ
Profil
Str4wberry:
Se vším si hraji v CSS.
Asi to je ta lepší varianta, vyžaduje ale zběhlost v kódování, která mi chybí. Když něco nefunguje jak má, tak ty asi hned víš čím to je, já často musím zoufale hledat. Ta hejna tříd mi to hledání usnadní.

Jaký redakční systém myslíš?
No vlastní. Vlastní redakční systém. Ale možná mám zcestnou představu o tom, co to je, redakční systém. Nikdy jsem s žádným nic nedělal, jenom jsem si přečetl co to je ten wysiwyg, a protože mám radši, když vím co a proč dělá, rozhodl jsem se tématem wysiwyg vůbec nezabývat. Možná ale je CMS něco jiného než wysiwyg a já to nevím. Je to něco jiného?

h1, ol {}
To občas taky dělám, že dám různým tagům stejné vlastnosti. Někdy jsou z toho zmatky, když se to bije s nějakými jinými definicemi, ale naštěstí takové zmatky nejsou často.

Sirius:
Pro ladění mít takhle udělané marginy, proč ne. (Já teda radši přepisuju čísílka :)
Já nejdřív dělal třídy jen takové, jaké potřebuji, ale začalo jich přibývat, nadešel okamžik, kdy už jsem nevěděl, co která dělá a pokaždé jsem se musel koukat, a pak jsem se rozhodl k tomu radikálnímu kroku vytvořit podle nějakého systému ke každé vlastnosti arzenál tříd: mpta, mptb, mptc (podle "vzoru" margin-pixel-top-a atd..., podobně mpra, b, c, d..., mpba, b, c, d..., mpla, b, c, d..., - tedy margin-pixel-right-a, margin-pixel-botoom-a, margin-pixel-left-a atd...
Ale už těch tříd mám prostě moc (ono to pokračuje dalšími vlastnostmi, např. všemi 216 bezpečnými barvami na popředí, na pozadí a na border – to je dalších 648 tříd atd...), tak zas začínám přemýšlet, zda to je opravdu dobrá cesta. Osekat výsledek by bylo hezké, ale to by znamenalo kontrolovat desítky HTML souborů, jaké třídy se v nich opravdu vyskytují.

Taurus:
...jako pekelně složité třídy, ale ony složité nejsou.
Kdybys viděl moje třídy... :-)

přizpůsobit situaci a nezajít do žádného extrému z jakékoli strany
To je svatá pravda, ale horší je to s realizací. Určitě máš pravdu v tom, že elegantní řešení je využívat defaultních nastavení a dědění vlastností. Ale to se musí umět, a já se holt musím ještě hodně učit. :-)

Kluci, díky moc za cenné podněty, já už si to nějak přeberu, ale jedno je jisté už teď: Zase jsem o kousek dál!
panther
Profil
Petr ZZZ:
já často musím zoufale hledat.
doporučuji doplňky - ve FF je dobrý Firebug (příp. Webdeveloper Toolbar), ostatní prohlížeče jistě taky něco mají - nepoužívám.

Ta hejna tříd mi to hledání usnadní.
v začátcích ano, ale špatných návyků se budeš těžko zbavovat.

Možná ale je CMS něco jiného než wysiwyg a já to nevím. Je to něco jiného?
redakční systém, neboli CMS je systém, díky němuž můžeš spravovat obsah stránek, aniž bys musel zasahovat do kódů stránek. Data se čerpají z DB nebo souborů. Součástí většiny (a pro veřejnost každého) redakčních systémů je i WYSIWYG editor.

nadešel okamžik, kdy už jsem nevěděl, co která dělá
dost záleží na pojmenování. Navíc, nemusíš používat všude jen třídy - často se dá vystačit s třídou/id nadřazeného prvku. Myslím, žes zatím nepochopil širší základy CSS.

Ale to se musí umět, a já se holt musím ještě hodně učit. :-)
tohle se asi nedá naučit, to přijde s praxí. Teď ti je popřát, aby ses u těch svých tříd nezahrabal a dokázal jsi udělat tenhle krůček.
Sirius
Profil
Petr ZZZ:
kontrolovat desítky HTML souborů, jaké třídy se v nich opravdu vyskytují

To se dá krásně udělat za pomoci PSPadu, hledáním řetězce ve zvolené skupině souborů. Ale je to práce navíc no. Každopádně je otázkou jestli má smysl vytvářet ze začátku tolik tříd, jestli opravdu nebude vy výsledku jednodušší a efektivnější vytvořit opravdu jen to co je potřeba. Třeba ohledně těch bezpečných webových barev, osobně si myslím, že nejsou potřeba. 216 barev je málo co se barevnosti týče, ale zase hodně na to aby každá měla svoji třídu.
Plaváček
Profil
Petr ZZZ:

Obávám se, že na to celé jdeš špatně a nepochopil jsi ještě přesně sílu a možnosti kaskádových stylů. Co zkusit tuhle knihu? http://knihy.cpress.cz/Pocitac/Book.asp?ID=1394
Petr ZZZ
Profil
Díky moc za všechny podněty a nápady! Že jsou styly kaskádové, už jsem párkrát četl, je ale možné, že zatím spíš jen tuším, co se za tím skrývá, a naučit se s tím pracovat mi ještě chvíli potrvá. Dík i za tip na knížku!
Plaváček
Profil
Petr ZZZ:

Je třeba zvládat tři základní pojmy: kaskáda, dědičnost, specifičnost. Kdysi vycházel Pixymu zajímavý seriál, většina v něm obsažených věcí stále platí: http://www.webtip.cz/art/wt_tech_html/wt_cssserial_004.html

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: