Separando nuestros archivos CSS y uso de @import

Clase 14 de 21 • Diseño web con PostCSS, el futuro de CSS

Comentarios

Rafnix Gabriel Guzmán Garcia

student•

#Consejo para los que desean modularizar los archivos en varias carpetas! modificar la tarea ‘watch’ cuando lee los css para que quede asi:

  gulp.watch('./src/**/*.css',['css'])

con esto se revisan los 2 niveles de ficheros!

Rafael Gaviria Vega

student•

A mi si me funcionaron las Custom-media colocándolas en variables.css, me parece genial poder separar los CSS para trabajar de una manera más ordenada, POST entrega un solo CSS final con todo lo que hemos definido en nuestros estilos.

Luis Felipe Silgado Cortázar

student•

¡A mi también me funcionó! Y la verdad no veo dónde radica el error si lo hice exactamente igual. 😛

Jhonatan C Hurtado

student•

El error radica en que no se había guardado el archivo, en la parte de arriba del editor de Carlos aparecía en azul.

Renato Colarusso

student•

Hola. no me cargan las imagenes del proyecto. Alguien me puede ayudar?

Diego Forero

Team Platzi•

Con gusto te ayudamos, pero debes compartir el código que estas haciendo y si te sale algún error en la consola del navegador, de lo contrario es muy difícil darte una mano con eso.

Renato Colarusso

student•

Juan Castro

teacher•

Segun lo que yo entiendo usar links en el html es mucho mas rapido quelos imports... que recomiendan??

Juan Castro

teacher•

GENIAL!! Gracias, si se me hizo un poquito raro :)

Julio Cesar Mitac Quispe Mitac Quispe

student•

te recomiendo que uses mas los imports porque si llegas a trabajar con fullstack esto lo veras mas seguido, asi ya te vas acostumbrando.

Juan Carlos

student•

Otra opción para que no te cree varios css es con el mismo gulpfile crear en la carpeta de css de desarollo un directoria llamado ‘lib’ por ejemplo e importarlo desde ahí, así solo creará el fichero que esté en la raíz del directorio de css.

Franklin Lucero

student•

Me gustaria saber como tu editor de texto valida tu programacion para que no te marquen puros errores como me pasa a mi con PHP Storm

Diego Forero

Team Platzi•

Tienes que tener bien configurado el linter que usas, los ide’s de jetbrains son muy buenos pero tienes que configurar bien todo para no tener este tipo de errores.

Erick Neftalí Sarmiento Cortes

student•

A mi me marco error pero después de pasarlo como lo hizo el profesor regrese los media queries a variables.css y ya no marco nada.

Platzi Team

student•

Me he estado haciendo la pregunta de cómo hacer que estos plugins sean instalados globalmente y luego enlazados a cada proyecto que queramos crear para así no instalarlos por cada uno. Esto me parece especialmente importante al momento de almacenar los proyectos en el disco local

Diego Forero

Team Platzi•

Para instalar lo paquetes de manera global simplemente lo haces con sudo en el caso de linux y mac o abriendo la consola como administrado en windows y usando el flag -g.

Lo que propones es una mala idea, imagina que tienes un proyecto el cual hiciste con x versiones de librerías ya lo entregaste y todo esta ok, luego haces otro proyecto, actualizas las versiones de las librerías y alguna cambia y hay cambios que no son compatibles con versiones anteriores y haces este nuevo proyecto, luego te llaman para hacer un cambio en el primer proyecto pero es un cambio mínimo y el pago por ese cambio no es suficiente para el tiempo que tienes que invertir en actualizar el código de la dependencia que cambio, entonces tu única opción es volver a instalar las versiones de las librerías que tienes para ese proyecto, y te la vas a pasar así.

Por otro lado si tienes los paquetes instalados por proyecto no vas a tener ningún problema para hacer cambios en proyectos viejos.

Javier Moreno

student•

Que tal buen día!
Alguien sabe si la librería de import se está actualizando de manera diferente. Al aplicar el comando en terminal.

npm install --save-dev postcss-import

No se aprecia que se ejecute de manera similar al que aparece en el video.

Agradezco su ayuda. Saludos.

Javier Moreno

student•

Esta es la imagen

Separando nuestros archivos CSS y uso de @import

El futuro de CSS con PostCSS y CSSNext

Bienvenidos al modulo de PostCSS

¿Qué es PostCSS ?

Nomenclatura BEM ( Bloque, Elemento, Modificador )

Configurando nuestras tareas en Gulp: Servidor, Procesamiento de CSS y Watch

Autoprefixer: Cómo añadir vendor prefixes usando CSS standard

Anidando clases de CSS con Nested

Configurando CSSNext en nuestro archivo Gulp

Propiedades personalizadas

Usando Calc

Media queries personalizadas

Manejo de color

Manejo de filtros

Mixins: Cómo reutilizar estilos de CSS

Separando nuestros archivos CSS y uso de @import

Implementando un carousel con CSS Scroll Snap

Grids responsive con Lost

Minificando archivos con CSSWring

Fuentes responsive con rucksack

Unificando media-queries con Mqpacker

Conclusiones de PostCSS

Desafio 1

Desafio 2