Několik vzájemně nesouvisejících poznámek…

Dirk zmiňuje také nevýhody resetovacích CSS: Meyerova a YUI. Dá se souhlasit s tím, že reset, který mění nativní způsob zobrazování prvků (neboldový nebo seznamy zbavené odrážek) nám trošku přidává práci.

Ostatně, nic takového mě neťuklo, což bude tím, že všechny CSS frameworky, které jsem dosud použil, tyto vyresetované vlastnosti vracely zase zpět. Taky zde slyšíte absurdno a humor?

Neměl jsem tušení, že jeho YAML využívají takhle velké německé weby — Stern, ZDF … To je slušný úlovek! Ale při proklikání webu jeho frameworku vám to dojde — je zde uplatněna zásada, že nikoliv zdrojový kód, ale dokumentace a informační ekosystém dělí technologie na úspěšné a neúspěšné.

Závěrečný výkřik k prezentaci zní: Forma! Vážně — dělal ji člověk, který ví, že forma a obsah se nesmí rozcházet a z každé slídy je patrná (až se chce klišovitě říct německá) preciznost a hlavně úcta a empatie vůči publiku a jeho tužbě nikoliv jen vzdělávací ale také emocionální. Tuzemští prezentující, zamyslete se nad tím. .-)

Cituji z článku Roberta Nymana o objektovém CSS:

As you might be aware of, using good semantics is very important to me, and when it comes to both elements being used as well as the naming of CSS classes, I believe it should contain a meaning for what it will contain. OOCSS contains class names like .leftCol, .rightCol, .body, .h1, .h2 etc. And to me, and what I believe is to be in line with the notion of the semantic web, is that one of the fundamentals with CSS class names is to not use class names which describes the actual presentation/layout, but rather what it will contain.

…

But, I suggested using other names that would have more meaning and be easy to understand at the same time, like .main-heading, .complementary etc. The reply I got was that she had tried it, but “It was too hard for people to remember it”. And that I’m mot just buying. Sure, .rightCol might be a tad easier to remember, but just going the easiest route time doesn’t always make it right.

Všimněme si, že autoři se při argumentaci k používání obsahově popisných názvů tříd zaštiťují správností a odkazem na sématických web. Ale co je správné, pro koho a v jaké situaci, že?

Myšlenka sémantického webu — jako světa kde stejný typ informací je stejným způsobem označen — je samozřejmě ve velkém množství situací užitečná. Musí ale usnadňovat orientaci v kódu za účelem pochopení obsahu nejen strojům, ale především lidem.

Nicolle Sullivan, autorka OOCSS, se rozhodla, že názvy tříd v jejím CSS frameworku budou blíže vizuálnímu vnímání (říká hezky „vizuální sémantika”) než klasicky vnímané sémantice obsahové. Tedy .leftCol raději než .complementary.

Být autorem CSS frameworku — tedy technologie jejíž použití vnímám nikoliv univerzálně, ale velmi specificky — rozhodnu se stejně.

Argumentem mi bude právě čitelnost a zapamatovatelnost. Vždyť jak jinak bych chtěl svůj framework rozšířit mezi lidi! Jak jinak bych chtěl, aby jej bez manuálu v knižním vydání a vyfintěných PDF-taháků na populárních webdesignérských serverech používal také někdo jiný než autor sám?

V HTML/CSS kódu psaném na míru obsahu dávám vždy přednost pojmenování tříd takovému, aby co nejvíce odpovídaly významu obsahu, ale v konkrétních případech je lepší dát přednost popisu vizuální prezentace.

Nedělejme ze sémantiky univerzálně platné náboženství. Žádné takové neexistuje ani ve webdesignu.

Jak u tebe vznikla potřeba zabývat se CSS frameworky? Přišel impuls z vlastní práce nebo tě oslovily diskuze mezi vývojáři?

Přišel s požadavkem jednoho z mých klientů, který potřeboval optimalizovat webovou stránku pro tisk. Strávil jsem asi měsíc zkoumáním obecné roviny čitelnosti, typografie a tisku webových stránek. Tak vznikl Hartija, univerzální stylopis pro tisk webových stránek. Jen jsem chtěl sdílet můj výzkum se světem.

