web前端开发企业级CSS常用命名

CN-Jason 2018-03-22 原文

web前端开发企业级CSS常用命名

2018-03-22 10:53 by CN_Jason, … 阅读, … 评论, 收藏, 编辑

常用命名：

标题：title

摘要：summary

箭头：arrow

商标:label

网站标志:logo

转角/圆角：corner

横幅广告：banner

子菜单：subMenu

搜索:search

搜索框:searchBox

登陆条：loginbar

工具条:toolbar

下拉：drop

标签页:tab

当前的：current

列表：list

滚动：scroll

服务：service

提示信息：msg

热点：hot

新闻：news

小技巧：tips

下载：download

加入：joinus

指南：guide

友情链接：friendlink

状态：status

版权：btn

合作伙伴：partner

投票：vote

做/中/右：left/center/right

简介：profiles

评论：comment

ID名：

容器：container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

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

class命名：

(2)颜色：使用颜色的名称或者16进制代码：

.red{color:red;}

.f60{color:#f60;}

(2)字体大小，直接使用”font+字体大小“作为名称：

.font12px{font-size:12px;}

(3)对齐样式，使用对齐目标的英文名称：

.left{float:left;}

.bottom{float:bottom;}

(4)标题栏样式，使用”类别+功能“的方式命名：

.barnews{}

.barproduct{}

推荐的css书写顺序，相关的属性生命应当归为一组，并按照下面的顺序排序：

Positioning

Box model

Typographic

Visual

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（boxmodel）相关的样式，因此排在首位。盒模型排在第二位，因为他决定了组件的尺寸和位置。

.xxx {

/* Positioning */

position: absolute;

top:0;

right:0;

bottom:0;

left:0;

z-index:100;

/* Box-model */

display: block;

float: right;

width: 100px;

height: 100px;

/* Typography */

font: normal 13px "Helvetica Neue", sans-serif;

line-height:1.5;

color:#333;

text-align: center;

/* Visual */

background-color:#f5f5f5;

border: 1px solid #e5e5e5;

border-radius: 3px;

/* Misc */

opacity:1;

}