others - CSS - 在我的HTML中,如何查找未使用的classes?

有很多工具可用于查找未使用的CSS规则,例如,Chrome Audit和适用于Firefox的Dust-Me Selectors插件(不幸的是与Firefox Quantum不兼容)。

但是反过来呢?

如何查找样式表中不存在的HTML类中的类?

时间:

这是关于如何在html中获取类名


var classesEvery = [];


var elementsEvery = document.querySelectorAll('*');


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


 var classes = elementsEvery[i].className.toString().split(/s+/);


 for (var j = 0; j < classes.length; j++) {


 var thisClass = classes[j];


 if (thisClass && classesEvery.indexOf(thisClass) === -1)


 classesEvery.push(thisClass);


 }


}



你可以使用这个Javascript代码在html文件中获取类名,若要获取CSS中使用的所有类,请尝试列表选择器 ,我仍在思考如何获取Javascript angularJS中使用的类名。


var classesEvery = [];


var elementsEvery = document.querySelectorAll('*');


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


 var classes = elementsEvery[i].className.toString().split(/s+/);


 for (var j = 0; j < classes.length; j++) {


 var thisClass = classes[j];


 if (thisClass && classesEvery.indexOf(thisClass) === -1)


 classesEvery.push(thisClass);


 }


}


console.log(classesEvery);

.hidden {


 display: none;


}

<!-- Some random HTML code. -->


<div ng-controller="HomeController" class="container hidden">



 <span>Simple Notifications:</span>


 <div class="rows">


 <div class="col-md-2"><button class="btn btn-primary" href ng-click="simple()">Simple notification</button></div>


 <div class="col-md-2"><button class="btn btn-warning" href ng-click="warning()">Warning notification</button></div>


 <div class="col-md-2"><button class="btn btn-success" href ng-click="success()">Success notification</button></div>


 <div class="col-md-2"><button class="btn btn-danger" href ng-click="error()">Error notification</button></div>


 <div class="col-md-2"><button class="btn btn-grimace" href ng-click="wait()">Wait notification</button></div>


 <div class="col-md-2"><button class="btn btn-primary" href ng-click="pop()">Link to other page</button></div>


 </div>


 <hr/>


 <span>Addding Option from Script:</span>


 <div class="rows">


 <div class="col-md-6">


 <Span>With CLose button</span>


 <button class="btn btn-primary" href ng-click="close()">Close Button </button>


 </div>


 <div class="col-md-6">


 <Span>Fade after 1 Sec</span>


 <button class="btn btn-primary" href ng-click="timeout()">Html notification</button>


 </div>


 </div>


 <br/>


 <hr/>


 <span>Custom Notification and Body output type:</span>


 <div class="rows">


 <div class="col-md-3"><button class="btn btn-primary" href ng-click="Custom_temp()">Custom template</button></div>


 <div class="col-md-3"><button class="btn btn-primary" href ng-click="trusted_html()">Trusted HTML</button></div>


 <div class="col-md-3"><button class="btn btn-primary" href ng-click="default_temp()">Default Template</button></div>


 <div class="col-md-3"><button class="btn btn-primary" href ng-click="file_custom_temp()">Including file from Folder</button></div>


 </div>


 <script type="text/ng-template" id="myTemplate.html">


 <div class="Custom_temp_html">


 <p>Notice, custom temlate is not in the list</p>


 </div>


 </script>


</div>

来自https://github.com/philipwalton/html-inspector的HTML检查器,功能之一:

  • 未使用的类:有时,你会从样式表中删除CSS规则,但是,忘记从HTML中删除该类。"unused-classes"规则比较CSS中的所有类选择器到HTML中的类,并报告未使用的类。

    通过白名单可以忽略HTML中作为JavaScript钩子的类。默认情况下,带js-language-supports-前缀的类都是白名单,更多信息可以找到这个规则 。

或者通过脚本标记添加它:


<script src="http://cdnjs.cloudflare.com/ajax/libs/html-inspector/0.8.2/html-inspector.js"></script>



使用此代码段运行:


HTMLInspector.inspect(["unused-classes"]);



Andrew Grimm的评论指出此项目不再维护(上次提交2017年12月),幸运的是,它仍然是可以用的(2019年06月测试)。

还有 grunt-unclassify,但是这个项目似乎死了(上次提交2014年12月)。

工具grunt-unclassify看起来也不错,虽然用法似乎不简单:

https://medium.com/@mariusc23/remove-unused-css-classes-in-html-bbb856da8bdf#.55u0uokfb

当传递HTMLElement时,下面的代码输出未使用的类和id :


function unused(e) {


 const s0 = JSON.stringify(window.getComputedStyle(e));


 const c = Array.from(e.classList.values());


 if (c.length !== 0) {


 c.forEach(cc => {


 e.classList.remove(cc);


 const s = JSON.stringify(window.getComputedStyle(e));


 if (s0 === s) {


 console.log(`class ${cc} is unused`);


 }


 e.classList.add(cc);


 });


 }


 const id = e.id;


 if (id) {


 e.removeAttribute("id");


 const s = JSON.stringify(window.getComputedStyle(e));


 if (s0 === s) {


 console.log(`id ${id} is unused`);


 }


 e.id = id;


 }


}



它通过window.getComputedStyle()提取元素的样式,然后逐个删除类,并检查样式是否仍然是相同的。

...