DIV+CSS规范命名【超全】
发布时间:2022/01/10 丨 文章来源:未知 丨 浏览次数:
一、页面结构
容器:container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
二、导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航: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
友情链接:friendlink
版权:copyright
四、颜色
使用颜色的名称或者16进制代码,如:
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
五、字体大小
直接使用“font+字体大小”作为名称,如:
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
六、对齐样式
使用对齐目标的英文名称,如:
.left { float:left; }
.bottom { float:bottom; }
七、标题栏样式
使用“类别+功能”的方式命名,如:
.barnews { }
.barproduct { }
电子贸易相关命名:
.products 产品
.products_prices 产品价格
.products_des cription 产品描述
.products_review 产品评论
.editor_rwview 编辑产品
.news_release 最新产品
.publisher 生产商
.screenshot 缩略图
.faqs 常见问题
.keyword 关键词
.blog 博客
.forum 论坛
八、注意事项
1、一律小写;
2、尽量用英文;
3、不加中杠和下划线;
4、尽量不缩写,除非一看就明白的单词;
5、属性的值一定要用双引号(“”)括起来,且一定要有值如class="divcss5",id="divcss5";
6、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整。
九、样式文件命名
主要的master.css
模块module.css
基本共用base.css
布局,版面layout.css
主题themes.css
专栏columns.css
文字font.css
表单forms.css
补丁mend.css
打印print.css