前端编码规范 -- css篇

时间:2021-03-05 20:30:18

合理的避免使用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

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