CSS Frameworky jsou hovadina

Sledujem tuto debatu od zaciatku [27. 08. 2009, 10:26 Martin] a tak ma napadlo aky genialny clanok by sa dal na tuto temu napisat,

hruba struktura:
ndpis: Vyhody a nevyhody pouzitia CSS Frameworkov v praxi.

v prvom rade co je to CSS framework

* typography.css for basic typographic rules,
* grid.css for grid-based layouts or
* layout.css for general layouts,
* form.css for basic form styling,
* general.css for further general rules
...........

vycet aspon tych niektorych CSS frameworkov, ako 960grid, blueprint, bluetrip ...

popis ako sa da s CSS famom pracovat co je vhodne a co by sa mohlo vylepsit

strucne zhodnotenie autora
doporucenie userom aby si vyskusali viacero sposobou prace a vybrali si ten spravny a pre niech najpohodlnejsi, vsak vynemit ho mozu kedykolvek im nebude vyhovovat, ine je navrh webu kde to clovek robi systemom 1 projekt/ 1 mesiac, ine je ked robite strukturu povedzme spavodajskeho webu kde je 50 roznych sablon a ine je ked robite 50 webov / 1 mesiac

cielom je ale vzdy ulahcit si pracu !
a havne nepisat zbytocne 2x ten isty kod pokial to nieje nutne

par liniek na externe zdroje

to ze autor povazuje CSS framework na nevhodny doplnok pre svoju pracu je uplne v poriadku to vsetci respektujeme. ide o sposob podania nazoru/informacie ked sa uz teda o nu chcem podelit.

co z toho ma autor
viac navstev, kvalitnejsi obsah, a vytvara informacnu hodnotu ktora zaujme mozno aj jeho buducich klientov...

jasne da sa napisat ze nemam rad spenat a k tomu netreba pisat preco, alebo mozem napisat o zelenine a povedat ze mne sice spenat nechuti ale ked chcete vyskusajte si ho a spravte si nazor :-)

[3] Já myslím, že hlavním problémem, proč se nepoužívají tabulky je, že se proti nim řvalo. Prostě se rozšířil názor, že tabulky jsou fuj, nic jiného.

Většina nevýhod tabulek je jenom uměle vymyšlená, nebo nafouknutá.

Upřímně, CSS by byl daleko užitečnější nástroj, kdyby opravdu nebyl tak hrozně špatně zprzněn. Je to špatně navrhnutý standard, a normy jednotlivých verzí si často vzájemně odporují.

Jinak souhlasím s [1], CSS jsou udělány principiálně nedokonale. Webdesigneři to nevidí, protože se k ničemu lepšímu nedostali. Ale řada programátorů vidí, že CSS je prostě nedokonalá věc, a kdyby se programovalo grafické rozhraní podobnými nástroji jako CSS, tak jsou programy mnohonásobně dražší.

CSS je skutečně velmi neforemný nástroj. Na definici celého layoutu je použitelný jen do jisté míry. Ale pokud strávíte celý život jen s CSS a weby, těžko si představíte, že by to mohlo být lépe.

"Protože dříve či později budete chtít to co je teď vlevo dát doprava a to co je teď červené mít zelené..."

A teď vážně - kolikrát za život jste u nějakého hotového projektu tohle dělal? Odmysleme si nějaké skinovatelné projekty a projekty vyvíjené rovnou online.

Zdá se mi totiž tento argument úplně irelevantní a to nechci css frameworky nijak hájit, natož podporovat.

Mate pravdu, ale hrozite se marne... kutilstvi ktere vzdy spolehlive vezme veci za nohy misto za drzadla a zatlouka srouby sekerkou "protoze to taky de" je nevykorenitel­ne.....

Absolutne s tebou suhlasim. Hodne ludi nepochopilo css spravne. Na druhu stranu aj CSS framework treba pouzivat spravne.

CSS framwork je pohodlne pouzitie pokial to zacne uz pri designe, mal by byt navrhnuty na grid css frameworku. Ide vlastne len o to ze mas definovanu hlavicku conteiner, slidebar .. a vsetky maju urcitu sirku ktoru mas zadanu v designe. pokial napr na slidebar ktory ma byt 310px pouzijem triedu span-6 (ktora ma v frame definovanu sirku 310px co ke 6 stlpcekov na mriezke) je to pohodlne aj ked si to mozem napisat tiez sam do css,

