Într-un site aș vrea să am un singur fișier css. Să pun tot codul css într-un singur fișier … mi se pare prea mult. Aș vrea să am o ordine. Așa că am creat mai multe fișiere css, fiecare având rolul lui, ca să zic așa (reset.css, fonts.css, sectiune_x.css etc). Așa că mi-am făcut un mic script php pentru asta care nu numai că-mi include toate fișierele css într-unul singur, dar le și optimizează (minify).
Script-ul extrage data ultimei actualizări a fișierul general (style.min.css) folosind funcția filemtime și o compară cu data fișierelor css reale (reset.css, fonts.css, sectiune_x.css etc) folosind din nou funcția filemtime. Atunci când unul din fișierele css a fost alterat/modificat, se va recrea fișierul minifiat. Treaba asta se întâmplă on the fly. Adică la fiecare accesare a unei pagini din site.
Dacă pe deoparte mă ajută că browser-ul face request către un singur fișier css, nu știu dacă să-mi fac probleme vizavi de verificarea datei de modificare a fișierelor css. În momentul de față am 14 fișiere css și nu mă opresc aici. Aș putea ajunge să am până la 30 de fișiere css. Deci, mă întreb dacă e o problemă că aș putea verifica data de modificare a 30 de fișiere la fiecare accesare a unei pagini din site (că recrearea fișierului css se va face doar când s-a modificat ceva în fișiere).
Să creez fișierul css minifiat manual nu mă mulțumește deloc. E stresant, mai ales când sunt în stadiu dev.
LE: După ce am deschis subiectul mă întrebam de ce n-am o setare care să precizeze dacă sunt pe dev. Iar dacă da, atunci să se facă verificările și minifierea dacă e cazul. Dar parcă tot nu mă simt confortabil pentru că ar trebui să setez pe site, online, dacă sunt în dev. Pe când așa, dacă în viitor găsesc o problemă, modific fișierul css respectiv și l-am urcat sus. Fără deranj prea mare.
Spuneți-mi, vă rog, dacă e bună practică ce am făcut sau nu. V-aș ruga să-mi spuneți și cum rezolvați voi treaba asta.
Webpack cu css loader iti face asta daca nu vrei sa folosesti css modules.
In JS acum se folosesc CSS modules, care automat iti importa din css unde ai @import, o solutie similara se poate face si cu SCSS (Sass).
Fiecare bundler modern, e.g parcel, vite, microbundle, fusebox iti face asta automat (daca folosesti css in JS)
Pattern-ul e ca faci un fisier principal care o sa importe cu @import direct in css si dupa faci mai multe module mici care iarasi importa per componenta/modul.
Ai zis un alt pattern foarte vechi cu verificare datei schimbarii fisierelor, tie iti trebuie comenzi de build, recomand ori npm scripts ori un makefile. De exemplu scrii npm build si iti face un build cu minificare pentru prod, scrii npm run si iti ruleaza dev serverul care iti recompileaza tot/reporneste serverul cand fisierele se schimba cu un file watcher nativ mult mai rapid ca verificarea ultimei schimbari a fisierelor.
Mie imi place foarte mult sa fac scripturi cu makefile, make prod, make run, make, make install, e foarte puternic combinat cu npm scripts.
Ideea e ca iti faci comenzile cu webpack si php, din cate imi amintesc poti rula un server http cu php direct din php acum.
Dacă nu vrei să te complici cu un extra build (în node) pentru Sass, poți folosi ScssPHP. Nu am folosit, nu știu cât de compatibil este cu libsass, dar cred că pentru import este suficient.
