前端编码规范 -- css篇

合理的避免使用ID

一般情况下ID不应该被应用于样式。

ID的样式不能被复用并且每个页面中你只能使用一次ID。

使用ID唯一有效的是确定网页或整个站点中的位置。

尽管如此，你应该始终考虑使用class，而不是id，除非只使用一次

另一个反对使用ID的观点是含有ID选择器权重很高。

CSS选择器中避免标签名

当构建选择器时应该使用清晰， 准确和有语义的class(类)名。不要使用标签选择器。 如果你只关心你的class(类)名

，而不是你的代码元素，这样会更容易维护。

如果你只使用具有实际意义的class(类)名，

并且不使用元素选择器，那么你只需要改变你的html标记，而不用改动你的CSS。

缩写属性

CSS提供了各种缩写属性（如 font 字体）应该尽可能使用，即使在只设置一个值的情况下。

使用缩写属性对于代码效率和可读性是有很有用的。

//不推荐
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

//推荐
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0 和 单位

省略“0”值后面的单位。不要在0值后面使用单位，除非有值。

//不推荐
padding-bottom: 0px;
margin: 0em;

//推荐
padding-bottom: 0;
margin: 0;

十六进制表示法

在可能的情况下，使用3个字符的十六进制表示法。

颜色值也允许这样表示，

3个字符的十六进制表示法更简短。

始终使用小写的十六进制数字。

//不推荐
color: #FF33AA;

//推荐
color: #f3a;

声明顺序

这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。

作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：

结构性属性：

1、display

2、position, left, top, right

3、overflow, float, clear

4、margin, padding

表现性属性：

1、background, border

2、font, text

CSS引号

属性选择器或属性值用双引号（""），而不是单引号（''）括起来。

URI值（url()）不要使用引号。

媒体查询位置

尽量将媒体查询的位置靠近他们相关的规则。不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部。这样做只会让大家以后更容易忘记他们。

Don't use @import

与<link>相比，@import较慢，增加额外的页面请求，并可能导致其他不可预见的问题。

<!--推荐-->
<link rel="stylesheet" href="core.css">

<!-- 不推荐 -->
<style>
    @import url("more.css");
</style>

class 命名

保持 class 命名为全小写，可以使用中划线（不要使用下划线和 camelCase 命名）。中划线应该作为相关类的自然间断。(例如，.btn 和 .btn-danger)。

避免过度使用简写。.btn 可以很好地描述 button，但是 .s 不能代表任何元素。

class 的命名应该尽量短，也要尽量明确。

使用有意义的名称；使用结构化或者作用目标相关，而不是抽象的名称。

命名时使用最近的父节点或者父 class 作为前缀。

使用 .js-* 来表示行为(相对于样式)，但是不要在 CSS 中包含这些 class。

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

头：header　

内容：content/container

尾：footer

导航：nav　

侧栏：sidebar　

栏目：column　

页面外围控制整体佈局宽度：wrapper

左右中：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　

页面外围控制整体佈局宽度：wrapper　

左右中：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

如果不当或者补充请多多指教！