18 komentářů k článku Kaskáda a další „problémy“ CSS: Jak je řešit, když vás pálí?:

  1. Jakub Stratil

    Kvalitní článek
    Díky za článek, je dobře a vystižně napsanej.

    Snažit se po někom předělat stylování s hlubokým, nespecifickým zanořením zahrnující tagy, je opravdu peklo. :)

    1. Dor

      Re: Nevím proč
      Mám to stejné. Po téměř deseti letech práce s HTML+CSS nejsem schopen dosáhnout výsledků, kterých jsem dosahoval po půl roce práce s WPF. CSS je asi moje nejméně oblíbená technologie, kterou musím používat. A to navzdory tomu, že musím používat i taková pekla, jako je PHP.

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

        Re: Nevím proč
        CSS je prostě zápis designu. Pracuje se tam s koncepty vrstvení atd. Pro čistého programátora to je vždy trochu vedle. Ideálně to chce specialistu.

        1. Mlocik97

          Re: Nevím proč
          Specialista? No ja bych ho pre svoj projekt fakt potreboval. Inak svoj projekt nedokončím ani do vianoc roku 2030.

        2. Dor

          Re: Nevím proč
          S WPF mohu designovat GUI sám. S HTML + CSS potřebuji specialistu, který když je dobrý, tak dokáže v CSS skoro to, co běžný programátor v XAML. Takže to nejspíše vymysleli zednáři, aby bylo dost profesí a bylo jak rozdělovat peníze mezi lidi. Už to začíná dávat smysl.

          Článek se mi líbí a je napsán skvěle, ale už to, že je takový článek potřeba, říká o CSS něco nepěkného. HTML+CSS má ještě spoustu rezerv a bude muset být ještě hodně upravováno a ohýbáno ze svých původních ideí, než se při tvorbě GUI vyrovná XAMLu. To, že je to jeden z nejpoužívanějších jazyků, je jen proto, že v prohlížeči není na výběr.

  2. martin

    Připadá mi, že tvůrci specifikace HTML+CSS myslí jen na zpravodajské portály a blogy a opomíjejí business aplikace, které používají HTML jako frontend, včetně např. eshopů. Myslím, že třeba element by se využíval mnohem víc, než nějaký .

    Samotná existence metodik, které se marně snaží nad CSS vytvořit nějaký systém dokazuje, že CSS je navrženo nešťastně a nesystémově. Mě se nejvíc osvědčilo začít používat react.js s knihovnou emotion, která vrací do tvorby webů komponentový přístup.

    1. Mlocik97

      Re: HTML je OK
      HTML je celkom OK, samozrejme je tam pár vecí ktoré tam chýbajú, ale nieje problém si čokoľvek do HTML pridať, ostatne síce na to je potrebnej JS ale to samo o sobe webaplikace potrebuje, takže v tom nevidím problém, trebárs ja si HTML korením Angularom. CSS to je pre mňa nočná mora. Najhoršie je že stále mám pocit že v každom prehliadači to funguje inak. Veľa vecí sa chová podivne a dosť nevyspytatelne.

      1. Dor

        Re: HTML je OK
        XML je celkem OK. Samotné HTML je OK s výhradami. Je to takové špinavější XML. Ale dnes už se nepočítá s tím, že by ho někdo styloval bez CSS.

        Mě vadí hlavně to, že je to pořád hodně orientované na stavění dokumentů, ale přitom v tom nezanedbatelné množství lidí tvoří GUI. Co se týče adresování elementů css selectorama, tak s tím bych se ještě srovnal, ale vadí mi jiné věci. Např. udělat blok (div), jehož výška je určena obsahem. Do toho bloku dát vlevo nějaký text a vpravo jiný blok, jehož výška bude určena rodičovským blokem. A do toho pravého bloku strčit blok, který bude zarovnaný vertikálně na střed. Ve WinForms nebo WPF žádný problém. V HTML + CSS jsou na to asi 3 postupy a žádný není úplně správně.

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

          Re: HTML je OK
          Ad. ty izolované komponenty: Ano, v HTML/CSS dle specifikace je to horší. Specifikace je zde oproti Reactu a podobným knihovnám pozadu. https://developer.mozilla.org/en-US/docs/Web/Web_Components

          Ad. ten layout. Pokud to dobře chápu, na tohle by měl stačit Flexbox: https://www.vzhurudolu.cz/prirucka/css3-flexbox

          Zrovna v oblasti layoutu udělalo CSS za poslední dva roky ohromný skok vpřed. https://www.vzhurudolu.cz/prirucka/css-grid

          1. Mlocik97

            Re: HTML je OK
            Grid aj flexbox som koukal, ale i tak tomu nerozumím, a nevím jak spraviť layout ktorý by nebol v presnej mriežke.

            +-------------------+-------------------+----------------+
            |                   |                   |                |
            |                   |                   |                |
            |                   +-------------------+                |
            |                   |                                    |
            +-------------------+------------------------------------+
            

            trebárs ako spraviť niečo takéto?

            (p.s. moje ASCII arting je katastrofálne takže pššt, ak chcete recenzovať moju krezbu).

  3. Dominik

    Velmi dobre napisany clanok, hoc cakal som trosku viac prikladov, ale to nevadi. Ja pouzivam CSS uz vela vela rokov a 90% problemov mi vyriesilo prefixovanie, resp. kedze pouzivam preprocesor, tak pisanie zvlast scss suboru pre komponent a pouzivanie stromovej struktury (co sa transpiluje na prefixovane CSS). Len velmi malo kedy uz musim riesit nejaky problem so specifickostou selektoru alebo jeho vahou, maximalne su niektore veci zbytocne duplicitne (font-size a pod.) rozne po komponentoch, ale to je vlastne dobre, pretoze je to samostatny komponent a nech teda funguje aj bez okolitych ci rozne magicky zdedenych stylov, no nie?

    Co sa tyka externych kniznic a frameworkov, toto bude stale boj a uznavam, ze tu neexistuje ziadna vseobecne fungujuca magia ako to dostat pod kontrolu. Ja si vzdy CSS framework vyberam este skor, ako zacnem robit aplikaciu a zistujem, ci mi bude vyhovovat a ci ho budem vediet modifikovat na svoje potreby (napr. boostrap celkom dobre ide). Ak mam framework, ktory sa modifikovat naozaj neda, alebo je to velmi pracne a nestabilne, tak ho bud nepouzijem, alebo zmenim svoj pristup a pouzivam len to, co mi ten framework/kniznica dovoli a snazim sa to obajit aj pred zakaznikom (to je niekedy velmi tazke, ale da sa aj to). Proste je to vec kompromisu.

    No a co sa tyka kompatibility medzi browsrami, ano rozdiely tam su, ale rozhodne nesuhlasim s tym, ze jeden a ten isty CSS kod sa zobrazuje uplne inac na roznych browseroch. To platilo mozno 10 rokov dozadu, teraz uz urcite nie. Ak je takyto problem, vo vacsine pripadov ide o kombinaciu zleho (rozumej nevalidneho) HTML kodu a nasledne nestastne zvolenych CSS selektorov a nie to, ze browsre su ine. V momente ked pisem validne HTML, spravne uzatvaram tagy a davam si pozor na logicke plynutie stranky a neznasilnujem DOM miliardov nepotrebnych divov a spanov, mam minimum problemov. Tych par (kozmetickych) rozdielov sa uz potom da opravit celkom rychlo.

  4. Mlocik97

    ja riešil presne to isté, reálna veľkosť rodičovského elementu podľa veľkosti obsahu je jedno z nejhorších vecí ktorú by nekto mohol riešiť, ja to už neriešim vôbec, graficky ak sa to zobrazí správne, už mi je jedno jaké veľkosti reálne majú elementy ako div. Inak celý svoj projekt som skládal iba skrz positioning, floating a calc(); vyzerá to kazastrofálne ale jaksi cca funguje. Problém mám ale na iných miestach. Napríklad čo vôbec netuším je ako spraviť aby na mobile som mal hamburger menu a na počítači som mal to rozseklé v dvoch nav, medzi ktorými niečo ešte je. Mám to trocha zložitejšie, lebo jde o to že mám v „rohu“ hlavičku, vedla nej jeden navbar, pod ňou druhý nav bar, a pod prvým resp. napravo druhého mám obsah. Ďalší problém je päta, dajme tomu že obsah mám medzi 2 inými elemntami, stĺpcami, a pod obsahom na konci pätu, bočné elementy sú fixlé, obsah aj s pätou sa skroluje, a na mobile by mal trebárs pätu pod stĺpcom ktorý by bol pod obsahom. Tzv. jak cez styly vymeniť poradie tak aby zároveň päta opustila nadriadený element. To troška taky problematické. A jeden problém ktorý ma sere je tzv. „2px bug“, trebárs ak máš takýto kód:

    <body>
        <div id="a">neco</div>
        <div id="b"><span>neco<span></div>
    </body>
    

    a css

    body {margin: 0; padding: 0; line-height: 1.5;}
    #a {height: calc(100%-20px); width: 100%;}
    #b {height: calc(20px); width: 100%;}
    span {font-size: 12px};
    

    tak proč v chrome to funguje správne (bez scrollbaru) ale vo firefoxu mám scrollbar, a stránka je scrollovatelná o 2px? však 12px je menej ako 20px, text by nemal presahovať element #b ale vo FF presahuje, v chrome nie.

  5. Mlocik97

    inak možno mám v tam chybu v CSS (čo sa valídnosti týka), psal som to ručne, takže to neriešim, ide iba o princíp, u seba to mám správne, pozerám práve že asi u calc() som nedal medzeru medzi mínusom a hodnotou.

    1. martin

      Re:
      Jen takový tip: zkoušel jsi flex? Od té doby, co jsem začal stylovat flexem, tak jsem float nepotřeboval a calc možná jednou. Fakt doporučuju.

  6. Mlocik97

    Ukotvenie menu v CSS Grid
    Chcel by som vedieť jak ukotviť menu ak pre layout použijem CSS grid. Kedže podľa špecifikácie ak elementu v Gridu zadáme position: fixed; tak vlastne už nieje súčasťou gridu (neaplikuje sa v Gride), a je na inej vrstve. dajme tomu že bych mal grid 2×2 miežku s tým že by v prvom riadku (1,1 ;; 1,2 ;;) a v prvom stĺpci v druhom riadku (2,1 ;;) mal 3 elementy ukotvené (ako position fixed), a len element v druhom riadku v druhom stĺpci (2,2 ;;) by bol scrollovatelný? ako to v css grid spraviť?

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