lpa - postcss€¦ · lo que no es postcss un pre-processor un post-procesador la sintaxis del...
TRANSCRIPT
![Page 1: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/1.jpg)
PostCSSHerramientas modernas para el desarrollo de temas de WordPress
![Page 2: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/2.jpg)
Diseñador UI/UXFormador
Dev especializado en WordPressActualidadBlog
dariobf.com/podcast@DarioBF
![Page 3: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/3.jpg)
Lo que NO es PostCSSUn pre-processor
Un post-procesadorLa sintaxis del futuro
Una herramienta de limpieza u optimización
![Page 4: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/4.jpg)
Lo que SI es PostCSSUna herramienta que nos permite transformar
CSS a través de JavaScript
![Page 5: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/5.jpg)
Gulp vs Grunt vs WebpackVs Broccoli vs Brunch vs ENB vs Fly vs Stylus vs
Meteor vs Duo vs Connect/Express
![Page 6: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/6.jpg)
Crédito
![Page 7: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/7.jpg)
![Page 8: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/8.jpg)
VentajasCSS Simple
VersátilModularización (lo mejor y lo peor de PostCSS)
ComunidadVelocidad
![Page 9: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/9.jpg)
Tiempos de ejecuciónPostCSS: 35 ms Rework: 38 ms (1.1 times slower) LibSass sync: 82 ms (2.3 times slower) Stylus: 87 ms (2.5 times slower) LibSass: 90 ms (2.5 times slower) Less: 91 ms (2.6 times slower) Dart Sass sync: 103 ms (2.9 times slower) Dart Sass: 169 ms (4.8 times slower) Stylecow: 199 ms (5.6 times slower)
![Page 10: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/10.jpg)
Instalación con Gulp
$ npm install --save-dev gulp-postcss
![Page 11: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/11.jpg)
gulpfile.jsvar postcss = require('gulp-postcss');
var gulp = require('gulp');
gulp.task('magiapotagia', function () {
var processors = [
//Aquí irán los diferentes plugins que vamos añadiendo
];
return gulp.src('./src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dist'));
});
![Page 12: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/12.jpg)
Activamos sourcemapsvar postcss = require('gulp-postcss');
var gulp = require('gulp');
gulp.task('magiapotagia', function () {
var processors = [
//Aquí irán los diferentes plugins que vamos añadiendo
];
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss(processors))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dist'));
});
![Page 13: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/13.jpg)
Pluginspostcss.parts
![Page 14: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/14.jpg)
![Page 15: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/15.jpg)
atImportUtilizar @import tanto con archivos localhost como node o web modules
Using PostCSS for Minification and Optimizationhttps://webdesign.tutsplus.com/tutorials/using-postcss-for-minification-and-optimization--cms-24568
PostCSS-import Repositoryhttps://github.com/postcss/postcss-import
![Page 16: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/16.jpg)
atImport
![Page 17: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/17.jpg)
preCSSSintaxis al estilo SASS
https://github.com/jonathantneal/precss
![Page 18: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/18.jpg)
PreCSS
![Page 19: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/19.jpg)
Nested & NestingAnidamiento de SASS
https://github.com/postcss/postcss-nested
Nesting al estilo W3C: http://tabatkins.github.io/specs/css-nesting/
![Page 20: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/20.jpg)
autoprefixerPrefijos para navegadores
https://github.com/postcss/autoprefixer
![Page 21: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/21.jpg)
Algunos máspostcss-mixins
pxtoremstylelint + reporter
cssnanocssnext
![Page 22: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/22.jpg)
@apply/* input */:root {
--toolbar-theme: {background-color: rebeccapurple;color: white;border: 1px solid green;
};--toolbar-title-theme: {
color: green;};
}
.toolbar {@apply --toolbar-theme;
}
.toolbar-title {@apply --toolbar-title-theme;
}
/* output */.toolbar {
background-color: rebeccapurple;color: white;border: 1px solid green;
}
.toolbar-title {color: green;
}
https://github.com/pascalduez/postcss-apply
![Page 23: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/23.jpg)
@custom-selector
@custom-selector :--ctas button, .button, .cta;
:--ctas { /* styles for all ctas */ }:--ctas + p { /* more styles */ }/* etc */
https://github.com/postcss/postcss-custom-selectors
![Page 24: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/24.jpg)
¿Y con WordPress?
![Page 25: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/25.jpg)
Modularizar
https://github.com/Wakkos/Wakkos-CSS-Framework
![Page 26: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/26.jpg)
AutomatizarMinificación CSS y JS: gulp-concat + gulp-uglify + gulp-rename
Pre procesado CSSOptimización imágenes: gulp-imagemin
![Page 27: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/27.jpg)
StylelintCumplir con los WordPress CSS Coding Standards
http://bit.ly/WP-CSS-Standard
https://stylelint.io/
![Page 28: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/28.jpg)
![Page 29: LPA - PostCSS€¦ · Lo que NO es PostCSS Un pre-processor Un post-procesador La sintaxis del futuro Una herramienta de limpieza u optimización](https://reader033.vdocuments.mx/reader033/viewer/2022042115/5e9278fc7c97dd49317e7292/html5/thumbnails/29.jpg)
dariobf.com/podcast@DarioBF
¿Preguntas?