加入收藏 | 设为首页 | 网站地图 | RSS订阅
阅读内容

css命名规则图片切图转网页的代码规范

日期:2011-12-11     来源:不详     作者:5i93.com收集

    网上整理的比较好的css命名规则,为css代码的规范化做参考,增加代码的可读性。


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

    (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.不使用大写形式的类名和id名;

    2.尽可能使用描述性的英文单词的组合作为类名和id名;

    3.id名及类名的多个英文单词之间使用“_”短横线分隔;

    4.按区域进行描述编号 例:main01_div01_ul01 (可以理解为主体第一区域 第一DIV下的第一个UL)


    附:一些CSS框架的命名参考

    主要的 master.css 模块 module.css 基本共用 base.css
    主题 themes.css 专栏 columns.css 打印 print.css
    文字 font.css 表单 forms.css 补丁 mend.css
    布局,版面 layout.css

发表评论】【告诉好友】【打印此文】【收藏此文】【关闭窗口

相关新闻
    本文评论
    推荐广告
    关于本站 | 版权声明 | 免责声明 | 联系我们 | 广告服务 | 加入收藏 | 网站地图 | 网站搜索 | RSS订阅