csstyle
Clean, simple, for styling the web.
Check out the docs and examples on csstyle.io
You can use csstyle with either Sass or postcss.
Getting Started
-
Setup your project with either Sass or Postcss. If you're using Sass make sure you have the latest stable SASS (3.4).
-
Add
id="csstyle"to your html or body element. This is necessary so that components with their
parts and options can nest indefinitely yet always be overridden by tweaks. -
Download csstyle from npm:
npm install csstyle --saveor from bower:
bower install csstyle --save -
If you're using Sass, import into your stylesheets:
@import 'csstyle';
If you're using postcss, add csstyle as a plugin:
postcss([require('postcss-nested'), require('csstyle')]);
Be sure to include postcss-nested and csstyle in that order.
Now you're set and can start creating components with options & parts, adding in tweaks as needed. Enjoy!
Customizing Styling Conventions
csstyle lets you change the style conventions to whatever suits your style.
Default Symbols
options:\--parts:__tweaks:\+rootId:csstyle
With SASS
Override the defaults using SASS variables.
options:$csstyle-option-symbolparts:$csstyle-part-symboltweaks:$csstyle-tweak-symbolrootId:$csstyle-root-id
Example:
$csstyle-part-symbol: '\\/';
$csstyle-root-id: 'app';
With Postcss
Override the defaults by calling the cssytle function with an options object.
options:optionSymbolparts:partSymboltweaks:tweakSymbolrootId:rootId
Example:
require('../csstyle')({optionSymbol: '\\-', partSymbol: '\\/', rootId: 'app'})
IMPORTANT NOTE All characters besides _ need to be escaped! However, if you are using dashes, only the first one needs to be escaped. Use two backslashes to properly escape. For example to use a forward slash to separate parts, set $csstyle-part-symbol to \\/. The generated CSS classes will then be escaped with a single backslash.
FAQ
Can I use this with Libsass?
Yes. Libsass version 3.2.0 or greater fully supports csstyle.
How do parts react to component states like hover?
In Sass you can append a & to a selector or pseudo-selector to have it applied to the parent context. So for example to have a part react when the component gets hovered:
@include component(capacitor){
background: red;
@include part(flux){
background: orange;
}
&:hover & {
@include part(flux){
background: blue;
}
}
}
License
MIT