0

そのため、使用するファイルが少ない（多くのファイル）、かなり適切なサイズのコードベースがあります。css を変換して BEM (実際には BEM の変形) を使用したいのですが、命名規則を含むより少ないファイルをリントする方法を見つけたいと思っています。

これを行う方法はありますか？

したがって、基本的には、すべてのデフォルトの css lint を使用し、さらに、壊れない可能性のある命名規則を定義したいと考えています。

たとえば、クラスは c-、u-、または o- で始まる必要があり、他のクラスは許可されていません。

4

1 に答える 1

2

https://github.com/necolas/postcss-bem-linterのようなポストプロセッサが何らかの理由で機能しない場合。独自のプラグインを作成することも、Less プラグインを作成することもできます。少ないプラグインは、ビジターまたはポストプロセスとして使用できます。

たとえば、クラスは c-、u-、または o- で始まる必要があり、他のクラスは許可されていません。

上記の要件をチェックする訪問者プラグインの例:

 <!DOCTYPE html>
 <html>
 <head>
 <title>BEM Validation</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="bem.less" rel="stylesheet/less">
<script>
var ValidateBEM = function(less) {
    this._visitor = new less.visitors.Visitor(this);
};
ValidateBEM.prototype = {
    isReplacing: true,
    run: function (root) {
    return this._visitor.visit(root);
    },
    visitRuleset: function (rulesetNode, visitArgs) {
        console.log(visitArgs);
        if(rulesetNode.selectors) {

        for (var i = 0; i < rulesetNode.selectors.length; i++) {

            if(rulesetNode.selectors[i].elements[0].value.match(/^\./)){


                if(!rulesetNode.selectors[i].elements[0].value.match(/^\.[cuo]-/))
                {
                console.log(rulesetNode.selectors[i].elements[0]);
                throw { type: 'BEM Validation',
                message: "class names should start with c-, u- or o-",
                filename: rulesetNode.selectors[i].elements[0].currentFileInfo.filename,
                index: rulesetNode.selectors[i].elements[0].index };
                }   

            }   
        }

        }   

        return rulesetNode;
    }
};

var ValidateBEMPlugin = {
    install: function(less, pluginManager) {
        pluginManager.addVisitor(new ValidateBEM(less));
    }
}; 

less = { 
    env: "development",
    plugins: [ValidateBEMPlugin]
};
</script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.4.0/less.min.js"></script>

</head> 
<body>
<header>
    <h1>header</h1>
</header>




</body>
</html>

bem.less次のクラスが含まれている場合:

.class {
t:test;
}

上記の場合、以下に示すようなエラーが発生します。

ここに画像の説明を入力

Grunt-contrib-less を使用すると、Less プラグインも使用できます。

less: {
  production: {
    options: {
      paths: ["assets/css"],
      plugins: [
        new (require('less-plugin-bem'))({browsers: ["last 2 versions"]}),
      ] }
}
}

上記で使用したプラグインはブラウザーでのみ機能します。CLI バージョンを作成する方法については、プラグインを活用したカスタム関数で Less コンパイラーを拡張する方法を参照してください。

于 2015-03-12T22:44:42.027 に答える