# css-styleguide-validator

> styleguide ===

Latest version **0.0.4** (published 2017-10-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install css-styleguide-validator
pnpm add css-styleguide-validator
yarn add css-styleguide-validator
bun add css-styleguide-validator
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2017-10-02 |
| First published | 2017-09-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | faebeee |
| Maintainers | faebeee |

## Links

- npm: https://www.npmjs.com/package/css-styleguide-validator
- Repository: https://github.com/faebeee/css-checker
- Homepage: https://github.com/faebeee/css-checker#readme
- Issues: https://github.com/faebeee/css-checker/issues
- npm.io page: https://npm.io/package/css-styleguide-validator

## Dependencies (7)

- [cssdom](https://npm.io/package/cssdom.md) ^1.0.20
- [blessed](https://npm.io/package/blessed.md) ^0.1.81
- [cssjson](https://npm.io/package/cssjson.md) ^2.1.3
- [bluebird](https://npm.io/package/bluebird.md) ^3.5.0
- [css-what](https://npm.io/package/css-what.md) ^2.1.0
- [parse-unit](https://npm.io/package/parse-unit.md) ^1.0.1
- [blessed-contrib](https://npm.io/package/blessed-contrib.md) ^4.8.5

## Recent versions

- 0.0.4 (latest) — 2017-10-02
- 0.0.3 — 2017-09-30
- 0.0.2 — 2017-09-30

## README

styleguide
===

[![CircleCI](https://circleci.com/gh/faebeee/css-checker.svg?style=svg)](https://circleci.com/gh/faebeee/css-checker)

Setup
===
install

    npm install css-styleguide-validator --save-dev
    
create your file to validate the css

    "use strict";
    
    const unit = require('unit.js');
    const styleguide = require('css-styleguide-validator');
    
    let rules = {
        selector: {
            maxChainLength: 3,
            maxNameLength : 20,
            allowId : false
        },
        attributes: {}
    };
    
    styleguide.fromString('.test .test2 .test { width: 100%; } #id{background:blue;}', rules)
        .then((result) => {
            styleguide.render(result);
        })
        .catch((e) => {
            unit.fail(e.message)
        });
        
this code will give you a result like


[![result](./doc/result.png)](https://circleci.com/gh/faebeee/css-checker)


you can also load the CSS from a file

 
    ...
    styleguide.fromFile('path/to/file.css', rules)
        .then((result) => {
            cssChecker.render(result);
        })
        .catch((e) => {
            unit.fail(e.message)
        });


Implemented Rules
====

### Selector validation

#### SelectorChainLengthValidator

Validate the css selector chain.

    maxChainLength: 3

validates the selector chain like `.foo .bar .baz` that has a value of 3


#### SelectorNameLengthValidator

Validate the css selector name length to keep your names simple

    maxNameLength: 20

validates the selector chain like `.foo` that has a value of 3

#### SelectorIdValidator

Avoid writing IDs

    allowId: false

---
_Source: https://npm.io/package/css-styleguide-validator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._