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

CSS编写规范的相关建议使用CSS居中浮动元素的方法CSS3的Flexible Boxes详细使用教程将页脚固定在页面底部的CSS实战

2021-09-05 953人已围观

简介 这篇文章主要介绍了CSS编写规范的相关建议,编码倾向有助于后期debug等工作的进行,需要的朋友可以参考下

避免过度约束

作为一般规则，不添加不必要的约束。

CSS Code复制内容到剪贴板
  1. // 糟糕   
  2. ul#someid {..}   
  3. .menu#otherid{..}   
  4.   
  5. // 好的   
  6. #someid {..}   
  7. #otherid {..}  

后代选择符最烂

不仅性能低下而且代码很脆弱，html代码和css代码严重耦合，html代码结构发生变化时，CSS也得修改，这是多么糟糕，特别是在大公司里，写html和css的往往不是同一个人。

CSS Code复制内容到剪贴板
  1. // 烂透了   
  2. html div tr td {..}  

尽可能使用复合语法

CSS Code复制内容到剪贴板
  1. // 糟糕   
  2. .someclass {   
  3. padding-top: 20px;   
  4. padding-bottom: 20px;   
  5. padding-left: 10px;   
  6. padding-right: 10px;   
  7. background: #000;   
  8. background-image: url(../imgs/carrot.png);   
  9. background-position: bottombottom;   
  10. background-repeat: repeat-x;   
  11. }   
  12.   
  13. // 好的   
  14. .someclass {   
  15. padding: 20px 10px 20px 10px;   
  16. background: #000 url(../imgs/carrot.png) repeat-x bottombottom;   
  17. }  

避免不必要的重复

CSS Code复制内容到剪贴板
  1. // 糟糕   
  2. .someclass {   
  3. color: red;   
  4. background: blue;   
  5. font-size: 15px;   
  6. }   
  7.   
  8. .otherclass {   
  9. color: red;   
  10. background: blue;   
  11. font-size: 15px;   
  12. }   
  13.   
  14. // 好的   
  15. .someclass, .otherclass {   
  16. color: red;   
  17. background: blue;   
  18. font-size: 15px;   
  19. }  

组织好的代码格式

代码的易读性和易维护性成正比。下面是我遵循的格式化方法。

CSS Code复制内容到剪贴板
  1. // 糟糕   
  2. .someclass-a, .someclass-b, .someclass-c, .someclass-d {   
  3. ...   
  4. }   
  5.   
  6. // 好的   
  7. .someclass-a,   
  8. .someclass-b,   
  9. .someclass-c,   
  10. .someclass-d {   
  11. ...   
  12. }   
  13.   
  14. // 好的做法   
  15. .someclass {   
  16.     background-image:   
  17.         linear-gradient(#000, #ccc),   
  18.         linear-gradient(#ccc, #ddd);   
  19.     box-shadow:   
  20.         2px 2px 2px #000,   
  21.         1px 4px 1px 1px #ddd inset;   
  22. }  

上一篇：使用CSS居中浮动元素的方法css使用flexbox布局容器内多元素水平居中CSS元素居中布局的简单方法CSS实现定位元素居中的方法CSS行内元素和块级元素的居中实例分析DIV+CSS垂直居中一个浮动元素CSS绝对定位元素left设为50%实现水平居中css3设置box-pack和box-align让div里面的元素垂直居中浅谈css元素居中

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

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网