所以我有一个相当不错的代码库,使用较少(很多文件)。我想将css转换为使用BEM(实际上是BEM的一种变体),我希望找到一种方法来减少包含命名约定的文件。
有没有办法做到这一点?
所以基本上我想要所有默认的css lint内容,并另外定义可能不会被破坏的命名约定。
E.g。类需要以c-,u-或o-开头,不允许使用其他类。
答案 0 :(得分:2)
如果https://github.com/necolas/postcss-bem-linter等后处理程序由于某种原因无法为您工作。您可以自己编写,也可以创建Less插件。较少的插件可以是访客或后期处理,您可以使用。
E.g。类需要以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 Plugin:
less: {
production: {
options: {
paths: ["assets/css"],
plugins: [
new (require('less-plugin-bem'))({browsers: ["last 2 versions"]}),
] }
}
}
上面使用的插件仅适用于浏览器,请参阅How to exend the Less compiler with a custom function leveraging a plugin如何创建CLI版本。