CSS书写规范

最新推荐文章于 2024-08-17 22:24:13 发布

cbboke31

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量485

点赞数

分类专栏： web 文章标签： css web前端

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章摘自：http://www.jb51.net/css/141575.html
web前端必然会接触到html CSS 和Javascript,规范化编程不仅能提升阅读体验。

1. CSS书写顺序

1.1 位置属性(position,top,right,z-index,display,float 等)
1.2 大小（width,height,padding,margin）
1.3 文字系列（font,line-height,letter-spacing,color,text-align等）
1.4 背景（background，border等）
1.5 其他（animation，transition 等）
示例：
样式里边：先写位置，大小，文字系列，背景…
注意对齐，相差一个tab键的距离。习惯上冒号后边会空一个空格符。

  .example{
        z-index: -1;            
        display: inline-block;
        font-size: 1.5 em;
        color: red;
        background-color: #9e0;
}

2. CSS 书写规范

2.1 使用CSS缩写属性

2.1.1 CSS 有些属性是可以缩写，比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读

.list-box{                                                              .list-box{
 border-top-style: none;                                      border-top: 0;      
 font-family: serif;                                                 font: 100%/1.6 serif;
 font-size: 100%；                  简写：                    padding: 0 1em 2em;
     line-height: 1.6;                                                }
     padding-bottom: 2em;                                       
     padding-left: 1em;
     padding-right: 1em;
     padding-top: 0;
}

2.1.2 去掉小数点的“0”

比如： font-size: 0.8em;                 简写： font-size: .8em;

2.1.3 简写命名

很多用户都喜欢简写类名，但前提是要人看懂你的命名才能简写。
例子：

.navigation{}      
.atr{}          
正确简写:  
#nav{}     
.author{}

2.1.4 颜色代码缩写

color: #eebbcc; 可以写成： color: #ebc;

2.2. 连字符CSS选择器命名规范

长名称或词组可以使用中横线来为选择器命名。不建议使用 “_” 下划线来命名CSS 选择器，原因：浏览器有兼容性问题，IE6 里面 _tip 的选择器命名是无效的。同时也可以区分开js里面的标量命名。

2.3 不要随意使用id

id在JS是唯一的，不能多吃使用，class类选择器可以重复使用。另外id的优先级优先于class，所以id应该按需使用。建议：在分模块布局的时候使用id。

2.4.为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀，让语义更明了。
例子：

 .withdrawal{                                                 .is-withdrawal{
    bacckground-color: #ccc;                                      background-color: #ccc;
}                                                                      }

3、CSS 常用的命名

头: header
内容：content/container
尾：footer
导航：nav
侧栏： sidebar
栏目：column
页面外围控制整体宽度：wrapper
左右中： left right left
登录条：loginbar
标志： logo
广告： banner
页面主体： main
热点：hot
新闻：news
下载：download
子导航：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
标签;tags
文章列表：list
提示信息：msg
栏目标题：title
加入：joinus
指南：guide
服务：server 注
册：register
状态：status
投票：vote
合作伙伴：partner

3.1 id的命名:

3.1.1 页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
3.1.2 导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
3.1.3 功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标籤页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
3.1.4、id 命名注意事项
1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写，除非一看就明白的单词。