How to Check for Duplicate CSS Rules

Fast way to check if I'm adding duplicate css (if possible in coda)?

Some text editors will underline duplicated css.

Good text editor: atom text editor

some tips for you so you wont need any text editor auto checkers:

    1. Keep your css in order.

example:

body{}
navbar{}
footer{}
  • 2 Use comments to know what you are styling so it will be easy to continue after brake.
  • 3.keep class/id names clear! For example use .navbar / #navbar Dont use something like .thisasdafclassbadexample

How is a CSS rule evaluated, with respect to duplicate (fallback) attributes?

You are right on your assumptions. According to MDN: CSS If a browser encounters a declaration or rule it doesn't understand, it just skips it completely without applying it or throwing an error.

Read here: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS

Find duplicate CSS classes with WebStorm

there is no way to do this currently; please vote for WEB-74 to be notified on any progress with this feature

Tool to identify repeated CSS selectors across two stylesheets

There is a firefox plugin called Dust me selectores which is designed to find unused CSS code. It may be what you're looking for.

How to remove duplicate CSS styles from a string using JavaScript?

The OP asked if it could be done and specified (as I read it) the removal of duplicate rules. A simplistic approach:

  • Split by rule end }
  • Trim off white space and re-attach delimiter
  • Filter out duplicates
  • Join into string

var style = ".button:hover {background: #fff} p.test {font-size: 11px} .button:hover {background: #fff} .button:hover {background: #fff} #one .button {color: #000} #two .button {color: #000}";

var uniqueRules = style

.split('}')

.map(function(rule) {

return rule ? rule.trim() + '}' : '';

})

.filter(function(rule, index, self) {

return self.indexOf(rule) === index;

})

.join(' ');

console.log(uniqueRules);

Checking for selector duplicates in a css file with javascript

let s = `.u-br, .u-nr {
blah blah
}

.u-tr {
blah .blah
}`;
let selectors = s.match(/\.-?[_a-zA-Z]+[\w-]*(?=[^{}]*\{)/g);

function hasDuplicates(array) {
return (new Set(array)).size !== array.length;
}
console.log(hasDuplicates(selectors));//false;

//Find the duplicates
var sorted_arr = selectors.slice().sort();

var results = [];
for (var i = 0; i < sorted_arr.length - 1; i++) {
if (sorted_arr[i + 1] == sorted_arr[i]) {
results.push(sorted_arr[i]);
}
}

console.log(results);

VS Code extension to highlight duplicates css properties

There are built-in settings which will flag duplicate properties :

// Do not use duplicate style definitions.

 "css.lint.duplicateProperties": "ignore",

// Do not use duplicate style definitions.

 "less.lint.duplicateProperties": "ignore",

// Do not use duplicate style definitions.

"scss.lint.duplicateProperties": "ignore"

Options are ignore, warning and error. Default is "ignore".



Related Topics



Leave a reply



Submit