网站头部:    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分页类,分页样式有点类似bootstrap. <?php /* * ********************************************* * @类名 ...

  2. seajs的那点事(很坑的事),和本白的一点事(更坑的事)

    在开始之前,偶先吐槽加逗比一下,2天前,CCAV的本白和百度的菊花成功潜入到了携程大楼 然后在没有找到他们运维的情况下,四处乱逛,企图把他们的服务器给root一下,然后再瞎逛之后到了一个很神奇的地方 ...

  3. Linux鲜为人知的安全漏洞:不要将输出内容管道给你的shell

    将wget或curl输出的内容管道给bash或者sh是一件非常愚蠢的事,例如像下面这样: wget -O - http://example.com/install.sh | sudo sh 命令解释: ...

  4. [译]ASP.NET 5: New configuration files and containers

    原文:http://gunnarpeipman.com/2014/11/asp-net-5-new-configuration-files-and-containers/ ASP.NET vNext提 ...

  5. 终端下使用cocopods

    http://blog.csdn.net/showhilllee/article/details/38398119

  6. 新年新技术:HTTP/2

    新的一年,项目也要带着发展的眼光往前走,得跟上潮流,当然前提是自己真的用的上. 用的上用不上都得先简单了解下. 2月下旬Google发布了首个基于HTTP/2的RPC框架GRPC,它是基于HTTP/2 ...

  7. 利用session防止用户未经登录而直接访问

    在编写项目的时候,突然想如果按常理出牌,不首先进入登录界面而直接访问网页内容,可不可以呢?如此一来便尝试了一下,整的可以直接进入管理员页面,获取完全的管理权限.于是在网上查看了一下解决方案,学习了一下 ...

  8. Ubuntu/Windows下利用“HIDAPI”库函数实现与Hid类USB设备通信

    一.背景: 最近在做的一个项目需要使用USB传递数据,对USB理解不是很深,USB的系统驱动编写则更是天方 夜谭,因此将设备配置成HID类设备成为了首选.其最大的好处在于,LINUX/Windows系 ...

  9. Hadoop 之面试题

    颜色区别: 蓝色:hive,橙色:Hbase.黑色hadoop 请简述hadoop怎样实现二级排序. 你认为用Java,Streaming,pipe 方式开发map/reduce,各有哪些优缺点: 6 ...

  10. Effective Java 读书笔记之一 创建和销毁对象

    一.考虑用静态工厂方法代替构造器 这里的静态工厂方法是指类中使用public static 修饰的方法,和设计模式的工厂方法模式没有任何关系.相对于使用共有的构造器来创建对象,静态工厂方法有几大优势: ...