CSS completo

Author: s0raya

public/images/boxmodel.webp

@@ -0,0 +1,146 @@
+---
+title: Buenas prácticas
+description: ""
+pubDate: '12/03/2024'
+collection: css
+---
+
+Escribir CSS limpio, estructurado y mantenible es tan importante como dominar sus propiedades.  
+Un buen diseño no solo debe verse bien, sino ser fácil de actualizar, escalar y optimizar.
+
+## Organización del código
+
+Estructura tu CSS para que sea fácil de leer y mantener.
+
+**Ejemplo básico de orden**
+1. Reset o normalización (por ejemplo, normalize.css)
+2. Variables y configuraciones globales
+3. Estilos base (body, tipografía, enlaces)
+4. Layout general (contenedores, cabeceras, pies)
+5. Componentes y módulos
+6. Utilidades o clases auxiliares
+
+**Ejemplo de estructura**
+```css
+/* 1. Variables globales */
+:root {
+  --color-primario: #4a90e2;
+  --color-secundario: #50e3c2;
+  --fuente-base: 'Roboto', sans-serif;
+}
+
+/* 2. Estilos base */
+body {
+  font-family: var(--fuente-base);
+  color: #333;
+  background-color: #fafafa;
+}
+
+/* 3. Layout */
+header, footer {
+  background: var(--color-primario);
+  color: white;
+  padding: 1rem;
+}
+
+/* 4. Componentes */
+.boton {
+  background: var(--color-secundario);
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+}
+
+/* 5. Utilidades */
+.texto-centrado {
+  text-align: center;
+}
+```
+
+## Metodologías para escribir CSS mantenible
+
+### BEM (Block Element Modifier)
+
+La metodología **BEM** organiza las clases de forma clara y semántica.
+
+**Ejemplo:**
+```html
+<div class="tarjeta tarjeta--destacada">
+  <h2 class="tarjeta__titulo">Título</h2>
+  <p class="tarjeta__descripcion">Descripción del contenido.</p>
+</div>
+```
+
+**Estructura BEM:**
+- **Bloque:** el componente independiente (`tarjeta`)
+- **Elemento:** parte interna del bloque (`tarjeta__titulo`)
+- **Modificador:** variación o estado (`tarjeta--destacada`)
+
+Ventajas:
+- Código más predecible y fácil de escalar.
+- Menos colisiones entre estilos.
+- Mayor reutilización de componentes.
+
+### OOCSS (Object-Oriented CSS)
+
+Separar la **estructura** del **estilo visual**.  
+Por ejemplo, un contenedor `.box` define el layout, mientras que `.tema-azul` define los colores.  
+Así se pueden combinar fácilmente.
+
+### SMACSS (Scalable and Modular Architecture for CSS)
+
+Divide el CSS en categorías:
+1. Base  
+2. Layout  
+3. Módulo  
+4. Estado  
+5. Tema  
+
+Ideal para proyectos grandes o en equipos.
+
+## Uso de variables CSS
+
+Las variables (`custom properties`) hacen el código más dinámico y consistente.
+
+```css
+:root {
+  --color-acento: #ff5722;
+  --espaciado-base: 1rem;
+}
+
+button {
+  background: var(--color-acento);
+  margin: var(--espaciado-base);
+}
+```
+
+También se pueden redefinir en secciones específicas:
+
+```css
+.dark-mode {
+  --color-acento: #ff9800;
+}
+```
+
+## Preprocesadores
+
+Los preprocesadores como **SASS/SCSS** o **LESS** amplían las capacidades del CSS estándar.
+
+Ventajas:
+- Variables, funciones y mixins reutilizables.
+- Anidación más limpia.
+- Importación modular de archivos.
+- Código más legible y organizado.
+
+**Ejemplo SCSS**
+```scss
+$color-principal: #4a90e2;
+
+.boton {
+  background: $color-principal;
+  &:hover {
+    background: darken($color-principal, 10%);
+  }
+}
+```

src/content/css/buenas_practicas.md

