CSS规范 - 典型错误--(来自网易)



不符合NEC规范的选择器用法

        .class{}

        不要以一个没有类别的样式作为主选择器,这样的选择器只能作为后代选择器使用,比如.m-xxx .class{}。
        .m-xxx div{}

        不要以没有语义的标签作为选择器,这会造成大面积污染,除非你可以断定现在或将来你的这个选择器不会污染其他同类。
        .g-xxx .class{}

        不要在页面布局中使用后代选择器,因为这个后代选择器可能会污染里面的元素。
        .g-xxx .m-yyy{}.g-xxx .u-yyy{}

        不要用布局去控制模块或元件,模块和元件应与布局分离独立。
        .m-xxx .f-xxx{}.m-xxx .s-xxx{}

        不要通过模块或其他类来重定义或修改或添加已经定义好的功能类选择器和皮肤类选择器。
        .m-xxx .class .class .class .class{}

        不要将选择器写的过于冗长,这会额外增加文件大小并且限制了太小范围的选择器,使树形结构过于严格应用范围过于局限,建议3-4个长度之内写完。

        选择器并不需要完整反映结构嵌套顺序,相反,能简则简。
        .m-xxx .m-yyy .zzz{}

        不要越级控制,如果.zzz是.m-yyy的后代选择器,那么不允许.m-yyy之外的选择器控制或修改.zzz。

        此时可以使用.m-yyy的扩展来修改.zzz,比如.m-yyy-1 .zzz{}。

扩展类使用错误

    扩展类必须和其基类同时使用于同一个节点。

        错误:class="g-xxx g-yyy-1" class="m-xxx-1" class="u-xxx u-yyy-1" class="xxx-yyy"。
        正确:class="g-xxx g-xxx-1" class="m-xxx m-xxx-1" class="u-yyy u-yyy-1" class="xxx xxx-yyy"。

posted @   一点点白  阅读(197)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示