plutonium-CSS Statistic Report Site

Generates a static web site about CSS statistics from your project. You configure this project to look at a project or folder of CSS and extracts CSS statistics that can better guide the development and direction of CSS resources. Examples examples of high level statistics are file sizes and total selectors, classes, ids and detail level statistics are unique declarations and line by line specificity.

Usage

This is a command line tools that you can point at CSS files and generate a report on the CSS.

Getting Started

Prerequisites

You will need node.js install for this project. You can view the download page or install via (package manager)(https://nodejs.org/en/download/package-manager/)

Installing

NPM

Install the package with npm.

npm install -g plutonium-CSS

Usage

CLI

The cli tool will need 2 parameters -s is the path to the repo or CSS files on analyze. The other is where you want the folder for the static site generated.

plutonium-css -s path/to/git/repo/input -o path/to/static/site/output

Node.js

let c-css = require('plutonium-css');
let result = c-CSS('path/to/file.css','./dist');

Options

-s --source - the source directory with CSS files to be analyzed.
-o --output - the location to output the static site.

CSS Health Markers

Health markers are used to to create and overall picture of the health of something. Individual markers do not indicate a problem unless extremely out of range an Example would be the color property being used 1000 time and having 900 unique colors. This is a good indication that there is a bad preprocessor rule somewhere. Most of the time issues will not be so obvious. These statistics are meant to provide you with data so you can start asking the right questions. Exploring the areas of rule combination and solve issues unique to your project.

General Statistics

This area will provide general information of counts for classes, rules, selectors, Ids, and file size.

Unique Background Colors

This displays all of the unique background colors. Since the same color can be represented in different ways all variations are considered unique. The following will all be represented as unique values even though they are the same color. This report along with the total vs unique property for the background-color is helpful for keeping your CSS colors trim and consistent.

.class_A {
  background-color: #CCC;
}
.class_B {
  background-color: #CCCCCC;
}
.class_C {
  background-color: #ccc;
}
.class_D {
  background-color: #cccccc;
}
.class_E {
  background-color: rgb(204,204,204);
}
.class_F {
  background-color: hsl(0, 0, 80);
}

Unique Font Colors

Same as the background-color but for font colors. See [Unique Background Colors](#Unique Background Colors) above.

.class_A {
  color: #CCC;
}
.class_B {
  color: #CCCCCC;
}
.class_C {
  color: #ccc;
}
.class_D {
  color: #cccccc;
}

Unique Font Size

This displays all of the font sizes found in the CSS. Fonts may use different measurement type (Ex. em, %, rem, pt, px) but may appear to be the same size. If your project has a rule of only using ems then this would be a good place to look for rogue rules. On the other hand if you have different measurements that look to be the same size then maybe this is an opportunity for consolidation.

Note: If you are including CSS for other project and those are in the report that that may be the source of the different settings.

Total vs. Unique

This lists out the CSS properties used in the the CSS by total count of the property and the unique value count of the property. The Unique value will never exceed the total. A high total value means that there are a high number of identical rules repeated in your CSS files.

.class_A {
  font-size: 110%;
  color: #000000;
}
.class_B {
  font-size: 110%;
  color: #000000;
}
.class_C {
  font-size: 200%;
  color: #000000;
}

This will report the color has 3 total and 1 unique but it will report the font-size has 3 total and 2 unique. This can be the result of variables used in sass or less. This is neither good nor bad it is just alerting you to a fact and you should look at the properties that have high total to unique ratios to see if there is an opportunity to make the CSS more modular and portable.

Specificity Graphs

Imagine the CSS file turned on its side and the point on the graphs are the specificity of each line of CSS. This gives you a visual representation of the the distribution of the CSS specificity in the file. This can help identify how modular your CSS is in the CSS files.

Specificity Report

This break out the specificity of each rule on a rule by rule basis. You can easy see the score of each line.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Running the tests

Explain how to run the automated tests for this system

Break down into unit tests

Explain what these tests test and why

Give an example

Break down into integration tests

Explain what these tests test and why

Give an example

Break down into end to end tests

Explain what these tests test and why

Give an example

And coding style tests

Explain what these tests test and why

Give an example

Deployment

Add additional notes about how to deploy this on a live system

Gitlab's piplines

Built With

• CSSstats - Parses stylesheets and returns an object with statistics.
• mocha - Mocha is a feature-rich JavaScript test framework
• commander - The complete solution for node.js command-line interfaces, inspired by Ruby's commander.

Recommended Tools

These are helpful external tools that are used but are not needed nor are they a dependency.

• npm-check - Check for outdated, incorrect, and unused dependencies.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Chris Marks - Initial work - chrismarksus

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Inspiration

Links

• statistics properties