Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/declarations per rule metric #29

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion docs/metrics/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ Parker has a suite of metrics that are useful for measuring stylesheets. What fo
4. [Total Declarations](#total-declarations)
5. [Selectors Per Rule](#selectors-per-rule)
6. [Identifiers Per Selectors](#identifiers-per-selector)
7. [Declarations Per Rule](#declarations-per-rule)
3. [Specificity](#specificity)
1. [Specificity Per Selector](#specificity-per-selector)
2. [Top Selector Specificity](#top-selector-specificity)
Expand Down Expand Up @@ -78,7 +79,7 @@ Measures the total number of rules. Each rule defines a specific behaviour of th
- __aggregate__: sum
- __format__: number


<a name="total-selectors"></a>
#### Total Selectors
Measures the total number of selectors. Each selector defines a group of elements affected by the design. Stylesheets with fewer selectors are simpler.

Expand Down Expand Up @@ -108,6 +109,7 @@ Measures the total number of property declarations. Each property declaration de
- __aggregate__: sum
- __format__: number

<a name="selectors-per-rule"></a>
#### Selectors Per Rule
Measures the average number of selectors in every rule. Stylesheet rules can be applied to several groups of elements using multiple selectors, separated by a comma. Fewer selectors in a rule makes its properties specific to a smaller group of elements, and also makes a rule easier to read in text editors and developer tools.

Expand All @@ -117,6 +119,7 @@ Measures the average number of selectors in every rule. Stylesheet rules can be
- __aggregate__: sum
- __format__: number

<a name="identifiers-per-selector"></a>
#### Identifiers Per Selector
Measures the average number of identifiers in every selector. Selectors can be made more specific to combinations of elements by adding more identifiers to a selector. Fewer identifiers in a given selector reduces its dependency on certain DOM structures, allowing more changes to your HTML before being forced to change your CSS. Selectors with fewer identifiers are also more readable.

Expand All @@ -126,6 +129,16 @@ Measures the average number of identifiers in every selector. Selectors can be m
- __aggregate__: mean
- __format__: number

<a name="declarations-per-rule"></a>
#### Declarations Per Rule
Measures the average number of declarations in every rule. Rules with fewer property declarations are simpler, and also makes rules easier to read in text editors and developer tools.

- __id__: declarations-per-rule
- __name__: Declarations Per Rule
- __type__: rule
- __aggregate__: mean
- __format__: number

<a name="specificity"></a>
### Specificity
A rule can be overrided by another rule with a more specific selector. Complexity is added to stylesheets when multiple levels of cascading rules are used in stylesheets, because it becomes more difficult to predict which properties apply to a given element without keeping in mind other rules.
Expand Down
1 change: 1 addition & 0 deletions metrics/All.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ module.exports = [

// Stylesheet Element Averages
require('./SelectorsPerRule.js'),
require('./DeclarationsPerRule.js'),
require('./IdentifiersPerSelector.js'),

// Specificity
Expand Down
16 changes: 16 additions & 0 deletions metrics/DeclarationsPerRule.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*! Parker v0.0.0 - MIT license */

'use strict';

var CssRule = require( "../lib/CssRule.js" );

module.exports = {
id: 'declarations-per-rule',
name: 'Declarations Per Rule',
type: 'rule',
aggregate: 'mean',
format: 'number',
measure: function (rule) {
return (new CssRule(rule)).getDeclarations().length;
}
};
52 changes: 52 additions & 0 deletions test/DeclarationsPerRule.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/*! Parker v0.0.0 - MIT license */

var expect = require('chai').expect,
Parker = require('../lib/Parker.js'),
metric = require('../metrics/DeclarationsPerRule.js');


describe('The declarations-per-rule metric', function () {
it('should provide a string identifier for the metric', function() {
expect(metric.id).to.be.a('string');
});

it('should provide a metric type', function() {
expect(metric.aggregate).to.match(/sum|mean/g);
});

it('should return 0 for an empty string', function () {
expect(metric.measure('')).to.equal(0);
});

it('should return 1 for the selector "body {color:blue;}"', function() {
expect(metric.measure('body {color:blue;}')).to.equal(1);
});

it('should return 2 for the selector "body section {color:blue;background:yellow;}"', function() {
expect(metric.measure('body section {color:blue;background:yellow;}')).to.equal(2);
});

it('should return 2 for the selector "body section {color:blue;background:yellow;} body article h3 {text-align:center;color:red;}"', function() {
var parker = new Parker([metric]),
report = parker.run('body section {color:blue;background:yellow;} body article h3 {text-align:center;color:red;}');

expect(report).to.have.property('declarations-per-rule');
expect(report['declarations-per-rule']).to.equal(2);
});

it('should return 1.5 for the selector "body section {color:blue;background:yellow;} body article h3 {text-align:center;}"', function() {
var parker = new Parker([metric]),
report = parker.run('body section {color:blue;background:yellow;} body article h3 {text-align:center;}');

expect(report).to.have.property('declarations-per-rule');
expect(report['declarations-per-rule']).to.equal(1.5);
});

it('should return 2 for the selector "body section {-webkit-something:blue;-moz-anything:yellow;} body article h3 {text-align:center;color:red;}"', function() {
var parker = new Parker([metric]),
report = parker.run('body section {-webkit-something:blue;-moz-anything:yellow;} body article h3 {text-align:center;color:red;}');

expect(report).to.have.property('declarations-per-rule');
expect(report['declarations-per-rule']).to.equal(2);
});
});