Decent.scss
Decent is a flexible, functional CSS library for building literally anything. Designed to be as flexible and configurable as possible, it can be used for building anything from prototypes to production applications and websites.
Rationale
You might see this and think to yourself, why would anyone want to write CSS this way? So did we. But after some research and using Basscss for a bit we were hooked.
Here's what convinced us:
No Side Effects
Although the cascade can be a useful thing, more often than not it becomes a hinderance in long term projects or with projects that have multiple developers working in the code base.
Composable
Think composition over inheritance. With Decent.scss you compose your ui out of already existing blocks (think legos) of css.
Consistent
Functional CSS helps to facility consistency in your end products. With Decent.scss, all of the values for whitespace, font sizes, etc are all calculated from the same settings. This means that there are no more magic numbers hiding out in your stylesheets and that consistency is as easy as using the generated classes.
Clear & Easy to follow
There's a lot of contention around this point, but we maintain that it's easier to reason about complexity in your markup as opposed to CSS. With CSS you have to worry about inheritance as well as the cascade, two things that can work against as soon as your website or app starts to grow. By taking a few minutes to familiarize yourself with the Class Reference for Decent.scss, you'll be able to look at any markup and have a good idea of how it looks and functions.
Customizable
Decent utilizes maps to make the framework as flexible as possible. Modular scale (padding, margin, heights, and widths), font scale, typesetting, and colors are all configurable.
Useful Reads
- About HTML semantics and front-end architecture
- How not to scale css
- Expressive CSS
- CSS Purge
- Semantic CSS
- Functional Programming, CSS, and your sanity
Setup
Install the dependency.
npm install decent-scss
Then, include the path to the index file in your build – Webpack, Grunt, Gulp, Brunch, etc.
@import 'decent-scss/modules/all'