@@ -0,0 +1,234 @@
+---
+title: Colores, fondos y tipografía
+description: ""
+pubDate: '10/03/2024'
+collection: css
+---
+
+El color, el fondo y la tipografía son elementos clave del diseño web.  
+CSS permite controlar su apariencia con precisión, logrando estilos legibles, coherentes y visualmente atractivos.
+
+## Colores en CSS
+
+Los colores se pueden definir de distintas maneras según la necesidad:
+
+- **Nombres predefinidos**
+    ```css
+    p {
+        color: red;
+    }
+    ```
+
+- **Valores hexadecimales**
+    ```css
+    p {
+        color: #ff0000;
+    }
+    ```
+
+- **RGB y RGBA**
+    ```css
+    p {
+        color: rgb(255, 0, 0); /* rojo puro */
+        color: rgba(255, 0, 0, 0.5); /* con transparencia */
+    }
+    ```
+
+- **HSL y HSLA**
+    ```css
+    p {
+        color: hsl(120, 50%, 50%);
+        color: hsla(120, 50%, 50%, 0.7);
+    }
+    ```
+
+- `hsl(hue, saturation, lightness)` permite manipular el tono, saturación y luminosidad.  
+- `a` (alpha) controla la opacidad, de 0 a 1.
+
+- **Variables de color (custom properties)**
+    ```css
+    :root {
+    --color-primario: #007acc;
+    }
+
+    h1 {
+        color: var(--color-primario);
+    }
+    ```
+
+Las variables permiten mantener consistencia de color en todo el sitio.
+
+## Fondos (background)
+
+Los fondos pueden ser colores planos, degradados o imágenes.
+
+- **Color de fondo**
+    ```css
+    div {
+        background-color: lightgray;
+    }
+    ```
+
+- **Imagen de fondo**
+    ```css
+    body {
+        background-image: url("fondo.jpg");
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+    }
+    ```
+
+- **Degradado como fondo**
+    ```css
+    section {
+        background: linear-gradient(to right, #4a90e2, #50e3c2);
+    }
+    ```
+
+- **Propiedades útiles de background**
+    - `background-color`: define el color base.  
+    - `background-image`: establece una imagen o degradado.  
+    - `background-repeat`: controla la repetición (`repeat`, `no-repeat`, `repeat-x`, `repeat-y`).  
+    - `background-position`: define la posición inicial (`center`, `top`, `bottom`, valores en px o %).  
+    - `background-size`: ajusta la imagen (`cover`, `contain` o medidas personalizadas).  
+    - `background-attachment`: controla el desplazamiento (`scroll`, `fixed`, `local`).  
+
+- **Ejemplo completo**
+    ```css
+    header {
+        background: url("cabecera.jpg") no-repeat center center / cover;
+        color: white;
+        height: 300px;
+        text-align: center;
+    }
+    ```
+
+## Tipografía y fuentes
+
+La tipografía define la personalidad del sitio.  
+CSS permite controlar la familia de fuentes, el tamaño, el peso, la altura de línea, el espaciado y más.
+
+- **font-family**
+    ```css
+    body {
+        font-family: 'Open Sans', Arial, sans-serif;
+    }
+    ```
+
+    Incluye siempre fuentes de respaldo (fallbacks) para garantizar compatibilidad.
+
+- **font-size**
+    ```css
+    h1 {
+        font-size: 2rem;
+    }
+    ```
+
+    Usa unidades relativas (`em`, `rem`, `%`) para adaptabilidad.
+
+- **font-weight**
+    ```css
+    strong {
+        font-weight: bold;
+    }
+    ```
+
+    Valores: `normal`, `bold`, `lighter`, o numéricos (`100` a `900`).
+
+- **font-style**
+    ```css
+    em {
+        font-style: italic;
+    }
+    ```
+
+- **line-height**
+    ```css
+    p {
+        line-height: 1.6;
+    }
+    ```
+
+    Controla el espaciado vertical entre líneas de texto.
+
+- **letter-spacing y word-spacing**
+    ```css
+    h2 {
+        letter-spacing: 2px;
+        word-spacing: 5px;
+    }
+    ```
+
+    Ajustan el espacio entre letras o palabras.
+
+## Cargar fuentes personalizadas
+
+Puedes importar fuentes externas mediante Google Fonts o archivos locales.
+
+**Ejemplo con Google Fonts**
+```css
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+body {
+  font-family: 'Roboto', sans-serif;
+}
+```
+
+**Ejemplo con archivo local**
+```css
+@font-face {
+  font-family: 'MiFuente';
+  src: url('fonts/MiFuente.woff2') format('woff2');
+}
+
+h1 {
+  font-family: 'MiFuente', sans-serif;
+}
+```
+
+## Transformaciones y decoración de texto
+
+- **text-transform**
+    ```css
+    h1 {
+        text-transform: uppercase;
+    }
+    ```
+
+    Convierte el texto en mayúsculas, minúsculas o capitaliza la primera letra de cada palabra.
+
+- **text-decoration**
+    ```css
+    a {
+        text-decoration: none;
+    }
+    ```
+
+    Controla subrayados, tachados, etc.  
+    Valores: `underline`, `line-through`, `overline`, `none`.
+
+- **text-shadow**
+    ```css
+    h1 {
+        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+    }
+    ```
+
+    Agrega una sombra al texto.
+
+- **color de fondo detrás del texto**
+    ```css
+    mark {
+        background-color: yellow;
+    }
+    ```
+
+## Buenas prácticas
+
+- Usa colores con suficiente contraste para la accesibilidad (ver WCAG).  
+- Define una paleta coherente de colores primarios y secundarios.  
+- Usa variables CSS (`--color-...`) para mantener consistencia visual.  
+- Evita fuentes decorativas excesivas: máximo 2 o 3 familias tipográficas por sitio.  
+- Usa unidades relativas para tamaños de texto y evita píxeles fijos.  
+- Comprueba la legibilidad en diferentes dispositivos.