Ale kazdy kto robi masove weby pouziva / opakuje urcite casti kodu, html ,css php. Nebudem predsa s kazdym projektom nanovo stylovat kontaktny formular ked to mam raz hotove a zobrazi sa to v vsetkych browsoch rovnako pouzijem copy & paste a to je nieco co uz povedzme mozem mat napisane v nejakom mojom defaultnom style.css ktory pouzivam a dalo by sa to nazvat ako framework ? Podla mna dalo.

K tomu ze ma niekto v css .red {color:green;} :-) to je fakt ze niekdy clovek v kode najde hovadiny ale to uz je coder od codera.
pokial ale niekto meni zasadne strukturu webu slidebar z lava do prava a podobne ja by som to uz zaradil do kategorie redesign kde pokial to meni v template nejakeho redakcneho systemu tak to tak ci tam meni v jednom PHP fajle a to zase nieje take tragicke zmenit span-8 na span-9

Ved kolko krat do mesiaca prerabame strukturu webu ?
Pokial sa pouziva CSSfram spravne ci uz nejaky bezne dostupny alebo si niekto napise svoj kde je par tried ktore sa opakuju v kazdom webe, pripadne reset.css myslim ze to nieje na skodu.

Vtip je totiž v tom, že pokročilí webdesigneři dávno pochopili, že dávný mýtus "při redesignu jen změním CSS" je nebetyčná hloupost. Vždyť i ta vaše CSS zen garden v html kódu obsahuje předem připravené prázdné prvky, které tam nemají žádný sémantický smysl.

Dále se ukázalo, že vlastně celé CSS jako nástroj pro definici layoutu je slepá ulička, která vyžaduje řadu přiohnutí. A proto hotová sada takových přiohnutí je CSS framework. Výsledek sice není ideální, ale aspoň něco. Tvůrci CSS byli totiž takoví ignoranti, že se nepoučili v jiných nástrojích pro layout, které se ukázaly jako úspěšné (delphi, java, .Net - všechny něco takového mají a mnohem lepší než css) a vymysleli vlastní hloupý hybrid.

Ony ty tabulky vlastně nebyly vůbec tak špatné. A dokonce se takové weby daly i pěkně tisknout. Daly se udělat kvalitní fluid layouty. CSS prosadili akademiční fanatici a bohužel uspěli. Místo toho jsme měli mít rozšiřitelnou sadu layout managerů, jako v každém normálním propgramovacím jazyce (třeba jako tohle http://jx.myofiz.com/jxviewport.html ). CSS bohužel zazdilo tyto snahy na 20 let.

Já z CSS frameworků taky nejsem na větvi a přišly mi jako skopičina a v mnoha ohledem na ně koukám stejně, jako je popisováno v tomto příspěvku. Ale na druhé straně je potřeba rozlišovat weby. Něco jiného je víceméně statický web připravený designérem a kodérem, a tam imho tyhle věci nepatří - kodéři mají označovat segmenty sémanticky a stylovat je podle potřeby. Ale vedle toho jsou taky weby, kde kodér vytvoří jen kostru stránek a celý jejich hlavní obsah průběžně tvoří nějací redaktoři, vědci, návštěvníci atd. A tady ty CSS frameworky zase mají své místo, někdy jsou dokonce k nezaplacení. Jaké mám jako autor takových šablon možnosti?

a) nedovolím publikujícím v CMS téměř nic, nejvýš naprosto minimalistické formátování. To ale bude pochopitelně pro většinu klientů nepřijatelné.

b) dám jim do ruky nějaký wysiwyg editor, který produkuje obsah s inline styly, kterými se dají jednak napáchat nedozírné škody, jednak jsou takové styly "natvrdo zadrátované" a kpo redesignu webu zůstane obsah v původní nezměněné podobě. To by mělo být nepřijatelné zase pro webdesignéra.

c) dám uživatelům k dispozici metaznačkový aparát, který zajistí formátování obsahu podle jejich potřeby – to jsou ty třídy "bold", "cerveny" nebo "sloupec33". Uživatelé pak mohou produkovat sémanticky čistý kód, který je libovolně stylovatelný pomocí CSS.

To poslední je v takovém případě imho ideální řešení a je to pravé pole působnosti pro CSS frameworky: do šablon různých CMS, blogovacích systémů, emagazínů apod. Není web jako web a co je někde nesmysl, jinde může být nanahraditelné.

