From 00e2717653dd1dcc285ba5bb25be3485e4969bb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Thu, 7 May 2015 19:50:14 +0200 Subject: [PATCH] Rising scores on CSS Complexity and Bad CSS --- lib/metadata/policies.js | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/lib/metadata/policies.js b/lib/metadata/policies.js index fc18c4d..6cd0aa7 100644 --- a/lib/metadata/policies.js +++ b/lib/metadata/policies.js @@ -487,9 +487,9 @@ var policies = { "tool": "phantomas", "label": "Rules count", "message": "

Having a huge number of CSS rules hurts performances. If the number of CSS rules is higher than the number of DOM elements, there is clearly a problem.

Huge stylesheets generally occur when the different pages of a website load all the CSS, concatenated in a single stylesheet, even if a large part of the rules are page-specific. Solution is to create one main CSS file with global rules and one custom file per page.

", - "isOkThreshold": 500, - "isBadThreshold": 2500, - "isAbnormalThreshold": 4000, + "isOkThreshold": 750, + "isBadThreshold": 3000, + "isAbnormalThreshold": 4500, "hasOffenders": false }, "cssComplexSelectors": { @@ -497,7 +497,7 @@ var policies = { "label": "Complex selectors", "message": "

Complex selectors are CSS selectors with 4 or more expressions, like \"#header ul li .foo\".

They are adding more work for the browser, and this could be avoided by simplifying selectors.

", "isOkThreshold": 0, - "isBadThreshold": 500, + "isBadThreshold": 600, "isAbnormalThreshold": 2000, "hasOffenders": true, "offendersTransformFn": function(offenders) { @@ -515,8 +515,8 @@ var policies = { "label": "Complex attributes selector", "message": "

Complex attributes selectors are one of these:

Their matching process needs more CPU and it has a cost on performances.

", "isOkThreshold": 0, - "isBadThreshold": 50, - "isAbnormalThreshold": 100, + "isBadThreshold": 75, + "isAbnormalThreshold": 150, "hasOffenders": true, "offendersTransformFn": function(offenders) { return { @@ -600,8 +600,8 @@ var policies = { "label": "Duplicated selectors", "message": "

This is when two or more selectors are strictly identical and should be merged.

", "isOkThreshold": 0, - "isBadThreshold": 40, - "isAbnormalThreshold": 80, + "isBadThreshold": 50, + "isAbnormalThreshold": 100, "hasOffenders": true, "offendersTransformFn": function(offenders) { return { @@ -629,8 +629,8 @@ var policies = { "label": "Duplicated properties", "message": "

This is the number of property definitions duplicated within a selector.

", "isOkThreshold": 0, - "isBadThreshold": 50, - "isAbnormalThreshold": 100, + "isBadThreshold": 60, + "isAbnormalThreshold": 120, "hasOffenders": true, "offendersTransformFn": function(offenders) { return { @@ -663,7 +663,7 @@ var policies = { "label": "Empty rules", "message": "

Very easy to fix: remove all empty rules.

", "isOkThreshold": 0, - "isBadThreshold": 40, + "isBadThreshold": 50, "isAbnormalThreshold": 100, "hasOffenders": true, "offendersTransformFn": function(offenders) { @@ -717,8 +717,8 @@ var policies = { "label": "Uses of !important", "message": "

It can be useful, but only as a last resort. It is a bad practice because it overrides the normal cascading logic. The more you use !important, the more you need it again to over-override. This conducts to a poor maintainability.

", "isOkThreshold": 0, - "isBadThreshold": 50, - "isAbnormalThreshold": 150, + "isBadThreshold": 75, + "isAbnormalThreshold": 200, "hasOffenders": true, "offendersTransformFn": function(offenders) { return { @@ -752,7 +752,7 @@ var policies = { "label": "Old IE fixes", "message": "

What browser do you need to support? Once you've got the answer, take a look at these old rules that pollute your CSS code and remove them.

IE6:

IE7:

IE9:

", "isOkThreshold": 0, - "isBadThreshold": 50, + "isBadThreshold": 75, "isAbnormalThreshold": 300, "hasOffenders": true, "offendersTransformFn": function(offenders) { @@ -809,7 +809,7 @@ var policies = { "label": "Old prefixes", "message": "

Many property prefixes such as -moz- or -webkit- are not needed anymore, or by very few people. You can remove them or replace them with the non-prefixed version. This will help reducing your stylesheets weight.

", "isOkThreshold": 0, - "isBadThreshold": 50, + "isBadThreshold": 75, "isAbnormalThreshold": 300, "hasOffenders": true, "offendersTransformFn": function(offenders) { @@ -845,7 +845,7 @@ var policies = { "label": "Universal selectors", "message": "

Universal selectors are the most expensive CSS selectors.

More informations here.

", "isOkThreshold": 0, - "isBadThreshold": 40, + "isBadThreshold": 50, "isAbnormalThreshold": 150, "hasOffenders": true, "offendersTransformFn": function(offenders) { @@ -863,7 +863,7 @@ var policies = { "label": "Redundant body selectors", "message": "

This is one way to remove complexity from a CSS rule. Generally, when \"body\" is specified in a rule it can be removed, because an element is necessarily inside the body.

", "isOkThreshold": 0, - "isBadThreshold": 50, + "isBadThreshold": 60, "isAbnormalThreshold": 200, "hasOffenders": true, "offendersTransformFn": function(offenders) { @@ -884,7 +884,7 @@ var policies = { "label": "Redundant tags selectors", "message": "

Some tags included inside other tags are obvious. For example, when \"ul li\" is specified in a rule, \"ul\" can be removed because the \"li\" element is always inside a \"ul\". Same thing for \"tr td\", \"select option\", ...

Lowering compexity in CSS selectors can make the page load a little faster.

", "isOkThreshold": 0, - "isBadThreshold": 50, + "isBadThreshold": 60, "isAbnormalThreshold": 200, "hasOffenders": true, "offendersTransformFn": function(offenders) {