Dlhodobo udrziavatelne responzivne css s minimalnou velkostou rubrika: Kódování: CSS
3
janzitnan
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
4
lt
Š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
Pro zobrazení všech 2 odpovědí se prosím přihlaste:
Nebo se přihlaste jménem a heslem:
Komentáře