Články na téma „css frameworky”


18. 12. 2009

Názvy tříd v CSS a přehnaná láska k sémantice

„Sémantický web” je prý v kolizi s pojmenováváním tříd v CSS podle vzhledu prvku. Vážení sémantičtí maniaci, ukážu vám případ kdy vaše náboženství neplatí.

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.

Komentáře

Tagy: css sémantika spravovatelnost kódu css frameworky články

11. 10. 2009

Vladimir Carrer: rozhovor na téma CSS frameworky

Vladimir CarrerVladimir bude za pár dní přednášet na WebExpo. Jelikož se naše oblíbená kódérská témata částečně překrývají, vyměnili jsme si pár e-mailů a s jeho svolením publikuji jako rozhovor zde, na Vzhůru dolů.

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.

Komentáře

Tagy: css frameworky efektivita články webexpo

7. 7. 2009

Jak moc se vyvíjejí univerzální CSS frameworky?

Téměř vůbec. Ačkoliv alespoň podle Google Trends jejich vyhledávanost stále roste, když se zblízka podíváte na vývoj některých z nich, máte pocit, že příště budete potřebovat prachovku.

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?

Komentáře

Tagy: 960 grid system blueprint-css css css frameworky efektivita články

Web Statistics