浅谈css命名规则(新手必看)

头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的命名
容器: container
页头header
内容content/container
页面主体main
页尾footer
导航nav
侧栏sidebar
栏目column
页面外围控制整体布局宽度wrapper
左右中left right center

id的命名

页面结构

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

导航

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

功能
标志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命名规则(新手必看)全部内容了，希望大家多多支持狼蚁SEO~

原文地址