Komentáře k článku

LESS: stejné CSS za méně peněz

Kaskádové styly jsou dnes až na výjimky přijímány jako standard pro popis vizualizace formátu hypertextových dokumentů. Koncepce jednoduchého popisu s sebou ale nese některé nevýhody, které se snaží překonat různé nadstavby a preprocesory. Jedním z nich je LESS, který si představíme v dnešním článku.

Zpět na článek

43 komentářů k článku LESS: stejné CSS za méně peněz:

  1. mat

    neni to prasarna!

    diky za clanek! moc me to zaujalo. Teoretici zrejme budou mit plno vyhrad, ale my praktici neco podobneho hodne potrebujeme. Ja to resim vetsinou php a pak vkladam casti css kodu, ktere to vyzaduji do hlavicky html, ale neni to idealni.

    jdu to hned vyzkouset.

    1. blizzboz

      Re: neni to prasarna!

      ja všetko riešim cez PHP, spájam všetky CSS súbory do jedného aby som znížil počet HTTP požiadavok, komprimujem CSS a zobrazujem ho z chace, môj CMS dokonca zvláda aj výnimky pre rôzne prehliadače atď atď, LESS je podľa mňa len zbytočnosť veď všetko sa dá riešiť omnoho robustnejšie.

  2. bohyn

    Re: LESS: stejné CSS za méně peněz

    Díky za info. Kolikrát sem už přemýšlel o tom si něco takovýho sám napsat.

    1. Josef Richter

      Re: LESS: stejné CSS za méně peněz

      Vždycky, když tě napadne, že by sis mohl něco sám napsat, tak je dobrý nejdřív trochu zagooglit ;-) V 99% případů zjistíš, že už to někdo napsal. Navíc tohle přece nejsou žádný žhavý novinky. Haml & Sass se používají už několik let, Less (což je obdoba Sass) je taky minimálně rok starej.

      1. blizzboz

        Re: LESS: stejné CSS za méně peněz

        ale keď si niečo napíšeš sám tak si to môžeš urobiť presne na mieru.

      1. Ivan Nový

        Re: No v podstatě je prasárna samotné CSS a HTML,

        třeba hover. Jinak všude. Je to vlastně definičně zamrzlé volání funkcí konstruujících DOM. Taky z toho plyne chaos, který vytváří tvůrci prohlížečů. V rámci konkurenčního boje vytvářejí vlastní „zadrátované“ definiční tvary, aby se odlišili od konkurence. Na úrovni procedur to není nikdy tak dramatické, protože proceduru můžete vždy v rámci jazyka a tedy čistě nahradit. Navíc definiční pojetí nic neusnadňuje, každá definice je stejně prohlížečem převedena do volání procedury.

        1. Martin MalýAutor příspěvku

          Re: No v podstatě je prasárna samotné CSS a HTML,

          Pardon, ale tohle mi zní jako velmi neobratný pokus o demagogii. Stejným způsobem mohu tvrdit, že jakýkoli popisný jazyk, včetně XML, je „prasárna“, protože to je jen „zamrzlé volání funkcí vytvářejících DOM“. Dokonce i výčet prvků [a, b, c] (ad lib dle vašeho oblíbeného jazyka) je prasárna, protože je to jen definičně zamrzlé volání funkcí konstruujících seznam…

          Myslím, že chápu tento směr úvah, ale považuju ho za zcela pomýlený. Jako byste pomíjel, že strukturovaná data lze zapsat strukturovaným zápisem, a prosazoval jejich algoritmizované vytváření. Nezlobte se, ale když už jsme u toho oblíbeného slova – zapisovat datovou strukturu do zdrojového kódu jako algoritmickou posloupnost volání procedur, které ji vytváří, byste nazval přesně jak?

          1. Ivan Nový

            Re: No v podstatě je prasárna samotné CSS a HTML,

            No to je ale něco jiného, protože se to děje standardními prostředky jazyka, proto je to vždy možno předefinovat podle potřeby, to u CSS ale není možné, stáváte se otrokem autora prohlížeče. A praxe je taková, protože takový je i reálný svět, že potřebujete udělat i věci, na které autor prohlížeče nepomyslel, protože vás k tomu žene zase vaše konkurence. No i program samotný jsou strukturovaná data, takže by se dala určitá omezená třída programů psát bez použití programových smyček. A to je přesně situace CSS, program bez cyklů. Jenže to už dnes nestačí, vzhledem k tomu, k čemu se CSS používá. Prohlížené dokumenty nemají už povahu dokumentů (strukturovaných dat bez programových smyček), ale aplikací popsaných pseudostruktu­rovanými daty.

    1. mat

      Re: No v podstatě je prasárna samotné CSS a HTML,

      vyvetrejte si a zacnete delat neco uzitecnejsiho nez je teoretizovani prosim!

  3. v6ak

    Hranice LESS: vygenerované CSS neupravovat!

    Ačkoli to může vypadat, že generování kódu přináší jen samá pozitiva, má to i svoje hranice, které je dobré si uvědomit. Generuji-li kód, pak je vhodné pracovat pouze s původním kódem a ne s tím vygenerovaným, jinak je možné při dalších úpravách narazit. Úprava toho původního kódu se totiž obvykle nemůže projevit ve výsledném, aniž by zrušila všechny jeho úpravy.

    Více jsem se o tom před časem rozepsal na http://v6ak.profitux.cz/clanky/proc-negenerovat-zdrojovy-kod.php .

  4. Ja

    Zmatek

    Asi by mne dost mátlo, že „jazyk“ less používá stejné či podobné prvky jako selektory css – sice v místech kde selektory nejdou běžně použít, ale pro rychlou orientaci ve stylesheetu je to dost nepřehledné. Třeba http://sandbox.pocoo.org/clevercss/ mi připadá přehlednější (podotýkám, že nejsem zarputilý pythonář :-).

    1. On

      SASS + Compass!

      Pak doporučuju podívat se i na SASS, který je v Ruby a nabízí stejnou formu zápisu (vedle .SCSS což má zase blíže k LESS), nicméně je aktivněji vyvýjený a nabízí velký ekosystém rozšíření. Když se k tomu připojí Compass, a na to nějaký CSS framework, je to nedostižná kombinace.

  5. jardam

    Zkušenost s LESS

    Pro projekťáky: ze zkušenosti můžu říct, že díky LESS se člověku absolutně neznalému CSS výrazně zkrátila doba zaučení. Stačí všude dodržovat kaskádování a odpadnou začátečnické problémy s dědičností a bordelem v kódu (ano, za cenu trochu většího výsledného objemu atd.).

  6. Jakub Nešetřil

    Moje zkušenosti s LESS z praxe

    Používám LESS intezivně už přes půl roku (developer.go­oddata.com, wrathjs.com a jiné) a jsem z něj dost nadšený. Pár postřehů pro diskutující:

    • Obecně indirekci a překlad jednoho jazyka do druhého moc nakloněný nejsem, ale na LESS je pěkné, že to je poměrně minimalistické, inkrementální rozšíření. Stále to působí, že píšete CSS – s pár „vylepšeními“.
    • Nejužitečnější pro mne jsou mixins, vnořování pravidel a @import. Vnořování je skvělé kvůli code-folding (můžete si zkolapsovat všechny sekce a dívat se pouze na pravidla pro jeden konkrétní segmet vašeho webu).
    • Mixins jsou výborné na CSS3. Když už nic jiného, tak kvůli tomuto byste měli LESS používat:

      .box_shadow(@x: 0px, @y: 0px, @blur: 10px, @color: #000) {
      -webkit-box-shadow: @x @y @blur @color;
      -moz-box-shadow: @x @y (@blur/2) @color;
      -o-box-shadow: @x @y @blur @color;
      box-shadow: @x @y @blur @color;
      }

      // a někde úplně jinde

      #nice-box { .box_shadow(3px, 3px, 10px, #ccc) }

      Až zjistíte, že IE9 podporuje nějaký CSS konstrukt zatím pouze s -ms- předponou, stačí pouze upravit pár CSS3 maker ve separátní @import-ované knihovně a je vystaráno.

    • Trochu komplikace samozřejmě přináší nutnost kompilace. Já mám ve svých projektech automatizovaný build/deploy process, ale chápu že ne každý má takhle mechanizovaný přístup. Pokud máte štěstí a používáte rozumný nástroj, možná zvládá LESS-kompilaci on-the-fly (např. v node.js je to compiler modul Connectu). Situaci neusnadňuje nekompatibilita starších verzí LESS s novějšími.
    1. luboskmetko

      Re: Moje zkušenosti s LESS z praxe

      Ano, s nastupujucim CSS3 a vendor prefixes toto bude asi najvacia vyhoda LESS.

      Inak vyhodnost alebo nevyhodnost pouzitia takychto nastrojov zavisi aj od grafickeho podkladu. Vela dizajnerov nepouzije jeden odtien modrej (@nice-blue) ale vela roznych odtienov. Alebo spolocnych grafickych prvkov, ktore by sa dali zadefinovat a znovu pouzivat je minimum.

      Co mi vadi asi najviac je nutnost kompilacie. I s automatizovanym build procesom, je to stale zdrzanie oproti priamenu pisaniu CSS a nejakemu refresh toolu v prehliadaci.

      1. v6ak

        Re: Moje zkušenosti s LESS z praxe

        Znám dva způsoby, jak to dělat automaticky, a kterýkoli z nich mi nepřijde jako zdržení:
        a) Mít na to nějaký handler pro IDE. Stačí uložit, IDE to nechá zkompilovat a je to.
        b) Použít ve vývojářském módu např. mod_rewrite a CSS v případě změny alespoň jednoho zdrojového souboru přegenerovat.

        1. Jakub Nešetřil

          Re: Moje zkušenosti s LESS z praxe

          A dotřetice doplním že pokud jde o flexibilitu/rychlost vývoje, tak pokud LESS transparentně nepřekládá váš server (jak jsem psal Connect to dělá, Jekyll má taky verzi s LESS) – tak lze do HTML includnout less.js a je vystaráno – LESS je překládáno Javascriptem přímo v browseru – a nepostřehnutelně rychle. Před deployem se less.js může odstranit a nahradit zkompilovanou verzí.

    2. Jan Sládek

      Re: Moje zkušenosti s LESS z praxe

      Zkoušel jsem LESS před nějakým časem (asi půl roku), takže se mohlo něco změnit (kdo máte zkušenosti, opravte mě případně prosím):

      Zkoušel jsem LESS jako metodu pro lepší implementaci OOCSS od Nicole Sullivan. Fungovalo to poměrně velmi dobře. Jenže časem jsem zjistil, že se mi OOCSS špatně udržuje prostě proto, že se mi ten styl subjektivně nelíbí. Moc tříd, málo závislostí. Pro programátory paráda, pro mě jako nadšence do sémantiky místy utrpení. Ale každopádně lze LESS pro OOCSS doporučit.

      K výše zmíněnému projektu jsem se vrátil po půl roce a chtěl něco upravit. Při té příležitosti jsem updatoval LESS a zjistil, že se změnila implementace některých věcí. Chtěl jsem používat novou verzi a její výhody, ale LESS mi to neumožnil. Poučil jsem se o používání rychle vyvíjených projektů a projekt přepsal do čistého CSS.

      Kvůli používání LESS jsem musel jemně upravit své kodérské náviky. Moc rád používám nejnovější CSS3 triky a media-queries mi v LESS nefungovaly. To mě fakt štvalo.

      Na konec to hlavní, co se mi na LESS líbilo byla specifikace barev a mixins. Ani jednoho nepovažuji za takovou výhodu, abych se nechal omezovat tím zbytkem.

      LESS je podle mě nástroj pro programátory, kteří potřebují kódovat. Pro mě to je užitečný nástroj, který mi vůbec nesedl.

    1. v6ak

      Re: anebo to udelat v PHP

      A záleží opravdu na podpoře hostingu? Ono je možné to před nahráním zkompilovat a na hostingu nezáleží.

  7. František Kučera

    Zajímavé

    Z počátku jsem si říkal, že je nesmysl zavádět nový jazyk, když si to generování CSS můžu napsat v nějakém existujícím jazyce, ale má to něco do sebe (např. jednoduché „přičítání“ barev pomocí operátoru +, to by se v obecném jazyce dělalo složitěji, nebo by si člověk musel dopsat vlastní pomocné funkce). LESS podle mého prasárna není, někdy prostě deklarativní zápis nestačí a je potřeba trochu „programovat“ (vyhnout se opakujícímu se kódu a magickým konstantám), jen bych ho použil v době „kompilace“ nikoli v době běhu (to mi trochu jako prasárna přijde, zvlášť ten JavaScript, ale použití jako preprocesoru, např. zmiňované navázání na commit v SCM, mi přijde OK).

  8. balki

    Nieco podobne pre javu ?

    Znie to zaujimavo, je nieco podobne pre javu ?
    Robim v Javaserver faces a nieco podobne by mi ulahcilo robotu.

    1. v6ak

      Re: Nieco podobne pre javu ?

      Stačí se porozhlédnout po komentářích (já jsem sem postoval link) nebo se zeptat strejdy fulltextu…

      1. balki

        Re: Nieco podobne pre javu ?

        Pozeral som aj predtym, ale nasiel som v kommentoch len less pre jruby, co za javu nepovazujem.

          1. balki

            Re: Nieco podobne pre javu ?

            Nie ideologicke, ale dalsia zbytocna vrstva, urcite to nie je 2x rychle. A ked robim projekt v J2EE, ma to aj tak samo o sebe tolko zavislosti, ze jednemu vstavaju vlasy dupkom :)

            1. v6ak

              Re: Nieco podobne pre javu ?

              Možná to není dvakrát rychl*é*, ale je to prý dvakrát rychl*ejší* než CRuby. I když ne hned po startu – ten obecně v Javě není výkonnostně nejlepší a v JRuby je to poznat ještě více.

              Řešením může být taky kompilátor-daemon ve stylu fsc (fast Scala compiler).

              Pokud chceš, můžeš vzít Ruby zdrojáky a přepsat je třeba do Mirah (staticky typovaný jazyk (type inference) se syntaxí blízkou Ruby běžíci na platformě Java). Snad Mirah bude schopné něco takového provozovat.

  9. Jakub Bouček

    Alternativa pro PHP?

    Pokud se použije správně, je to vynikající nástroj. Neexistuje alternativa pro PHP?

    1. Jakub Bouček

      Re: Alternativa pro PHP?

      Můžete se tvářit, jako bych tu nic nepsal, prosím? Z nějakého důvodu jsem viděl jen Ruby verzi.

  10. Tomas Janovsky

    prasarna?

    Osobne si nemyslim ze odpurcum LESS jde tolik o „ideovou cistotu“, ale treba taky o prakticke aspekty, jako napriklad deployment, debugovani v prohlizeci a podobne..

    Prasarnu z kazde technologie dela az jeji nevhodne pouziti. Jsem si naprosto jisty ze nebude trvat dlouho a potkam v praxi projekt kde bude misto 400 radku standardniho css 300 radku kodu pro preprocessor, a vyvojar bude stastny jak „usnadnil udrzbu“.

    Miluju vyraz „vyvojarstvi“ ve vyse zminenem kontextu, vybavily se me stovky diskuzi, mnoho byvalych kolegu.. ;)

  11. Nox

    Nejen že NENÍ prasárna...

    …naopak toto mělo být do CSS implementované již dávno.
    LESS (nemyslím teď konkrétní implementaci) doplňuje vlastnosti, které CSS těžce chybí a které jsou v jazycích samozřejmostí už od pravěku (možná jde o jiné typy jazyků, ale v praxi nevidím v dopadu změn rozdíl), tuhle iniciativu rozhodně vítám

    Mj. nedávno se objevil plugin LessCSS pro Netbeans

    konečně to nebude RY, ale DRY

    1. kahi

      Re: implementace less v php

      To by se dalo určitě sdělit i tak, aby to mělo pro čtenáře nějaký přínos… :-)

  12. honza

    dynamicka adresa CSS nefunguje v IE9

    V IE9 jsem objevil, že pokud zadáte adresu CSS v LINK jako dynamickou adresu, např. http://www.neco.cz/css/lessc.php?file=main.less, tak prohlížeč zkrátka to CSS zhusta ignoruje. Toto chování mi při testování vykazuje pouze IE9, nikoliv její starší verze nebo jiné browsery.

    Koukal jsem se i na specifikaci a W3C hovoří o tom, že v HREF je URL, nikde ani slovo o tom co by mělo splňovat…

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=3349