Kdyz on je s tabulkovymi layouty problem s pristupnosti. Nehlede na to, ze tabulka v POSH (Plain Old Semantic HTML) slouzila jen a pouze k zapisu tabelovanych dat, jeji pouziti pro upravu layoutu je Vasimi slovy "priohnuti" HTML. Tabulka je urcena pro neco jineho, nez je rozlozeni prvku na plose. O rozlozeni prvku se ma starat renderovaci jadro prislusneho zobrazovaciho zarizeni a designer nemuze pocitat s tim, ze neco bude na nejakem presnem miste. Aby s tim mohl pocitat pro urcity druh zarizeni slouzi prave CSS a mimo jine opravdu slouzi k oddeleni prezentacni vrstvy od obsahu.

[4] Jste další z těch, co selektivně zapomněli na všechny problémy tabulek (především s přístupností, pořadím a rychlostí vykreslování, nemožností alternativních designů, problémy se "skinováním" atd.) a pamatují si jen ta pozitiva. Jistěže tabulkové layouty mají spoustu pozitiv, wtz. Jenže některá negativa jsou nepřekonatelná, a to je hlavní důvod, proč se to dělá jinak, někdy třeba složitěji a kostrbatěji. Pokud vám ale ta negativa zrovna nevadí, nic vám přece nebrání dělat tabulové layouty i nadále. Stačí se podívat třeba na takový ExtJS...

Osobně s pojmenováním tříd class="left" nemám problém. Více jsem se rozepsal v článku http://blog.filosof.biz/uvaha-o-pojmenovani-trid/

[1] no to je právě to, že jsem to fakticky dělal 200× za poslední 2 roky - protože prostě mám HTML strukturu nadefinovanou jenom jednou už ve výchozí šabloně, takže prostě pro každý web děláme jiný vzhled s CSS. A změnit left na right je otázka jen změny dvou řádků CSS kódu, zatímco když bych měl tohle změnit v html, tak musím jít do všech PHP stránek, kde to je nadefinované.

[4] Zen Garden je udělaná schválně tak, aby to zvládli i úplné lamky a aby tam šly i úplné zhůvěřilosti. Prakticky všechny designy by šly udělat i bez těch prázdných divů.
Vůči css nemám větších námitek, až na jeho pomalý vývoj, kdyby tu všude bylo html5 a CSS3, tak si chrochtám

CSS je pro nejake fremaworky uplne k nicemu, protoze mu chybi rozumne prostredky pro abstrakci, i.e., promenne a vyrazy. takze to lidi resi takovyma hovadinama, ktere vlastne nic neresi.

[11] CSS3 už umí i proměnné a výrazy a samotná možnost použití značek, tříd a id mi dokáže dostatečně abstrahovat (tedy alespoň tak jak to chápu já).

A komu vadi, ze je v kodu "css .red {color:green;}". Me teda ne.

Rozhodne je to lepsi, nez to pojmenovavat jako barva1, barva2, barva3. Pak chci dat nejakou konkretni barvu, pro kterou mam nadefinovane CSS a opravdu nehodlam v CSS hledat, jakou barvu ma tato trida. Jinak receno, ja v CSS mam tridy jako .red, .green, yellow a ktere pouzivam v HTML. Kdyz potrebuji barvu zmenil, zmenim nazev tridy v HTML. A to, jestli to nekdo povazuje za hloupe, jeho problem, pro me je to minoradne prakticke.

Autor si krásně pohonil ego (a to dokonce ve třech odstavcích), předvedl, že "když mě to k ničemu není, tak to nesmí být k ničemu nikomu (není ta čeština krásná?)" a celou problematiku tak má vyřešenou. Slovy Pata a Mata: "A je to!"

Protože je ale na světě (naštěstí) víc tvůrců webu, než je autor a jeho kodéři (a jistě také mají 14 let praxe "a napsali tisíce řádek kvalitního objektového kódu" - koho mi to jen připomíná?), frameworky své místo mají.

