web前端开发企业级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

栏目标题: 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书写顺序

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

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;

}

如果你想学习交流html5css3等web前端技术,想多了解一些前端方面的内容,可以加入我们的QQ学习群:27062964,一起学习交流,提升自己,有学习资料和源码分享。或者点击链接直接加入QQ群:https://jq.qq.com/?_wv=1027&k=48DmPsZ

推荐阅读更多精彩内容

  • i(一)网页内容类 标题: title摘要: summary箭头: arrow商标: label网站标志: log...
    silly鸿阅读 30评论 0 0
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    poetries阅读 13,287评论 33 442
  • 工作中,写页面经常会出现我们起class名的时候,词穷!!!甚至有些词舍不得用,比如说left,right,cen...
    虚幻的锈色阅读 170评论 0 2
  • 我已经一个人走了很久,很久,以至于,我早已习惯了一个人走,突然有一天多了一个人陪我一起走,我不得不停下来,跟着他的...
    灵由阅读 18评论 0 1
  • 我刚把她送到火车站,转过身,还没来得及迈出第一步,就开始想她了。我不敢回头,害怕看到她的背影,前行的路会变得更加艰...
    苏紫陌阅读 42评论 0 0