Každý z mých CSS projektů má jiný příběh. Emastic jsem například vybudoval proto, aby zlepšil některé funkce „starých” CSS frameworků. Přidal jsem jsem navíc nějakou použitelnost, em-layout a pružný grid. Ve své době byl Emastic, jehož grid.css soubor měl jen 2kB, první frameworkem pro layout v kategorii lehké váhy.

Zajímavý je asi příběh CSS grid frameworku na jeden řádek (1 line CSS Grid Framework), který slouží pro budování layoutových systémů založených na 1, 2, 4, 8, 16 … sloupcích a který v CSS zabírá pouhý jeden řádek. Tento projekt nemá praktický účel v „reálném životě”, ale byl jedním z mých nejnavštěvovanějších projektů.

Geekové, zejména pak programátoři, jsou citliví na spojení „CSS framework”. Například v případě Hartija je otázka, zda je slovo framework na místě. Osobně mám pro ne-layoutové CSS projekty rád název užívaný v YUI knihovně - „základna”. Řešíš rozdíl mezi knihovnou a frameworkem nebo myslíš, že je to jedno?

Ano, to je pravda – programátoři říkají, že s CSS nemůžete vybudovat programátorské frameworky jako PHP framework nebo javascriptové frameworky.

A – na druhou stranu – CSS geekové říkají, že „CSS frameworkem” se může nazývat jen CSS knihovna s alespoň resetovací, layoutovou a typografickou funkcí.

Vynálezce pojmenování „framework”, Jeff Croft, řekl:

„Absolutně souhlasím. Jsem z toho také rozčílený. Mám pocit, že jsem udělal svým způsobem totéž když jsem psal ten článek pro ALA (A list Apart, pozn. překl.), ale (nevědomky) jsem mu dal velmi polarizující jméno („CSS framework”), které od té doby posunulo diskuzi špatným směrem. Lidé se stali tak posedlí svou averzí na slovo „framework”, že ignorovali hlavní myšlenku článku: že společné návrhové vzory a znovupoužitelný kód je udělají efektivnějšími.”

Takže nemáme standard co vlastně „CSS framework” je a pokud jasné standardy neexistují, je velmi těžké určit, kdy název „CSS frameworky” používat.

Podle mého názoru CSS frameworky vytvářejí znovupoužitelný CSS kód vyšší úrovně.

Tedy každá CSS knihovna, která vytváří znovupoužitelný CSS kód vyšší úrovně, může být nazývána frameworkem.

Když se podívám na typografické vlastnosti tvých CSS frameworků, vidím, že v porovnání s ostatními obsahují určitou osobitost a subjektivitu. Blueprint, Baseline a ostatní se snaží především o čitelnost a subjektivitu nechávají na autorovi stránek. Nemyslíš, že to je nevýhoda tvých frameworků, která brání širšímu použití?

Typografie v Emastic byla pro mě výsledkem hledání perfektní webové typografie. Experimentoval jsem s Arialem a Georgií, které jsou asi nejpoužívanějšími fonty na webu. Vždy s snažím míchat různá písma pro nadpisy a pro obsah. Proto jsem použil Georgii pro nadpisy a Arial pro text.

Emastic je postaven na vertikálním rytmu založeném na základním účaří („baseline grid”, pozn. překl.). Pokud tedy máte pružný sloupcový layout a pokud chcete, aby typografie fungovala dobře v téměř všech případech, může být soubor typography.css z Emastic dobrou volbou. Strávil jsem hodiny jemným dolaďováním Arialu s cílem zlepšit čitelnost a jasnost. Uvnitř Emastic najdete také plugin gadgets.css, který přidává nějaké extra vlastnosti jako barevnou paletu nebo jiné malé „gadgety”.

Tady je pár příkladů typografie pomocí Emastic: http://www.allapis.com/emastic/typography.html a http://www.allapis.com/emastic/TypographyPulp.html

Na co myslíš, že se můžeme v technologii „CSS frameworků” ještě do budoucna těšit? Není to téma vyčerpané?

Éra CSS frameworků dokonce ještě nezačala. Dneska nikdo nepíše javascriptový kód, všichni užíváme nějaký framework typu jQuery, Moo …

Mnoho vývojářů a designérů bude milovat rychlá řešení za účelem rychlejšího vývoje a možnosti věnovat čas jiným problémům jako použitelnost a design.

