CSS的常用命名及规范

常用命名

标题:title

摘要:summary

箭头:arrow

商标:label

网站标志:logo

转角/圆角:corner

横幅广告:banner

子菜单:subMenu

搜索:search

搜索框:searchBox

登录:login

登录条:loginbar

工具条:toolbar

下拉:drop

标签页:tab

当前的:current

列表:list

滚动:scroll

服务:service

提示信息:msg

热点:hot

新闻:news

小技巧:tips

下载:download

加入:joinus

注册:regsiter

指南:guide

友情链接:friendlink

状态:status

版权:copyright

按钮:btn

合作伙伴:partner

投票:vote

左/中/右:left/center/right

简介:profiles

评论:comment

ID命名

(1) 页面结构

容器:container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

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

(2) 导航

导航:nav

主导航:mainbar

子导航:subanv

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

摘要:summary

(3) 功能

标志:logo

广告:banner

登录:login

登陆条:loginbar

注册:regsiter

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的:current

小技巧:tips

图标:icon

注释:note

指南:guild

服务:service

版权:copyfight

友情链接:link

class命名

(1)颜色:使用颜色的名称或者16进制代码。如:


.red{color:red;}

.f60{color:#f60;}

.ff8600{color:#ff8600;}

(2)字体大小,直接使用“font+字体大小”作为名称,如:


.font12px{font-size:12px;}

.font9pt{font-size:9pt}

(3)对齐样式,使用对齐目标的因我名,如:


.left{float:left;}

.bottom{float:bottom;}

(4)标题栏样式,使用”类名+功能“的方式命名,如:


.barnews {}

.barproduct {}

推荐的css书写顺序

相关的属性声明应当归为一组,并按照下面的顺序排列:

Positioning

Box model

Typographic

Visual

由于定位(Positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型拍在第二位,因为它决定了组件的尺寸和位置。


.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;

}

推荐阅读更多精彩内容

  • CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:s...
    王小傲阅读 1,255评论 0 9
  • CSS命名规则 头:header内容:content/containe尾:footer导航:nav侧栏:sideb...
    纹小艾阅读 514评论 0 9
  • html页面的CSS、DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾...
    xiaoaiai阅读 534评论 0 1
  • 文章整理了Web前端开发中的各种CSS规范,包括文件规范、注释规范、命名规范、书写规范、测试规范等。 一、文件规范...
    二狗子没有夏天阅读 1,536评论 0 35
  • 互联网控制报文协议(ICMP) 在互联网传输过程中,IP数据报难免会出现差错,通常出现差错,处理方法就是丢弃,但是...
    六尺帐篷阅读 2,469评论 0 3
  • 最近好像变了很多,一个人若是心境变了,周围的一切似乎也都不一样了。 在这样一个忙碌而冷漠的世界里,人们早已对陌生的...
    何来何往16阅读 49评论 0 1
  • 一 赵山看着面前的报价机红红绿绿的数字跳动着,他得到消息说明德集团名下的海城城建最近被人暗地里疯狂扫货,价格一开盘...
    leson6666阅读 143评论 0 0
  • 通过椭圆曲线算法生成钥匙对(公钥和私钥),以太坊采用的是secp256k1曲线。公钥采用uncompressed模...
    Xiao_Li阅读 4,930评论 0 1