😈╰•ALBERTO•╯😈 beh, allora: ti piacerebbe usarlo perché trovare alcuni pezzi già fatti è comodo, questo sì. Ciò che ti spiega ChatGPT in realtà può funzionare ma è sbagliato concettualmente, ovvero partiamo dalle basi: CSS significa "fogli di stile a cascata", questo indica che in ordine crescente di specificità abbiamo:
- file CSS esterno (Bootstrap che alla fine si tratta di codice CSS esterno quindi
<link rel="stylesheet" href=""> dove presumibilmente il file bootstrap.min.css lo hai scaricato in locale
- codice CSS in blocco (
<style></style>)
- codice CSS inline (
<div style="color:#00F"></div>)
- direttiva !important che sovrascrive e fa prevalere la proprietà che la contiene (ad esempio
h1{color:#000 !important})
Nel caso di specificità uguale, prevale l'ultima dichiarazione. Ad esempio se per sbaglio scrivi:
h1{font-size:14px;} h1{font-size:16px;} l'ultima istruzione è font-size:16px quindi sarà questa ad essere applicata, che sovrascrive la precedente avendo uguale specificità ovvero livello di importanza.
La direttiva !important di fatto non è la soluzione ideale ma significa che il codice è complesso e non l'hai compreso fino in fondo, non sai per quale motivo una proprietà venga sovrascritta e tu vuoi evitare la cosa (magari come soluzione temporanea) mettendo !important sulla proprietà che vuoi per far "vincere" quella. Il punto è che concettualmente non va bene, se inizi a scrivere !important ovunque e poi ti si sovrascrive una proprietà tramite lo stesso !important, cosa cavolo fai? Cancelli tutto e riparti da zero ahah 😅
Quindi in ordine di specificità, dato che Bootstrap è esterno, il tuo codice CSS verrebbe sovrascritto se e solo se esso si trova in un file esterno e Bootstrap viene caricato dopo il tuo file. Di sicuro Bootstrap non è stato creato usando la direttiva !important quindi se comprendi la specificità non hai questi problemi di sovrascrittura (che cavolo, CSS = "fogli di stile a cascata", è proprio fondamentale questo concetto!).
