Dlhodobo udrziavatelne responzivne css s minimalnou velkostou rubrika: Kódování: CSS

6 janzitnan
položil/-a 25.10. 14:06

Zdravim
Uz dlhsiu dobu som nekodoval frontend, a teraz stojim pred ulohou vytvorit html/css sablony pre web. Poziadavky su, aby to bolo responzivne, dlhodobo udrziavatelne a rozsiritelne a minimalna velkost koli rychlosti nacitavania.

Doteraz som pouzival prevazne css framework Foundation, alebo Bootstrap. Momentalne sa mi najviac pozdava moznost nasekat to bez css frameworku, a robit to podla zasad atomickeho dizajnu. Urcite chcem pouzivat flexbox.

Ake riesenia by ste zvolili pre taketo nieco z aktualne dostupnych nastrojov? Web sa bude skladat z niekolkych statickych stranok, magazinu a eshopu s par produktami. Nemam v plane implementovat nic na sposob vue, react a pod. Interaktivne veci sa budu dat kludne obsluzit cistym javascriptom.

Dakujem

odkaz
6 lt
odpověděl/-a 25.10. 19:03
 
upravil/-a 25.10. 22:28

Šablóny kódujem cca 9+ rokov, tak skúsim pridať pár postrehov.

Možnosť nepoužiť žiadny framework odporúčam, väčšinu toho čo poskytujú asi aj tak nevyužiješ.

Od kedy som prešiel na BEM stalo sa pre mňa písanie css zábavou - vôbec neriešiš "keď zmením jeden riadok na tomto mieste, nerozbije mi to layout na inom?"

S BEM je css dlhodobo udržiavatelné a lahko sa rozširuje.

Css s BEM je o dosť väčšie - ale kvôli tomu že sa tie isté bloky dookola opakujú robí gzip kompresia zázraky (treba použiť na css aj html).

Ideálne je použiť css preprocesor ako LESS alebo SASS, ja používam LESS.

Jednotlivé komponenty mám v samostatných súboroch. V každom súbore sú k danej komponente všetky media query (prehladnejšie, plus môžeš prevziať hotovú komponentu z jedného projektu do druhého a hneď je aj kompletne responzívna).

Nesnažim sa jednu komponentu za každú cenu používať na viacerých miestach - mám pravý panel na úvodnej strane a na podstránke je na 90% podobný? Spravím ho ako dve komponenty. Požadované zmeny v budúcnosti lahšie zapracujem, ako keby som mal riešiť výnimky v jednej komponente.

Celé je to v build procese cez gulp. Postupnosť:

  • csscomb -> zoradenie css vlastností, o cca 10-20% zlepšuje gzip kompresiu.
  • autoprefixer ">0.8%"
  • group-css-media-queries -> zápis media query je dosť dlhý a komponentov je vela, toto zlúči rovnaké breakpointy do jedného.
  • minifikácia

Komentáře

  • Stefano : BEM odporucam. 26.10. 20:40
  • Mlocik97 : ja som zatím BEM nepoužíval ale četl som o tom na vzhurudolu a vyzerá to ako zaujímavý konceptuálny model, akurát práve to že to CSS to natiahne, teda čo by šlo napsať na 50 riadkov je cez BEM na 200 riadkov, ale zas prípadné zmeny sú jednoduchšie, vlastne jak psal lt. p.s. inak tie články na vzhurudolu fakt odporúčam. https://www.vzhurudolu.cz/blog/63-bem-chyby https://www.vzhurudolu.cz/prirucka/bem 26.10. 20:47

Pro zobrazení všech 2 odpovědí se prosím přihlaste:

Rychlé přihlášení přes sociální sítě:

Nebo se přihlaste jménem a heslem:

Zadejte prosím svou e-mailovou adresu.
Zadejte své heslo.