Neříkám, že CSS frameworky jsou perfektním řešením pro každý problém, ale mohou vám pomoci vyvíjet rychleji bez práce na kompatibilitě mezi prohlížeči.

Je to zajímavé téma k diskuzi. Doufám, že mnoho ze čtenářů bude na WebExpo a tak můžeme v rozhovoru o budoucnosti CSS frameworků pokračovat.

Podle programu WebExpo máš na své přednášce docela dost zdánlivě ne až tak souvisejících témat – CSS frameworky, grid a zlatý řez. Na co přesně se můžeme těšit?

Skutečně se na přednášku na WebExpo těším. Zhodnotím nějaké výhody a nevýhody CSS frameworků, ale hlavně budu mluvit o tom, proč jsem se rozhodl vytvářet a jak jsem navrhoval některé ze svých 7 CSS knihoven. Také budu mluvit o designu založeném na gridu a o designu s ohledem na zlatý řez. Věřím, že si WebExpo všichni užijeme a navzájem se od sebe něco naučíme. :-)

Díky za rozhovor a budeme se těšit v Praze!

English original. Vladimirův blog.

Jiný rytmus

Baseline se od ostatních (mně známých) liší hlavně principem vertikálního gridu. Blueprint a další jsou založeny na „přilepování prvků” k opakující se výšce řádku (line-height). Baseline jako jednotku vertikálního rytmu volí baseline, nebo-li česky účaří.

Typografové by k tomu asi mohli říct více po řemeslné stránce. Osobně můžu mluvit spíše o příjemnějším pocitu zejména v hezké provázanosti nadpisu první až třetí úrovně s následným textem.

A když necháme emoce stranou, můžeme říci, že v případě zarovnání na účaří bude pro kodéry jednodušší nalezení nechtěných odchylek.

Nalevo opět Blueprint, napravo Baseline:

Když se podíváme na celou vyrenderovanou stránku, vidíme že Baseline ztrácí svou eleganci u nadpisu 5. a 6. úrovně (ale kdo z vás je naposledy skutečně použil?), pak v případě použití divu uprostřed textového bloku (to taky není příliš častá situace).

Baseline se ve srovnání tváří ošklivě na formulářové prvky. On je hezké umí, ale musíte mu dodat zvláštní HTML kód. Ano, srovnání v případě formulářů ztrácí trochu smysl, ale pokud třeba prototypujete a nechcete upravovat HTML, hodí se to vědět.

HTML5 ano, IE6 ne

S Baseline sice dostanete i nějaký horizontální grid pro tvorbu layoutu, nicméně nemám pocit, že by na něj byl kladen důraz. Každopádně v balíku dostanete PSD s mřížkou a podporu nových prvků HTML5. Autor (Stéphane Curzi) se naopak rozhodl, že nebude trávit noci s laděním frameworku pro MSIE 6.

Baseline CSS je pro mě svou lehkostí jako základ pro stavbu uživatelského rozhraní webu velkou konkurencí Blueprintu. Budu si ale dávat pozor na možné rozdíly v prohlížečích, na které autor upozorňuje. Naopak bych ho nedoporučil pro prototypování. Tam raději sáhnu po Blueprintu, Bluetripu nebo Tripoli.

Na ose designér — kodér — programátor najde Baseline využití někde mezi designérem a kodérem.

Nejlépe je na tom Blueprint CSS, kde - alespoň podle Githubu - skupina vývojářů neustále něco kutí. Jsou to ale spíše drobnosti nebo “věci kolem” a od první verze Olafa Bjorkoye se vlastně nic zvláštního nestalo.

Takový 960 je na tom podobně - podívejte se na blame hlavního CSS souboru na Githubu a uvidíte, že od únorového počátečního pushe Nathan Smith poslal jen nějaké drobnosti.

Poslední změna v YAML CSS pochází z ledna a je pravděpodobné, že takto bychom mohli pokračovat.

Je možné, že potenciální možnosti vývoje univerzálních CSS frameworků v jejich současné podobě jsou vyčerpané a dále se budou vyvíjet spíše frameworky jednoúčelové nebo ono ulehčování práce s CSS půjde spíše směrem metajazyků typu SASS. Co myslíte?