CSS规范 - 典型错误

转载 2015年07月06日 21:04:40
不符合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/Style 语法规范基本够用

●为什么要用CSS:  ·一组样式可以调用在多个对象上·语法易学易懂(比HTML的语法还容易学,学了HTML之后,学CSS将非常容易)·丰富的样式效果·是 DHTML 的基础·用css布局的一个好处是...
  • mini_snow
  • mini_snow
  • 2010年04月21日 19:23
  • 4668

Web前端开发规范:CSS书写规范

1.CSS3种基本类型重新定义HTML样式:为设计师重新定义已有的HTML标签样式。用于统一网页中某一标签的样式。如a { color:#ccc; text-decoration:none;...
  • qq_26129689
  • qq_26129689
  • 2016年09月25日 13:54
  • 313

Html、CSS、JS代码注释的规范总结

添加必要的注释,对一个有责任心、有道德模范的前端必须具备的好习惯,可以大大提高代码的可维护性、可读性。 首先熟悉一下html、css、js的注释的写法: 1、HTML注释语法: ...
  • wangjieyunxia
  • wangjieyunxia
  • 2014年11月22日 17:53
  • 1020

web项目开发 之 前端规范 --- CSS编码规范

此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范 文档。供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力。 转载请注明出处;JS前端实用...
  • xllily_11
  • xllily_11
  • 2016年04月26日 11:32
  • 5325

开发规范:CSS / Sass 开发规范

术语 规则声明 我们把一个(或一组)选择器和一组属性称之为 “规则声明”。举个例子: ...
  • zzzkk2009
  • zzzkk2009
  • 2016年11月15日 11:42
  • 325

典型关联分析CCA(canonical correlation analysis)

先看两个数学概念: 相关系数(参看百度百科)       相关系数是用以反映变量之间相关关系密切程度的统计指标。相关系数是按积差方法计算,同样以两变量与各自平均值的离差为基础,通过两个离差相乘来反映两...
  • zb1165048017
  • zb1165048017
  • 2015年10月03日 17:25
  • 4622

腾讯前端规范

腾讯前端规范
  • pengone
  • pengone
  • 2016年11月24日 15:23
  • 459

CSS3代码编写规范及注意要点

CSS3编码规范及注意要点 语法: 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。为选择器分组时,将单独的选择器单独放在一行。为了代码的易读性,在每个声...
  • sinat_34719507
  • sinat_34719507
  • 2016年12月27日 01:43
  • 1823

如何规范 CSS 的命名和书写?

作者:词晖 链接:https://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业...
  • ID_Rin
  • ID_Rin
  • 2017年01月09日 12:58
  • 365

自己编写错误代码的规范

如: #define ERRCODE_BASE 0x0505000   0~15位:异常代码 由Microsoft/客户定义 16~27位:设备代码,由Microsoft定义 28位:保留,必...
  • lxh1230119
  • lxh1230119
  • 2012年06月19日 17:52
  • 2456
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS规范 - 典型错误
举报原因:
原因补充:

(最多只允许输入30个字)