# Alga CSS
Alga CSS is a component oriented CSS framework for quickly inject, reuse or compose the style in a single file and can be called inside JavaScript framework SFC file. It can help build any Web Application faster by using defualt component first and then the component or the style can be modified to what the Client/Customer want.
All the main features:
1. Created for global/scoped CSS
2. As a PostCSS plugin
3. Can be stored as an Alga component (`@alga` directive and `.alga` format file)
4. And then can be converted to CSS component (`@layer` cascading inheritance)
5. Extract classes from any major JS Frameworks
## Installation and Setup
Alga CSS built on top of PostCSS, so before installing Alga CSS, you need to have PostCSS first and after that you can use NPM or Yarn to install this Alga CSS.
```sh
npm install alga-css --save-dev
#or
yarn add alga-css --dev
#or for testing (with next tag)
npm install alga-css@next --save-dev
```
If you use tool that support PostCSS out of the box like Vite for instance, you just need to create a new config file which is `postcss.config.cjs` and add the code below to that file.
```js
const algacss = require('alga-css')
module.exports = {
plugins: [
algacss({
important: false, /*you may want to render style inside @layer cascading inheritance*/
directive: 'use', /*insert 'layer' if you want a valid CSS, @layer instead of @use*/
mode: '[data-mode={theme}]', /*you can replace it with '.{theme}-mode' */
extract: [
'./src/**/*.html',
'./src/**/*.{otherFormat}'
],
src: './src/styles/*.alga',
plugins: []
})
]
}
```
## Compiling to CSS Cascading Inheritance
Alga CSS support converting component from `.alga` format file to `.css` file and it will compile all the code within `@alga` directive and place it inside `@layer` cascading inheritance and it can be imported directly to another CSS file or maybe injected to JS Framework via specific tools.
```sh
npx alga-css navBar ./path/to/navBar.css
#or
npx alga-css ./folder/navBar.alga ./folder/navBar.css
```
The command line above will generate a new CSS file with `@layer` cascading inheritance inside it after being executed in the terminal.
```css
/* ./folder/navBar.css */
@layer navBar {
.navBar {
...
}
}
```
## CSS Component
We provide `.alga` format file for storing styles as a component within `@alga` directive and can be converted to `@layer` cascade inheritance within `.css` file, this only happen if the `important` option has been set to `false`, this is because in the pass all utility-classes of Alga CSS rely on `!important` to override the css property value from certain component.
```css
/* navBar.alga */
@define refs {
name: navBar;
}
@define props {
size: 0.75rem;
}
@alga {refs.name} {
.{refs.name} {
ref: position-relative zIndex-3;
ref-paddingTop: {props.size};
ref-paddingBottom: {props.size};
}
}
/* navBar.vue