高效编写CSS代码的建议汇总

2020-05-02 08:16:42易采站长站整理

  是用星号也一样

CSS Code复制内容到剪贴板

#god li *  

  先找到页面上的所有元素,再匹配祖先中包含li的元素,然后在这些元素中再查找父元素的id为god的元素。

  因此,对于全局选择器,只建议一种用法:

CSS Code复制内容到剪贴板

* { margin: 0; padding: 0; /* etc. */ }  

  2.17 避免tag+id或者class+id

CSS Code复制内容到剪贴板

button#goButton {…};—–>>#goButton   
.fundation#testIcon {…};—–>>#testIcon   

  2.18 关于tag+class

CSS Code复制内容到剪贴板

button.indented {…}—–>>.button-indented {…}   

  程序员们经常会给某个 Class 前面加上标签名称(Tag Name),以更精确且快速的定位该节点,但是这样往往效率更差。因为页面上的 class 在全局范围内来讲应该是唯一的,用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。事实上,这种做法也可以避免由于开发修改页面元素的类型(Tag)而导致的样式失效的情况,做到样式与元素的分离,两者独立维护。

  2.19 尽量减少规则数量

  可以考虑将层级关系写到一个class中,不过在层级变动时就比较麻烦了

CSS Code复制内容到剪贴板

Span[mailfolder="true"] > table > tr > td.columnClass {…}    
  
——————->>>>>>>    
  
.span-mailfolder-tbl-tdCol {…}   

  2.20 避免过长的class命名

  可以考虑缩写

CSS Code复制内容到剪贴板

ocHeroImage   
ocEmailAddress  

  如果觉得难以理解,可以加入连字符或注释

CSS Code复制内容到剪贴板

oc-HeroImage   
oc-EmailAddress  

  尽管有语义化方面的考虑,但命名还是尽量短一些,只要易于辨认即可

CSS Code复制内容到剪贴板

heroImg   
emailAddr  

  2.21 文件名中不应有空格

  a) 有空格的文件名会被Google当成两个关键字,可能带来更多的搜索结果,引来更多流量,是好事

  b) 有空格意味着不能省略引号,多了两个字节

  c) 空格会被浏览器自动转换为%20,老的浏览器可能不支持,如果将%20硬编码到URL中则每个实例中都多了两个字符

CSS Code复制内容到剪贴板

input {background: url("/images/shadow background.gif");}  

  2.22 省略URI的引号