Classi CSS per styles comuni

davla commented 6 years ago

Descrizione

Come gika ci ha fatto notare in #32, gli style="..." sono meno efficienti dei class="..." (classi CSS). E a me personalmente pesa anche il culo scrivere tutte le volte style="background: #FFF;" e via dicendo. Mentre alcune cose vanno lasciate nello style (i gradienti, per esempio), molte possono essere spostate nel CSS.

Risoluzione del problema

La soluzione è terribilmente semplice: fare classi CSS mono-statement per gli stili più usati.

Esempio:

<div class="white-bg">aaaaa</div>

sarà equivalente a:

<div style="background: #FFF;">aaaaa</div>

Una cosa leggermente più complessa può essere modificare i template. Per esempio, colore2 è spesso usato con 000, e si potrebbe fare una classe black-text per il testo nero: however, questo richiede qualche switch nel template. Niente di difficile, insomma, ma è comunque meno straightforward.

Classi da fare

While potrebbe sembrare che debba fare tutto io, in realtà mi serve aiuto per individuare potenziali stili da inserire nel CSS. I padding/margin sono già sotto esame da un po', quindi ignorateli. Qui sotto l'elenco:

[x] no-border-spacing
[x] white-bg, bg-white
[x] white-text, text-white
- Da far funzionare anche nei link
[x] black-text, text-black
- Da far funzionare anche nei link
[x] height-100

Goodies

Se siete pigri, c'è già da eoni la classe std-table, equivalente a roundy-corners pull-center text-center white-rows no-border-spacing. Notare che roundy-corners implica anche roundy.

CiaobyDany commented 6 years ago

@davla Perché non ero al corrente della std-table?

davla commented 6 years ago

Perché a volte dico tante cose tutte insieme, e poi passa in secondo piano. Magari l'ho messa insieme a cose ben più importanti, tipo il roundy-corners. Un po' come il justify-content: space-evenly;, (flex-main-space-evenly), che ti ho rammentato più volte ma scommetto che non hai ancora guardato.

CiaobyDany commented 6 years ago

@davla Actually lo so che esiste, ma di norma mi fa più comodo lo space around (anche se riconosco la sua utilità per casi che non mi è ancora capitato di affrontare). Ma quindi se ho roundy-corners (non era roundy-bottom una volta?) posso evitare di mettere il roundy? A questo punto non si può fare in modo che le class main dei flex includano anche le class flex, flex row e flex wrap? Roba tipo flex-row-wrap-main-space-evenly che ti fa saltare il flex flex-row prima. Poi si lasciano anche le specifiche, ma credo che in un buon 80% dei casi i flex sono row e wrap. Oppure magari anche una class che includa già quei tre non sarebbe male.

Quanto agli elementi dello style da mettere in class ci penserò, perché color esclusi credo che ad oggi rimanga molto poco che si lascia lì. Forse roba tipo padding-1ex e padding-05ex? Confermate che è tanto usata?

flavio-a commented 6 years ago

Io sapevo della classe std-table da una vita ma visto che non usavamo più le table era diventata abbastanza inutile.
queste classi shorthand sono utili a livello di prestazioni? Cioè, c'è differenza tra flex-row-nowrap e flex flex-row flex-nowrap? Posto che a mio avviso le classi shorthand suonano molto belle, ma non si usano poi così tanto (questa del flex-row-nowrap probabilmente sarebbe abbastanza usata, ma in generale non mi trovi troppo un fan, specialmente se non ci guadagniamo di prestazioni).
sì, metti (padding|margin)(0.5|1)e(x|m) (guarda che pr0, le scrivo come regex), background-white e text-(white|black), per il resto a me non capita di scrivere molto altro nello style oltre al modulo css.

davla commented 6 years ago

@CiaobyDany Solo perché Flavìo ha postato prima.

roundy-bottom: si chiama roundy-footer e arrotonda le celle più a sinistra e a destra dell'ultima riga. roundy-corners pure quelle della prima riga. In effetti, roundy-corners è un vestigio del periodo pre-gradienti, quando avevamo le celle colorate anche nelle intestazioni. Ma non è che faccia danni, quindi si può lasciare. Però provvederò a cambiare std-table per includere roundy-footer, perché è bene avere solo quel che serve.
Sia roundy-footer che roundy-corners includono il roundy, sì, che quindi non è necessario mettere roundy.
Ci sono classi shorthand per i flex as well. Namely:
- flex-row-stretch-around --> flex flex-row flex-items-stretch flex-main-space-around
- flex-row-center-around --> flex flex-row flex-items-center flex-main-space-around
- flex-row-center-stretch --> flex flex-row flex-nowrap flex-items-center flex-main-stretch
- Se ne volete altre, basta chiedere.

@flavio-a Le prestazioni sono uguali. Se dai un'occhiata al CSS compilato, sono tutti selettori con la virgola, indi il browser ci mette lo stesso tempo a pescare tre classi diverse o la stessa classe in tre punti diversi. C'è un overhead minimo in fase di parsin del CSS, ma tre o quattro selettori in più non fanno certo la differenza.

@pokemoncentral/wiki Per i padding/margin, ci sto già lavorando da un po', quindi ignorateli: css - un server tutto per voi

pokemoncentral / wiki-project