最常用的css

常用的css命名规则：

• 头：header

• 内容：content/container

• 尾：footer

• 导航：nav

• 侧栏：sidebar

• 栏目：column

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

• 左右中：left right center

  扫描二维码关注公众号，回复： 1629685 查看本文章

• 登录条：loginbar

• 标志：logo

• 广告：banner

• 页面主体：main

• 热点：hot

• 新闻：news

• 下载：download

• 子导航：subnav

• 菜单：menu

• 子菜单：submenu

• 搜索：search

• 友情链接：friendlink

• 页脚：footer

• 版权：copyright

• 滚动：scroll

• 内容：content

• 标签页：tab

• 文章列表：list

• 提示信息：msg

• 小技巧：tips

• 栏目标题：title

• 加入：joinus

• 指南：guide

• 服务：service

• 注册：register

• 状态：status

• 投票：vote

• 合作伙伴：partner

注释的写法：

/* Footer */

内容区

/* End Footer */

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

• 主要的 master.css

• 模块 module.css

• 基本共用 base.css

• 布局，版面 layout.css

• 主题 themes.css

• 专栏 columns.css

• 文字 font.css

• 表单 forms.css

• 补丁 mend.css

• 打印 print.css

id的命名：

(1)页面结构

• 容器: container

• 页头：header

• 内容：content/container

• 页面主体：main

• 页尾：footer

• 导航：nav

• 侧栏：sidebar

• 栏目：column

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

• 左右中：left right center

• (2)功能

  • 标志：logo

  • 广告：banner

  • 登陆：login

  • 登录条：loginbar

  • 注册：regsiter

  • 搜索：search

  • 功能区：shop

  • 标题：title

  • 加入：joinus

  • 状态：status

  • 按钮：btn

  • 滚动：scroll

  • 标签页：tab

  • 文章列表：list

  • 提示信息：msg

  • 当前的: current

  • 小技巧：tips

  • 图标: icon

  • 注释：note

  • 指南：guide

  • 服务：service

  • 热点：hot

  • 新闻：news

  • 下载：download

  • 投票：vote

  • 合作伙伴：partner

  • 友情链接：link

  • 版权：copyright

(3)导航

• 导航：nav

• 主导航：mainnav

• 子导航：subnav

• 顶导航：topnav

• 边导航：sidebar

• 左导航：leftsidebar

• 右导航：rightsidebar

• 菜单：menu

• 子菜单：submenu

• 标题: title

• 摘要: summary

注意事项::

1. 一律小写;

2. 尽量用英文;

3. 不加中杠和下划线;

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

规范的css规则对以后的维护和优化会有很大的帮助哦

“我们相信人人都可以成为一个web前端大神，现在开始，找个师兄，带你入门，学习的路上不再迷茫。这里是前端修真院，初学者转行到互联网行业的聚集地。"

加QQ群：720333426（招募中）