Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:sistema-diseno-estructura-carpetas [2026/10/23 22:55] – Reorganización del módulo: página nueva claude
+++ clase:daw:diw:sistema-diseno-estructura-carpetas [2026/10/24 00:14] (actual) – [CSS linters] Lorenzo
@@ Línea 1: / Línea 1: @@
 ====== 16. Sistema de diseño: Estructura de carpetas ======
-Vamos finalmente a unificar todo y crear la arquitectura definitiva que vamos a usar en clase.
+Vamos finalmente a unificar todo y crear la arquitectura definitiva que vamos a usar en clase. La carpeta del SASS es la misma con Angular y sin él; lo que cambia es dónde va y cómo se compila.
 Para crear una buena arquitectura vamos a hacer lo siguiente:
@@ Línea 9: / Línea 9: @@
   * [[#Crear las páginas del proyecto]]
-La estructura del proyecto queda así:
+Si el proyecto es HTML, CSS y JavaScript sin Angular, ver [[#Proyecto sin Angular]].
+En un proyecto Angular la estructura queda así:
 <sxh gutter:false>
@@ Línea 19: / Línea 21: @@
     main.scss
 src/app/components/ui
-    /c-button
+    /c-boton
     /c-panel
 src/app/components/paginas
@@ Línea 108: / Línea 110: @@
 </sxh>
   * /04_components
-    * _cada_uno_de_los_componentes.scss: Habrá un fichero por cada Bloque que sea de tipo Componente pero que **NO sean de Angular**. Por ejemplo ''_c-button.scss'', ''_l-flex.scss'' , ''_l-columns.scss'' o ''_c-panel.scss''. Más información en [[clase:daw:diw:sistema-diseno-bem]], [[clase:daw:diw:sistema-diseno-tokens]], [[clase:daw:diw:sass]], [[clase:daw:diw:sistema-diseno-layout]]
+    * _cada_uno_de_los_componentes.scss: Habrá un fichero por cada Bloque que sea de tipo Componente pero que **NO sean de Angular**. Por ejemplo ''_c-boton.scss'', ''_l-flex.scss'' , ''_l-columns.scss'' o ''_c-panel.scss''. Más información en [[clase:daw:diw:sistema-diseno-bem]], [[clase:daw:diw:sistema-diseno-tokens]], [[clase:daw:diw:sass]], [[clase:daw:diw:sistema-diseno-layout]]
     * _index.scss: Los //imports// de cada fichero de esta carpeta.
 <sxh sass>
-@forward "./_c-button.scss";
+@forward "./_c-boton.scss";
 @forward "./_c-panel.scss";
 @forward "./_l-columns.scss";
@@ Línea 147: / Línea 149: @@
 <sxh gutter:false>
   src/app/components/ui
-     /c-button
+     /c-boton
-        c-button.ts
+        c-boton.ts
-        c-button.html
+        c-boton.html
-        c-button.scss
+        c-boton.scss
     /c-panel
@@ Línea 183: / Línea 185: @@
   * ''src/app/components/ui/l-flex'': Estamos creando componentes o atributos Angular para flex
-Lo normal es que esté uno o el otro. Lo mismo se podría aplicar a cualquier otro layout o componentes como ''c-button''.
+Lo normal es que esté uno o el otro. Lo mismo se podría aplicar a cualquier otro layout o componentes como ''c-boton''.
 </note>
@@ Línea 191: / Línea 193: @@
 Finalmente en la carpeta ''src/app/components/paginas'', añadiremos todos los componentes específicos de la aplicación. Aquí es donde se hace uso de los distintos elementos reusables que creamos en ''src/app/components/ui''
-===== CSS linters =====
+===== Proyecto sin Angular =====
-Angular incluye de serie una herramienta de procesamiento CSS llamada [[https://postcss.org/|PostCSS]]. Esta herramienta lee el CSS y permite analizarlo o hacer modificaciones.
+En un proyecto de HTML, CSS y JavaScript sin Angular la carpeta ''scss'' es exactamente la misma, pero va en la raíz del proyecto. No hay ''components/ui'': todos los componentes son ficheros de ''scss/04_components''.
-PostCSS está basado en plugins que permiten extender PostCSS con nuevos análisis o modificaciones.A las herramientas que analizan el código para ver si tiene "problemas" se le llaman //linters//.
+<sxh text;gutter:false>
+proyecto
-Nosotros vamos a usar PostCSS para analizar nuestro CSS y ver si cumple las normas de BEM. El plugin o linter que vamos a usar es [[https://github.com/postcss/postcss-bem-linter|postcss-bem-linter]].
+├─ scss
+│   ├─ 01_utilities
-Los pasos para instalarlo son
+│   ├─ 02_base
+│   ├─ 03_global
-  * Descargar el linter
+│   ├─ 04_components
+│   │   ├─ _c-boton.scss
+│   │   ├─ _c-panel.scss
+│   │   └─ _index.scss
+│   └─ main.scss
+├─ css
+│   └─ main.css         <- lo genera SASS, no se toca
+├─ js
+│   └─ main.js
+├─ index.html
+└─ productos.html
+</sxh>
+  * Instalar SASS en el proyecto:
 <sxh bash>
-npm install --save-dev postcss-bem-linter
+npm install --save-dev sass
 </sxh>
-  * Crear/modificar el fichero ''.postcssrc.json''. Debe estar en el raíz del proyecto.
+  * Compilar la carpeta ''scss'' en la carpeta ''css''. Con ''--watch'' se vuelve a compilar cada vez que guardas un ''.scss''. Solo sale ''css/main.css'' porque el resto de ficheros empiezan por ''_'' (ver [[clase:daw:diw:sass#ficheros_parciales|SASS: Ficheros parciales]]):
+<sxh bash>
-<sxh json; highlight: [4]>
+npx sass --watch scss:css
-{
-  "plugins": {
-    "postcss-bem-linter": {
-      "preset": "bem"
-    }
-  }
-}
 </sxh>
+  * Enlazar en cada página solo el CSS generado:
+<sxh html>
-<nodisp 2>
+<link rel="stylesheet" href="css/main.css">
-===== UIFactory =====
-<note tip>
-Para evitar el warning:
-  ▲ [WARNING] NG8113: Boton is not used within the template of App [plugin angular-compiler]
-Hay que añadir lo siguiente en el fichero ''tsconfig.json''
-<sxh json; highlight: [5]>
-{
-  "angularCompilerOptions": {
-    "extendedDiagnostics": {
-      "checks": {
-        "unusedStandaloneImports": "suppress"
-      }
-    }
-  }
-}
 </sxh>
-Más información:
-  * [[https://angular.dev/extended-diagnostics/NG8113#what-if-i-cant-avoid-this|NG8113: Unused Standalone Imports. What if I can't avoid this?]]
+<note important>
+El navegador no entiende SASS: enlazar ''scss/main.scss'' no aplica ningún estilo. Y ''css/main.css'' no se edita a mano, porque la siguiente compilación lo sobrescribe y se pierde lo que hayas cambiado.
 </note>
-</nodisp>