Že třeba Blueprint obsahuje opravdu výborný reset (upraveny Eric Meyer's, který ale fakt dobře funguje), velmi dobrou typografii (jednotná baseline u všech elementů - pokud používáte v násobku výšky linky i výšku obrázků, vypadá to velice profesionálně), kompresor CSS v ruby (který právě naopak styly zmenšuje - takže onanie nad "tunami balastu" se nekoná), navíc je modulární - lze si vytáhnout jen to, co potřebuji, dále několik užitečných (a sémantických) tříd, clearfix, to autor asi neví a protože "CSS frameworky jsou hovadina", ani to nezjistí.

Framework je navíc modulární - sám si z něj vytahuji věci, které použiju. Navíc výroky o classe "red" jsou taky mimo. Možná se mýlím, ale používané třídy "success", "error", "clearfix" (jedny z více velmi užitečných) nikomu žíly neurvou.

Naopak výrok: "A změnit left na right je otázka jen změny dvou řádků CSS kódu, zatímco když bych měl tohle změnit v html, tak musím jít do všech PHP stránek, kde to je nadefinované.", svědčí o špagetovém návrhu CMS.

Omlouvám se za zvolený styl ala troll, ale prostě na hrubý pytel patří hrubá záplata.

Hahaha, to je zase zápisek. Pan Kapler nám sdělil, že je strašně šikovný, že už svou práci dělá strašně let a že je geniální protože mu na všechny typy webů stačí jedna šablona. Když jsem se tak díval na reference z webu, tak se ani moc nedivím. Ano, na tyhle typy webů fakt stačí pár divů a lze je sekat jak Baťa cvičky, ale ne všichni si vystačí s tak primitivními layouty.
Já jsem taky strášně šikovný, taky dělám weby a css strášně dlouho, ale fakt si s jednou šablonou nevystačím. A když si zákazník vzpomene, že sloupec už nebude vpravo, ale vlevo (fakt se mi to ještě za ta léta nestalo), tak si klidně v HTML název identifikátoru #levysloupec na #pravysloupec opravím. Za přehlednost kódu mi to stojí.

Celého článek by se dal s klidem zkrátit jen na tu poslední větu se kterou se i ztotožňuji. Zbytek mi přijde jako zbytečné slohové cvičení s informační hodnotou nula nula nic. Přemýšlím co asi pana Kaplera přimělo k sepsání tohoto textu.

Tomáš Kapler, specialista v oblasti internetového marketingu, konzultant v oblasti datových sítí a připojení k internetu - NECHAPE SMYSL CSS FRAMEWORKU. Je to logicke - svuj ke svemu, takze ostre k marketingu a NEPREMYSLET nad nejakym kodovanim wee...

Kazdy ke svemu...

[13] no mě tedy jo, asi proto, že zřejmě na rozdíl od vás pracuju v týmu, takže prasárny kterým rozumím já sám by těžko pochopil někdo další.
Samozřejmě pojmenovávat něco jako barva1, barva2, barva3 je podobná hovadina z úplně stejných důvodů. Máte to pojmenovat třeba "motto", "zvyrazneni, "nepodstatny_text" atd.

[14] [15] [16] pánové dovoluji si upozornit, že jste na mém blogu, který zobrazuje mé názory, nikoliv obecnou pravdu, klidně s nimi nesouhlaste, ale útok ad hominem si strčte do prdele

[14] díky za ten konstruktivní blok připomínek. Netvrdím, že neexistují css kódy, které by každý neměl používat standardně, ale tomuhle já neříkám framework a z těch frameworků tvoří malou, méně podstatnou část. Sám také používám na všech svých webech
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6 {
padding: 0;
margin: 0;
list-style: none;
}
body {
font-size: 62.5%;
}

A mám i obecnou třídu .hidden, kterou používám u věcí, které vím že nikdy chtít zobrazovat nebudu (1px obrázky ze statistik atp.)

To že nějaký framework říká, že mám používat třídu error či success je fajn (a přesně to odpovídá tomu, co jsem psal, jak máte své třídy pojmenovávat), ale vůbec nevím, proč by to měl nějaký framework předstylovávat, protože nevím jak vy, ale na mých webech bývají error i success pokaždé jinde a zcela jiné.

A že je nějak vyřešená typografie bla bla? To je právě ta blbost - kodér nemá co řešit typografii, od toho je grafik a kodér to má udělat přesně tak jak grafik navrhne. Samozřejmě když je někdo kodér samotář, který všechno ví a všemu rozumí, případně používá grafika, který je schopen tak akorát oříznout obrázek a nerozumí typografii, tak pak mu opět může nějaký styl od někoho, kdo tomu rozumí pomoci.

a komprimování atd. - jednak v dnešní době prakticky nepodstatné, neboť CSS jakkoliv velké je menší než třeba sebemenší obrázek na webu a načítá se jen jednou, jednak v pspadu si můžu dát přeformátovat CSS a rozdíl mezi mým a vaším bude minimální (navíc nejspíš dokonce já vyhraju, právě proto, že nepoužívám framework).

Jasně, můžu strávit hodinu s tím, že budu vybírat co zrovna z toho daného frameworku potřebuju a co ne, ale to mi přijde rychlejší to napsat celé znovu.

Specifická situace je pro velké skupinové weby - tedy když bude chtít idnes udělat nový web ze své skupiny, tak může jako "framework" použít nějaký svůj výchozí styl. Ale opět to není něco pro nějaký generický framework.

"To že nějaký framework říká, že mám používat třídu error či success je fajn (a přesně to odpovídá tomu, co jsem psal, jak máte své třídy pojmenovávat), ale vůbec nevím, proč by to měl nějaký framework předstylovávat, protože nevím jak vy, ale na mých webech bývají error i success pokaždé jinde a zcela jiné."

Protože Blueprint používám zejména na prototypování webů, administrace, kde můžu mít rozhraní jednotné. Navíc se to dá snadno navázat na automaticky generované "nevalidity" ze Zend Formu, Nette Formu apod.

"A že je nějak vyřešená typografie bla bla? To je právě ta blbost - kodér nemá co řešit typografii, od toho je grafik a kodér to má udělat přesně tak jak grafik navrhne."

90 % právě těch administrací a prototypů nemá typo žádné. Lepší pěkné, odladěné, které si ohnu, než žádné. A u spousty projektů to tak skutečně bývá.

Navíc framework řeší extrémnní případy, na které člověk většinou nevzpomene, jako jsou stylování vnořených elementů apod. Opět - myslíte při stylování na jednotnou výšku řádku? Nerozhodí Vám h2 v textu toto? V Blueprintu se bát nemusím.

"a komprimování atd. - jednak v dnešní době prakticky nepodstatné, neboť CSS jakkoliv velké je menší než třeba sebemenší obrázek na webu a načítá se jen jednou, jednak v pspadu si můžu dát přeformátovat CSS a rozdíl mezi mým a vaším bude minimální (navíc nejspíš dokonce já vyhraju, právě proto, že nepoužívám framework)."

Jistě, sám neformátuju, ve skutečnosti je kód z frameworku opravdu maličký a nijak nezdržuje. V tom případě ale padá Váš argument z článku.

"Jasně, můžu strávit hodinu s tím, že budu vybírat co zrovna z toho daného frameworku potřebuju a co ne, ale to mi přijde rychlejší to napsat celé znovu."

To je právě ono - já ten framework umím a mám ho nonstop poruce, když chci (řekněme) clearfix, tak ho už negooglím, sáhnu po řešení, které mi fungovalo Xkrát předtím a mám jistotu, že bude fungovat Xkrát poté.

"Specifická situace je pro velké skupinové weby - tedy když bude chtít idnes udělat nový web ze své skupiny, tak může jako "framework" použít nějaký svůj výchozí styl. Ale opět to není něco pro nějaký generický framework."

To je opět zjednodušující. Existují formulářové frameworky, tiskové frameworky, frameworky pro grid, frameworky s těmi užitečnými "classami". Situace je složitější, než jste ve svém blogpostu "bohorovně" sepsal - ostatně má reakce se jen nesla ve stejném duchu.

CSS jsem nikdy nepochopil, doted jedu v tabulkach kdyz potrebuju neco v HTML.

Pro srovnani se zkuste podivat na moderni LayoutManager ve Swingu. Resi to jen pozice, ale velmi dobre.
http://www.miglayout.com/

Když někdo umí dobře napsat strukturu html a css, tak nepotřebuje žádný hacky, nebo cizí frameworky. Nejlepší je si napsat svůj css "framework" a ten používat.

odpoved na 24:
jo pak prijde M$ s novym IE a musis to cele predelat aby to fungovalo, uzasnej novej IE8 zas renderuje jinak nez 7,6,5...

Souhlasim s autorem a zaroven nesouhlasim. Samozrejme kdyz se pise .. class="left" tak to je blbost a muze to psat nekdo, , kdo nechape ucel CSS. Jestli to nejaky framework dela, tak je to spatny framework... Ale kdyz nekdo napise ....class="mo­jeStrasneDule­ziteMenu", tak je to v poradku, protoze to ukazuje tridu (class) jisteho elementu, zatimco prvni pripad (class="left") nam intuitivne rika, ze jde spise o jakysi zkomoleny atribut toho elementu... Psat efektivne CSS neni lehke a uz ne efektivni. Proto frameworky (jestli jsou udelane spravne a umozni odstranit "spaghetti CSS code") jsou obcas i velice uzitecne...