您现在的位置是：网站首页> 编程资料编程资料

高效编写CSS代码的建议汇总CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2021-09-05 916人已围观

简介 这篇文章主要介绍了高效编写CSS代码的建议汇总,包括选择器和伪元素等在编程时使用的建议,强烈推荐!需要的朋友可以参考下

1. 基本原则

　　1.1 把CSS放在HTML页面头部

　　由于浏览器需要在所有的样式表加载完成后才能开始渲染页面，样式表加载完成之前页面会一直显示空白，因此需要将样式表放在头部。

　　@import 相当于把 标签放在页面的底部，因此从优化性能的角度考虑，应避免使用 @import。

　　1.2 避免使用 CSS Expressions

　　Expression 只有 IE 支持，而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道，expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。

　　1.3 CSS简写

　　1.3.1 16进制颜色值简写

CSS Code复制内容到剪贴板
  1. /* Not recommended */  
  2. color: #eebbcc;   
  3.   
  4. /* Recommended */  
  5. color: #ebc;     

　　1.3.2 属性值简写

 

CSS Code复制内容到剪贴板
  1. margin-top: 2px;   
  2.  margin-right: 5px;   
  3.  margin-bottom: 2em;   
  4.  margin-left: 15px;     ----->>     margin: 2px 5px 2em 15px;    
  5.   
  6.  border-width: 1px;   
  7.  border-style: solid;   
  8.  border-color: #000     ----->>     border: 1px solid #000    
  9.   
  10.  font-style: italic;   
  11.  font-variant: small-caps;   
  12.  font-weight: bold;   
  13.  font-size: 1em;   
  14.  line-height: 140%;   
  15.  font-family: sans-serif;  ----->>  font: italic small-caps bold 1em 140% sans-serief    
  16.   
  17.  background-color: #f00;   
  18.  background-image: url(background.gif);   
  19.  background-repeat: no-repeat;   
  20.  background-attachment: fixed;   
  21.  background-position: 0 0;   ----->>background: #f00 url(background.gif) no-repeat fixed 0 0    
  22.   
  23.  list-style-type: square;   
  24.  list-style-position: inside;   
  25.  list-style-image: url(image.gif)  ----->> list-style: square inside url(image.gif)   

　　1.4 尽量抽取相似部分

CSS Code复制内容到剪贴板
  1. .class1{position: absolute; left: 20px; top: 30px;}   
  2. .class2{position: absolute; left: 20px; top: 30px;}   
  3. .class3{position: absolute; left: 20px; top: 30px;}   
  4. .class4{position: absolute; left: 20px; top: 30px;}   
  5. .class5{position: absolute; left: 20px; top: 30px;}   
  6. .class6{position: absolute; left: 20px; top: 30px;}    
  7.   
  8.  -------------------->>>>>>>    
  9.   
  10.  .class1 .class2 .class3 .class4 .class5 .class6{   
  11.         Position: absolute; left: 20px; top: 20px;   
  12.  }  

　　2. 关键要点

　　2.1 只使用小写

CSS Code复制内容到剪贴板
  1.   
  2. "/">Home   
  3.   
  4.   
  5. src="google.png" alt="Google">  

　　2.2 不要有多余的空格（划线处）

CSS Code复制内容到剪贴板
  1.   

  2. What?_   

  3.   
  4.   

  5. Yes please.  

　　2.3 使用utf8编码

html中：

XML/HTML Code复制内容到剪贴板
  1. <meta charset="utf-8">   

css中：

CSS Code复制内容到剪贴板
  1. @charset "utf-8";  

　　2.4 使用html5文档类型

　　

XML/HTML Code复制内容到剪贴板
  1. >  

　　2.5 验证HTML与CSS文档

　　验证HTML

　　验证CSS

　　2.6 使文档语义化

　　2.7 多媒体（多终端）兼容

CSS Code复制内容到剪贴板
  1.   
  2. src="spreadsheet.png">   
  3.   
  4.   
  5. src="spreadsheet.png" alt="Spreadsheet screenshot.">  

　　2.8 不要使用实体引用

CSS Code复制内容到剪贴板
  1.   
  2. The currency symbol for the Euro is “&eur;”.   
  3.   
  4.   
  5. The currency symbol for the Euro is “€”.  

　　2.9 使用带有语义的id和class

CSS Code复制内容到剪贴板
  1. /* Not recommended: meaningless */  
  2. #yee-1901 {}   
  3.   
  4. /* Not recommended: presentational */  
  5. .button-green {}   
  6. .clear {}   
  7.   
  8. /* Recommended: specific */  
  9. #gallery {}   
  10. #login {}   
  11. .video {}   
  12.   
  13. /* Recommended: generic */  
  14. .aux {}   
  15. .alt {}  

　　2.10 省略零值的单位

CSS Code复制内容到剪贴板
  1. margin: 0;   
  2. padding: 0;  

　　2.11 省略起始的零

CSS Code复制内容到剪贴板

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网