CSS常用命名及书写规范

轩陌

分类: CSS3 1550 2

常用命名:

标题: title        摘要: summary        箭头: arrow

商标: label        网站标志: logo        转角/圆角: corner

横幅广告: banner        子菜单: subMenu        搜索: search

搜索框: searchBox        登录: login        登录条:loginbar

工具条: toolbar        下拉: drop        标签页: tab

当前的: current        列表: list        滚动: scroll

服务: service        提示信息: msg        热点:hot

新闻: news        小技巧: tips        下载: download

栏目标题: title        热点: hot        加入: joinus

注册: regsiter        指南: guide        友情链接: friendlink

状态: status        版权: copyright        按钮: btn

合作伙伴: partner        投票: vote        左/右/中:left/right/center

简介:profiles        评论:comment

id的命名:

(1)页面结构

容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

(2)导航

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

(3)功能

标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

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 书写顺序

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

  1. Positioning
  2. Box model
  3. Typographic
  4. 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;
}

查看更多

  • 8人 Love
  • 0人 Haha
  • 2人 Wow
  • 0人 Sad
  • 0人 Angry
命名规范

作者简介:轩陌

打赏

生命的意义在于折腾。

共 2 条评论关于 “CSS常用命名及书写规范”

Loading...