• CSS命名规范


    CSS命名规范重要性
    1、为以后版本升级规范有一定好处,虽然达到兼容html5+css3.0浏览器还早,但是可以为div+css开发者来说可以先注意一下。 

    2css命名规范可以节约团队开发时间。特别在团队合作开发网站项目中,大家规范的来制作一套共识的css命名,将节约开发时间及成本,如果开发项目中div+css开发者乱命名css,将给后来的程序员的解读带来不便。

    3css命名规范可为以后维护带来方便

    样式文件命名:

    主要的 master.css

    模块 module.css

    基本共用 base.css

    布局、版面 layout.css
    主题 themes.css
    专栏 columns.css
    文字 font.css
    表单 forms.css
    补丁 mend.css
    打印 print.css

    页面制作最重要的就是CSS,定义合理的CSS命名规范,可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于CSS的命名我们采用骆驼式命名法。

    1.通用命名规则:

    1) 所有ID或者class字母和数字之间用“_”连接,如:  #col_1#col_2

    2) 所有ID或者class两个单词之间的链接采用骆驼式命名法,如:  mianNavfootNav

    3) 页面主体框架布局命名:Lay_1Lay_2 Lay_3

    4) 栏目布局容器命名一律采用: col_1col_2col_3col_4col_N

    5) 栏目标题块命名一律采用title<div class="tit"><h4>标题</h4></div>

    6) 页面所有图片区域全部采用:pic_1pic_2pic_3pic_N

    7) 页面文本列表区域全部采用: Lst_1Lst_2Lst_3Lst_N

    8) 页面上按钮采用:btn_1btn_2btn_3btn_N

    9) 广告区域:ad_1,ad_2,ad_3,ad_N 

    2. 主框架命名规则:

    1) #header (页面头部)    2) #main (页面主体)     3) #footer (页面尾部)

    3. 通用命名规则:

    主  体:main
    外 层:wrap
    功能条:funcBar
    主导航:mainNav
    子导航:subNav
    友情链接:friendLink
    版  权:copyright
    页 眉:header
    页 脚:footer
    标 题:title
    主导航:mainNav
    子菜单:subMenu
    注  释:note
    面包屑:breadcrumb

    容  器:container
    内  容:content
    搜  索:search
    登  陆:Login
    当前状态:current

    页头:header
    标志:logo
    侧栏:sidebar
    广告:banner
    导航:nav
    子导航:subnav
    菜单:menu
    子菜单:submenu
    搜索:search
    滚动:scroll
    页面主体:main
    内容:content
    标签页:tab
    文章列表:list

    信息:msg
    提示技巧:tips
    栏目标题:title
    指南:guide
    服务:service
    热点:hot
    新闻:news
    下载:download
    注册:regregister
    状态:status
    按钮:btn
    投票:vote

  • 相关阅读:
    《黑马程序员》 内存管理的认识(Objective
    《黑马程序员》 description方法(Objective
    《黑马程序员》 类的加载和初始化(Objective
    《黑马程序员》 category分类的使用(Objective
    《黑马程序员》 OC构造方法(Objective
    《黑马程序员》 OC编译器特性(Objective
    《黑马程序员》 OC的三大特性(Objective
    《黑马程序员》 OC的认识和第一个OC(Objective
    《黑马程序员》 extern与static的使用注意(C语言)
    《黑马程序员》 typedef的使用方法(C语言)
  • 原文地址:https://www.cnblogs.com/wqhwe/p/3929609.html
Copyright © 2020-2023  润新知