CSS规范 — 01 常用的命名规范

我在做项目和维护他人写的代码过程中，越来越发现代码规范的重要性。规范的代码格式可以让后期在原代码上开发和维护更加高效。自己也看了很多的代码规范，所以想根据自己的所学整理一些内容。

---

CSS样式的命名规范：

(1) 采用英文字母、数字、以及 "_" 和 "-" 命名；

(2) 以小写字母开头，不能以数字、 "_" 和 "-" 开头；

(3) 命名形式：单字，连字符，下划线并遵守驼峰命名法；

如图所示：

CSS文本命名规范：

index.css:    一般用于首页建立样式

head.css:    头部样式

base.css:    公共样式

style.css:    独立页面所使用的样式文件

global.css:    页面样式基础，全局公用样式，页面中必须包含

layout.css:    布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中

module.css:    模块，用于产品类页，也可与其它样式配合使用

master.css:    主要的样式表

columns.css:    专栏样式

themes.css:    主题样式

font.css:    文字，字体样式

forms.css:    表单样式

mend.css:    补丁，基于以上样式进行的私有化修补

print.css:    打印样式

 

 CSS页面结构命名规范：

page:    代表整个页面，用于最外层

wrap:    外嵌套，将所有元素包在一起的一个外围包，用于最外层

wrapper:    页面外围控制整体布局宽度，用于最外层

container:    一个整体容器，用于最外层

head，header:    页面头区域，用于头部

nav:    导航条

左中右:    left center right

content:    内容，网站中最重要的内容区域，用于网页中部主体

main:    网站中的主要区域(表示最重要的一块位置)，用于中部主体内容

column:    栏目

sidebar:    侧栏

foot，footer:    页尾、页脚，网站一些附加信息放置区域，或命名为copyRight用于底部

CSS导航命名规范：

nav，navbar，navigation，nav-wrapper:    导航条或导航包，代表横向导航

topnav:    顶部导航

mainbav:    主导航

subnav:    子导航

sidebar:    边导航

leftsidebar 或 sidebar_a:    左导航

rightsidebar 或 sidebar_b:    右导航

title:    标题

summary:    摘要

menu:    菜单，区域包含一般的链接和菜单

submenu:    子菜单

drop:    下拉

dropmenu:    下拉菜单

links:    链接菜单

CSS功能命名规范：

logo:    标记网站logo标志

banner:    标语、广告条、顶部广告条

login:    登录

loginbar:    登录条

register:    注册

tool，toolbar:    工具条

search:    搜索

searchbar:    搜索条

searchInput:    搜索输入框

shop:    功能区，表示现在的

icon:    小图标

label:    商标

homepage:    首页

subpage:    二级页面子页面

hot:    热门热点

list:    文章列表，例如：新闻列表 list-news

scroll:    滚动

tab:    标签

sitemap:    网站地图

msg 或 message:    提示信息

current:    当前的

joinus:    加入

status:    状态

btn:    按钮，例如：搜索按钮可写成 btn-search

tips:    小技巧

note:    注释

guild:    指南

arr，arrow:    标记箭头

service:    服务

breadcrumb:    即页面所处位置导航提示

download:    下载

vote:    投票

siteinfo:    网站信息

partner:    合作伙伴

link，friendlink:    友情链接

copyright:    版权信息

siteinfoCredits:    信誉

siteinfoLegal:    法律信息