网站头部:    head/header(头部) top(顶部)    
导航:   nanv 导航具体区分:topnav(顶部导航)、mainnav(主导航)、mininav(迷你导航)、textnav(导航文本)、subnav(子导航/二级导航)
旗帜、广告和商标:logo(旗帜)、brand(商标)、banner(标语)
搜索:sreach(搜索)、sreachbox(搜索框)、sreachbtn(搜索按钮)、sreachinput(搜索输入框)
注册和登录:login(登录)、regsiter(注册)、userbox(用户名/通行证的文本框)、password(密码)
布局、分栏和框:   layout(布局)、bigdiv(大div)、leftdiv(左分栏)、rightdiv(右分栏)、leftfloat(左浮动)、rightfloat(右浮动)、mainbox()、subpage(子页面/二级页面)
页脚/底部:foot/footer(页脚/底部)、copyright(版权信息)、sitemap(网站地图)
其他:content(内容)、skin(皮肤)、title(标题)、from(表单)、pic(图片)、news(新闻)、shop(购物区)、list(列表/清单)、newslist(新闻列表)、downloadlist(下载列表)、piclist(图片列表)、dropmenv(下拉菜单)、cor/corner(圆角)、homepage(首页)、crumb(当前位置导航)
实际上上面的id命名我会经常用大小写和_来区分,比如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用"类型+变量名称"的规则来命名,比如写一个红色字体的class,可以
.f_red {}(f是font 字体的缩写)。总之原则是:大小写、_、缩写,大大增强代码的可读性。

另外我还经常使用"in"的写法做子divd的命名,写法in+父div,这样可以避免前面命名过了后面div不知道怎么去命名。比如intop、inbox、infrom、inlogin等等。

没有一个真正标准的命名规范,每个人都有自己的一套写法。但是要尽量向大家所认同的规范上靠,毕竟这在团队合作上有莫大的益处。本文会持续更新中,有疏漏出请大家指正。

css 命名规范的更多相关文章

  1. CSS命名规范

    DIV+CSS规范命名大全集合 前端人员必看CSS命名规范 整理: 文件名必须由小写字母.数字.中划线组成 ).所有的命名最好都小写,一律采用小写加中划线的方式,不允许使用大写字母或 _2).属性的值 ...

  2. html,css命名规范 (转)

    HTML+CSS命名规范总结 1.HTML部分 1.1添加必须的utf-8的字符集,并且使用HTML5的简洁 方式: <meta charset="utf-8"> 1. ...

  3. web前端开发CSS命名规范参考

    做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...

  4. CSS 命名规范及标题供参考与学习

    一.CSS 命名规范   XHTML-CSS写作建议 所有的xhtml代码小写 属性的值一定要用双引号("")括起来,且一定要有值 每个标签都要有开始和结束,且要有正确的层次 空元 ...

  5. Html+CSS命名规范:

     Html+CSS命名规范: 1.样式命名: 2.样式文件命名:

  6. css命名规范: BEM 的命名法

    整理自:前端早读课[第1183期]这些 CSS 命名规范,将省下你大把调试时间 试图解决 3 类问题: 仅从名字就能知道一个 CSS 选择器具体做什么 从名字能大致清楚一个选择器可以在哪里使用 从 C ...

  7. CSS命名规范(规则)常用的CSS命名规则

    CSS命名规范(规则)常用的CSS命名规则   CSS命名规范(规则)常用的CSS命名规则   头:header   内容:content/container   尾:footer ...

  8. 通用CSS命名规范

    一.文件命名规范 样式文件命名主要的 master.css布局,版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css [/ ...

  9. CSS 命名规范总结

    CSS 命名规范总结 BEM 命名给 CSS 以及 html 提供清晰结构,命名空间提供更多信息,模块化提高代码的重用,以达到 CSS 命名语义化.可重用性高.后期维护容易.加载渲染快的要求. 首先, ...

  10. CSS 命名规范将省下调试时间

    我听说很多开发者厌恶 CSS.而在我的经验中,这往往是由于他们并没有花时间来学习 CSS. CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具.从这点来说,也还算不 ...

随机推荐

  1. php从零开始

    吐槽:今天开始撸PHP了,从此前端少了个小白,PHP多了个小白... 本白从3年前陆陆续续开始一会儿撸会儿PHP一会儿撸前端.前端撸的比较多,PHP撸的比较少,当然本白撸php大多都是被逼的!! 然后 ...

  2. PHP跳转页面的几种实现方法详解

    •PHP页面跳转一.header()函数header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器.header() ...

  3. UI第六节——UINavigationController 详解

    1. UINavigationController 是一个容器类.里面盛放的是UIViewController. 容器的意思是,如果你不放入UIViewController,里面就是空的,什么也没有. ...

  4. Mahout 的安装

    Mahout 的安装 Mahout是Hadoop的一种高级应用.运行Mahout需要提前安装好Hadoop,Mahout只在Hadoop集群的NameNode节点上安装一个即可,其他数据节点上不需要安 ...

  5. C++调用shell

    1.直接采用system() 2.popen http://www.cnblogs.com/xitang/p/4288808.html

  6. linux安装包地址备忘

    64位系统安装包: http://mirrors.163.com/centos/5/os/x86_64/CentOS/ 32位系统安装包: http://mirrors.163.com/centos/ ...

  7. Java 7 Concurrency Cookbook 翻译 第一章 线程管理之三

    五.睡眠和唤醒一个线程 有时,你会想要在一段特定的时间后再去中断线程的运行.举个例子,程序中的一个线程每一分钟检查一次传感器的状态,剩余的时间,线程应该处于空闲的状态.在这段空闲时间里,线程不会使用计 ...

  8. 新建Oracle数据库时,提示使用database control配置数据库时,要求在当前oracle主目录中配置监听程序

    新建一个oracle数据库时,当提示使用database control配置数据库时,要求在当前oracle主目录中配置监听程序等字样的时候,问题是那个监听的服务没有启动,解决方法如下: 打开cmd命 ...

  9. (原创)用Receiver和SystemService监听网络状态,注册Receiver的两种方式

    android中网络编程不可避免地要监听网络状态,wifi或者3G以及以太网,并根据当前状态做出相应决策. 在MyReceiver类中的onReceive方法中获得系统服务 ConnectivityM ...

  10. 深度分析Linux下双网卡绑定七种模式 多网卡的7种bond模式原理

    http://blog.csdn.net/abc_ii/article/details/9991845多网卡的7种bond模式原理 Linux网卡绑定mode共有七种(~) bond0.bond1.b ...