美文网首页我爱编程
CSS规范 - 典型错误

CSS规范 - 典型错误

作者: 龍飝 | 来源:发表于2018-04-14 16:59 被阅读15次

不符合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"。

相关文章

  • CSS规范 - 典型错误

    不符合NEC规范的选择器用法 扩展类使用错误扩展类必须和其基类同时使用于同一个节点。错误:class="g-xxx...

  • CSS规范 - 典型错误

  • 前端开发文档规范

    HTML 编码规范 请查看HTML编码规范 CSS 编码规范 请查看CSS编码规范 JavaScript 编码规范...

  • 非常有用的css规范标准

    CSS图书馆 » HTML & CSS » 推荐大家使用的CSS书写规范、顺序 推荐大家使用的CSS书写规范、顺序...

  • 前端代码规范(配置篇)

    基于 Airbnb 前端规范 CSS 规范 https://github.com/airbnb/css style...

  • [知识点滴]Div+CSS命名规范大全

    Div+CSS命名规范(前端web开发命名规范)Div+CSS命名规范(一)窗体头:header内容:conten...

  • CSS学习笔记(1)

    CSS版本 CSS Level1 CSS Level 2(CSS 2.1规范) CSS Level 3 CSS规则...

  • 《好好说话》

    常见的典型错误 典型错误一演讲时上台就急着煽情或者下结论。 典型错误二,沟通时喜欢强行推进自己的结论。 典型错误三...

  • CSS 规范

    CSS规范 @desc: 主要适用于sass、less等CSS预编译语言 1. CSS选择器 1.1. 命名规范 ...

  • 无标题文章

    # CSS 编码规范 此为前端开发团队遵循和约定的 CSS 编码规范,意在提高代码的规范性和可维护性。 ## 代码...

网友评论

    本文标题:CSS规范 - 典型错误

    本文链接:https://www.haomeiwen.com/subject/revlkftx.html