建议大家用的css命名规则

每个人的CSS命名规则都不一样，给后期维护人员带来麻烦。如果大家都统一的话，就提高了工作效率，方便自己，也方便他人。下面为你介绍CSS的命名规则吧！

创新互联是一家专业提供嵊州企业网站建设,专注与网站设计、成都做网站、成都h5网站建设、小程序制作等业务。10年已为嵊州众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

一、常用命名规则

头：header　　

内容：content/container　　

尾：footer　　

导航：nav　　

侧栏：sidebar

栏目：column　　

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

左右中：left right center　　

登录条：loginbar　　

标志：logo　　

广告：banner　　

页面主体：main　　

热点：hot　　

新闻：news

下载：download　　

子导航：subnav　　

菜单：menu　　

子菜单：submenu　　

搜索：search　　

友情链接：friendlink　　

页脚：footer　　

版权：copyright　　

滚动：scroll　　

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

二、注释的写法 

/* Footer */

内容区

/* End Footer */

三、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 { } 
 
 
 

五、注意事项 

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

主要的 master.css

模块 module.css

基本共用 base.css

布局，版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

网站题目：建议大家用的css命名规则
文章转载：http://www.gawzjz.com/qtweb2/news29/6529.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联