CSS书写规范、顺序和命名规则


Posted in HTML / CSS onMarch 06, 2014

这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的。

一、CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

CSS书写规范、顺序和命名规则

二、CSS书写规范
1.使用CSS缩写属性
CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

CSS书写规范、顺序和命名规则

2.去掉小数点前的“0”

CSS书写规范、顺序和命名规则

3.简写命名

很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

CSS书写规范、顺序和命名规则

4.16进制颜色代码缩写

有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。

CSS书写规范、顺序和命名规则

5连字符CSS选择器命名规范

1).长名称或词组可以使用中横线来为选择器命名。

2).不建议使用“_”下划线来命名CSS选择器,为什么呢?

输入的时候少按一个shift键; 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的) 能良好区分JavaScript变量命名(JS变量命名是用“_”)

CSS书写规范、顺序和命名规则

6.不要随意使用id

id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。

CSS书写规范、顺序和命名规则

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

有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。

CSS书写规范、顺序和命名规则

三、CSS命名规范(规则)
常用的CSS命名规则

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

注释的写法:

/* Header */
内容区
/* End Header */

id的命名:

1)页面结构

容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体?丫挚矶龋?rapper
左右中:left right center

(2)导航

导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary

(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

四、注意事项::

1.一律小写;
2.尽量用英文;
3.不加中??和下划线;
4.尽量不缩写,除非一看就明白的单词。

五、CSS样式表文件命名

主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

HTML / CSS 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
用canvas画心电图的示例代码
Sep 10 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 #HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 #HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 #HTML / CSS
css3隔行变换色实现示例
Feb 19 #HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 #HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 #HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 #HTML / CSS
You might like
漂亮但不安全的CTB
2006/10/09 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
vue实现购物车的监听
2020/04/20 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
python基于socket实现网络广播的方法
2015/04/29 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
AC Lens:购买隐形眼镜
2017/02/26 全球购物
英语自我评价范文
2014/01/24 职场文书
初中作文评语大全
2014/04/23 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
邀请函的格式
2015/01/30 职场文书
会议主持词通用版
2019/04/02 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python