17 komentářů k článku Směřuje CSS od preprocesingu k postprocesingu?:

  1. Aleš Roubíček

    Další krok
    Dalším krokem pro rozumný vývoj webových alikací je zbavení se globálních stylů a požití lokálních deklarací pro konkrétní komponenty. Nějaký náznak je ve WebComponents/Polymeru ale taková komponenta je změtí divného HTML/CSS/JS. Dalším řešením je React CSS, který rezignoval na CSS a stylopisy se píšou v JS. Zkoušel jsem to chvíli používat a výsledný (v browseru) kód je opravdu obludný.

    Co mě ale zaujalo je použití css-loaderu ve WebPacku. Tento loader umožňuje načítat styly, které potřebuje konkrétní komponenta, tak, že v kódu omponenty uděláme import stylů:

    import styles from '../css/components/foo';
    

    Ve vazbě styles pak máme jako vlastnosti jednotlivé třídy definované ve stylopisu. Ve stylech pak použijeme selector :local:

    :local(.my-foo-style) { }
    

    Loader pak může dělat s takovým názvem co potřebuje. Tj. vygeneruje globálně unikátní název případně ho může i snadno minifikovat. Pro nás ale zůstává kód stále čisté CSS.

    Ve spojení se zmiňovaným cssnext, konečně použitelné řešení na udržovatelné styly pro webové aplikace.

    1. Aleš Roubíček

      Re: Další krok
      Ještě jsem zapomněl zmínit jednu nevýhodu superlokálního CSS alà React CSS a tou je kontext, který globální selektory zvádají snadno, ale v Reactu se musí předávat jako stav a horkotěžko vypočítávat.

    2. Martin MichálekAutor příspěvku

      Re: Další krok
      Tohle vypadá dobře konečně i pro kodéra. Mrknu na to, dík moc.

  2. Ivan Nový

    K čemu by to mělo sloužit?
    K tomu, aby se věci měnily na jednom místě, nikoliv na padesáti, když potřebujete upravit vzhled stránky. Což je hlavní nevýhoda deklarativních jazyků. Grafický návrh stránky by měl začínat návrhem css mixinů, dekompozice na jednotlivé objekty by se měla udělat ještě před samotným grafickým návrhem. Dnes je prvotní funkce stránky, design jsou jen její šaty a ty musí být jednoduše zaměnitelné.

    1. tacoberu

      Re: K čemu by to mělo sloužit?

      K tomu, aby se věci měnily na jednom místě, nikoliv na padesáti, když potřebujete upravit vzhled stránky. Což je hlavní nevýhoda deklarativních jazyků.

      Cože?! Měl jsem za to, že je to přesně naopak. Deklarativní jazyky jsou vrcholem abstrakce. Popisování věcí (na jednom místě) patří mezi jejich doménu.

      1. karel

        Re: K čemu by to mělo sloužit?
        Ano dost daklarativnich jazyků je vrcholem,
        sranda často končí když chete pracovat smysluplně a mimo hranice tutorialu

    2. Aleš Roubíček

      Re: K čemu by to mělo sloužit?
      V ideálním světe by to tak mohlo fungovat, praxi se osvědčily přesně opačné přístupy. Mixiny se vytvářejí refactoringem opakujících se konstrukcí. Jednotlivé objekty se utvářejí během životního cyklu a často se měmí. Grafický návrh se vyvýjí společně se zbytkem. Jen to asi není statický bitmapový obrázek.

      1. Martin MichálekAutor příspěvku

        Re: K čemu by to mělo sloužit?
        Souhlas. Jen dodám, že ne každé použití CSS lze zobecnit do mixinů, proměnných atd. U aplikací to jde dobře, ale prezentační mikrosajty grafickou pravidelností neoplývají a oplývat nemohou.

        1. Ivan Nový

          Re: K čemu by to mělo sloužit?
          A měly by. Zobecnit to samozřejmě jde. Když se dříve psaly texty v editorech, bylo rozumné předem vytvořit styly, které se pak používaly místo ad hoc stylování v textu. Navíc je to vhodné i z hlediska orientace uživatele, který najde na daném místě to co očekává, protože to už viděl jinde, na jiné stránce. Originalita za každou cenu je nesmysl.

          1. Martin MichálekAutor příspěvku

            Re: K čemu by to mělo sloužit?
            Nemůžu s vámi souhlasit. Originalita je pro určité typy webů naprosto klíčová. Jde většinou o marketingové mikrosajty. Často jednorázové. Mají ohromit, ne usnadnit práci kodérům. Efektivita získáná zobecněním by zde potlačila emoce a konverzní schopnosti.

            http://www.apple.com/mac-pro/
            https://www.bistroagency.cz/
            http://microsites.audi.com/tt/index.html?locale=de_DE#/intro

            1. Ivan Nový

              Re: K čemu by to mělo sloužit?
              Tak zrovna ten první odkaz má rozumnou strukturu, která se skládá z dobře definovatelných stylů, bistroagency je nesmysl, Třetí je sice příliš dlouhé, ale styly by se definovat rovněž daly, i když graficky je to tragické, nikde tam není zachovaný zlatý řez, což působí odpudivě. Co nelze vytvořit z „lega“ stylů, je nepochopitelné i pro konzumenta a emoce to už nespraví a ani se nedostaví. Filmový střih taky není nic jiného, než budování emoce z „lega“ obrazů, na základě kontrapunktu, totéž funguje v grafice. Symbolika obrazů musí být navázána na nějaké archetypy, aby to bylo srozumitelné, i film je jazyk, a tedy jazykem je i rozpohybovaná webová grafika. A základem každého jazyka jsou základní lexikální jednotky, „slova“, ze kterých se skládá významová věta. Ve webové grafice přece efekt pohybu dosahujete tím, že vezmete nějakou základní jednotku stránky a u té změníte její grafické parametry. Tedy nejlépe na jednom místě definujete tyto jednotky, které mohou být a jsou znovupoužitelné a jen podle potřeby měníte jejich parametry. A na to jsou dobré mixiny a aritmetika, kterou ale neobsahuje css. Záměrně, protože se původně soudilo, že je dobré, aby css bylo čistě deklarativní, což se ukázalo jako chyba.

  3. Radek Tůma

    Nezavrhoval bych preprocesor úplně
    Proč úplně zavrhovat preprocesor? Pokud se držím zásady zanoření maximálně 4 úrovně, používám-li složené deklarace na začátku – mimo „zanořený“ kód, mám více (v mém případě LESS) souborů (např. layout.less, navigation.less, fonts…), což také omezuje hlubší zanořování; které pak pomocí @imports vkládám do centrálního stylopisu, výrazně mi to ušetří psaní. Zároveň výsledný CSS po kompilaci je poměrně štíhlý. Orientace v kódu je díky zanořování, napodobujícímu DOM strukturu dokumentu jednodušší.

    Říkám si, kdyby CSS od začátku umělo třeba to zanořování a proměnné, možná by se leccos zjednodušilo.

    1. Ivan Nový

      Re: Nezavrhoval bych preprocesor úplně
      Přesně tak, navíc nedochází pak k vedlejším efektům, jako když upravíte globální pravidlo a kolikrát ani nevíte, kde všude se uplatní, protože stylopis má několik tisíc řádků a nedělal jste ho vy sám, a všechny kontexty selektoru si nepamatujete a ani neznáte. Díky zanoření úpravu omezíte lépe jen na danou konkrétní oblast reálně vygenerovaného DOMu, zvláště je-li jich více v daném kontextu.

      1. Aleš Roubíček

        Re: Nezavrhoval bych preprocesor úplně
        problém globálních změn s neznámými důsledky řeší mnou odkazované řešení, ne zanořování a tím zneefetivňování selektorů, jen proto, aby měly větší specificitu.

        1. Ivan Nový

          Ano, ale zase na druhé straně těsná vazba lokálního css na komponentu vede k roztříštěnosti stylu. Často by bylo potřeba změnit styl, třeba velikost písma v nadpisu na jednom místě a ne to muset dělat ve všech komponentách. Přírozenější mi připadá uspořádání, kdy při vytváření grafického objektu máme k dispozici prefabrikované bloky (mixiny), ze kterých se objekt sestavuje, aniž by jim dával vlastní význam mimo dědičnost. Použiji-li někde mixin, implicitně souhlasím s tím, že nemám kontrolu nad tím, z čeho jsem grafický objekt vytvořil a pracuji s abstrakcí části vytvářeného grafického objektu, což mě přirozeně vede k takovému pozicování, které s možnou změnou mixinu počítá. Měl by tak vzniknout robustnější a lépe udržovatelný kód, kde se věci mění na jednom místě a celek zachovává automaticky jednotný styl.

Napsat komentář

Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

Zdroj: https://www.zdrojak.cz/?p=14978