rule for class and id naming convention

[lhwparis]

it would be very nice if csslint can check for class and id naming convention. maybe give multiple choices like camelcase, with - and so on? jshint does that for variables and i thik thats very cool and another way to get clean css code :)

[lukasoppermann]

👍 I would really appreciate this. It is very helpful for e.g. when migrating a css base to BEM or similar.

It would be awesome if a rule could be added and the user would have the option to pass in a regex to verify class names. By default it could check for standard BEM. I use something like this:

csslint.addRule({
  id: "oocss",
  name: "OOCSS",
  desc: "Class names must follow the pattern .(o|c|u|is|has|js|qa)-[a-z0-9-]+((_{2}|-{2})?[a-z0-9-]+)?(-{2}[a-z0-9-]+)?[a-z0-9]",
  browsers: "None",

  //initialization
  init: function(parser, reporter){
    "use strict";
    var rule = this;
    parser.addListener("startrule", function(event){

      var line        = event.line,
          col         = event.col;

      for (var i=0,len=event.selectors.length; i < len; i++){
        var selectors = event.selectors[i].text.split(/(?=\.)/);

        for (var s=0,l=selectors.length; s < l; s++){
          var selector = selectors[s].trim();

          if(selector.charAt(0) !== '.'){
            return;
          }

          if(!selector.match(/^\.(_)?(o|c|u|is|has|js|qa)-[a-z0-9-]+((_{2}|-{2})?[a-z0-9-]+)?(-{2}[a-z0-9-]+)?[a-z0-9]$/) {
            reporter.warn("Bad naming: "+selector, line, col, rule);
          }
        }
      }
    });
  }
});

Any chance of this getting added? I would think @stubbornella would probably approve, since she sort of started the whole OOCSS movement. :-)

I am happy to support, I would add a PR, but I have no idea how to get a regex from the user of csslint.

[mikeabiezzi]

+1 this would indeed be nice