Cata CSS 💜
Base and low level components
Los contras de CSS (o del mundo CSS)
- Depender de un preprocesador (SASS, LESS, Stylus)
- Scope, naming, conventions
- Diferentes stacks o frameworks
- Portabilidad del código
- Mantención y escalabilidad
¿Por qué sistematizar CSS?
o modularizar...
Nace Cata 💜
Core features ✔️
- PostCSS
- Orientado a componentes (scope)
- Testeable
- Extendible (npm)
- Themification
Scope 👀
BEM + SuitCSS
.MyComponent {}
.MyComponent.is-animating {}
.MyComponent--modifier {}
.MyComponent-part {}
.MyComponent-anotherPart {}
Módulos CSS + NPM 📦
Simples modulos encapsulados
Cata
Cata + 😀
CSS Testing
Lint, namespacing, order, reglas globales, etc.
npm install cata-components-button
npm run lint
Cata 🏁
Terminal
yarn add cata-base
yarn add cata-variables
yarn add cata-breakpoints
yarn add cata-components-button
CSS
@import "cata-base";
@import "cata-variablaes";
@import "cata-breakpoints";
body {...}
Theming / extending
@import "cata-components-button";
:root {
--color-button: #bbb;
}
.Button--default {
background-color: var(--color-button);
color: #444;
border-color: #d9d9d9 #d9d9d9 #ccc;
border-radius: 2px;
}
CSS Pre procesador
Webpack / Vue / React / ...
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [
require('postcss-import')({ root: loader.resourcePath }),
require('postcss-cssnext')(),
require('autoprefixer')(),
require('cssnano')()
]
}
}