En aquest tema, explorarem les millors pràctiques per escriure CSS eficient, mantenible i escalable. Seguir aquestes pràctiques t'ajudarà a crear fulls d'estil que siguin fàcils de llegir, entendre i mantenir, tant per a tu com per a altres desenvolupadors que puguin treballar amb el teu codi en el futur.
- Utilitza Noms de Classes Significatius
Explicació
Els noms de classes han de ser descriptius i reflectir la funció o el contingut de l'element, no el seu estil visual. Això facilita la comprensió del codi i la seva reutilització.
Exemple
<!-- Mal exemple --> <div class="red-text bold">Hola, món!</div> <!-- Bon exemple --> <div class="alert-message">Hola, món!</div>
Exercici
Canvia els noms de les classes següents per fer-los més significatius:
Solució
- Evita l'Ús Excessiu de Selectors ID
Explicació
Els selectors ID tenen una especificitat molt alta, cosa que pot dificultar l'overriding dels estils i fer que el codi sigui menys flexible. És millor utilitzar classes per a l'estilització.
Exemple
<!-- Mal exemple --> <div id="header">Capçalera</div> <!-- Bon exemple --> <div class="header">Capçalera</div>
- Organitza el Codi CSS
Explicació
Organitza el teu codi CSS de manera lògica i estructurada. Pots utilitzar comentaris per separar seccions i seguir un ordre consistent (per exemple, per tipus d'element, per pàgina, etc.).
Exemple
/* Capçalera */
.header {
background-color: #f8f9fa;
padding: 20px;
}
/* Contingut principal */
.main-content {
margin: 20px;
}
/* Peu de pàgina */
.footer {
background-color: #343a40;
color: white;
padding: 10px;
}
- Utilitza un Sistema de Nomenclatura Consistent
Explicació
Adopta un sistema de nomenclatura consistent com BEM (Block Element Modifier) per mantenir el codi organitzat i fàcil de seguir.
Exemple
<!-- BEM -->
<div class="card">
<div class="card__header">Capçalera</div>
<div class="card__body">Cos</div>
<div class="card__footer">Peu de pàgina</div>
</div>
- Minimitza l'Ús de !important
Explicació
L'ús excessiu de !important pot fer que el codi sigui difícil de mantenir i depurar. Utilitza'l només quan sigui absolutament necessari.
Exemple
/* Mal exemple */
.button {
background-color: blue !important;
}
/* Bon exemple */
.button {
background-color: blue;
}
- Utilitza Variables de CSS
Explicació
Les variables de CSS (custom properties) permeten definir valors reutilitzables, cosa que facilita la gestió i l'actualització dels estils.
Exemple
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
.button {
background-color: var(--primary-color);
}
.button-secondary {
background-color: var(--secondary-color);
}
- Optimitza el Rendiment del CSS
Explicació
Evita l'ús de selectores ineficients que poden afectar el rendiment del navegador. Utilitza selectores simples i evita els selectores universals o descendents profunds.
Exemple
- Utilitza eines de Linting
Explicació
Les eines de linting com Stylelint poden ajudar a mantenir la qualitat del codi CSS, identificant errors i assegurant que es segueixin les millors pràctiques.
Exemple
Configura Stylelint en el teu projecte:
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": 2,
"number-leading-zero": "always"
}
}
- Escriu CSS Modular
Explicació
Divideix el teu CSS en fitxers més petits i modulars per facilitar la gestió i manteniment. Utilitza un preprocessor com Sass per combinar-los en un sol fitxer.
Exemple
/* _header.scss */
.header {
background-color: #f8f9fa;
padding: 20px;
}
/* _footer.scss */
.footer {
background-color: #343a40;
color: white;
padding: 10px;
}
/* main.scss */
@import 'header';
@import 'footer';Resum
En aquesta secció, hem après diverses millors pràctiques per escriure CSS eficient i mantenible, incloent l'ús de noms de classes significatius, evitar l'ús excessiu de selectors ID, organitzar el codi, utilitzar un sistema de nomenclatura consistent, minimitzar l'ús de !important, utilitzar variables de CSS, optimitzar el rendiment, utilitzar eines de linting i escriure CSS modular. Seguir aquestes pràctiques t'ajudarà a crear fulls d'estil que siguin fàcils de llegir, entendre i mantenir.
Domini del CSS: De Principiant a Avançat
Mòdul 1: Introducció al CSS
- Què és el CSS?
- Sintaxi i Selectors de CSS
- Com Afegir CSS a HTML
- Propietats Bàsiques de CSS
- Colors en CSS
- Unitats i Mesures en CSS
Mòdul 2: Estilització de Text i Fonts
- Propietats de Text
- Propietats de Fonts
- Integració de Google Fonts
- Alineació i Espaiat de Text
- Decoració i Transformació de Text
Mòdul 3: Model de Caixa i Disseny
- Comprendre el Model de Caixa
- Marge i Farciment
- Vora i Contorn
- Amplada i Alçada
- Dimensionament de Caixa
- Propietat de Visualització de CSS
Mòdul 4: Posicionament i Flotació
- Propietat de Posició de CSS
- Posicionament Estàtic, Relatiu, Absolut i Fix
- Flotació i Neteja de CSS
- Crear Dissenys amb Flotació
- Índex Z de CSS
Mòdul 5: Flexbox
- Introducció a Flexbox
- Propietats del Contenidor Flex
- Propietats dels Elements Flex
- Crear Dissenys amb Flexbox
- Disseny Responsiu amb Flexbox
Mòdul 6: CSS Grid
- Introducció a CSS Grid
- Propietats del Contenidor Grid
- Propietats dels Elements Grid
- Crear Dissenys amb CSS Grid
- Disseny Responsiu amb CSS Grid
Mòdul 7: Tècniques Avançades de CSS
Mòdul 8: Disseny Responsiu
- Introducció al Disseny Responsiu
- Consultes de Mitjans
- Tipografia Responsiva
- Imatges Responsives
- Disseny Mobile-First
Mòdul 9: Preprocessadors i Frameworks
- Introducció als Preprocessadors de CSS
- Conceptes Bàsics de Sass
- Conceptes Bàsics de Less
- Introducció als Frameworks de CSS
- Ús de Bootstrap
Mòdul 10: Millors Pràctiques i Optimització
- Millors Pràctiques de CSS
- Organització del Codi CSS
- Minificació de CSS
- Optimització del Rendiment de CSS
- Depuració de CSS