网站头部:    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. 有关Highchart的那些事。。。备份一段(稍后修改)

    $(function () { $('#CurrentFinanceChart').highcharts({ title: { text: '' }, xAxis: { type: 'datetime ...

  3. 响应式Web初级入门

    本文来自我的前端博客,原文地址:http://www.hacke2.cn/about-responsive/ 跨终端时代的到来 当你乘坐各种交通工具(公交.地铁.轻轨.火车)时你会发现,人们都个个低下 ...

  4. 使用LIBSVM工具实现样本分类预测——MatLab

    准备工作: https://www.csie.ntu.edu.tw/~cjlin/libsvm/,下载LIBSVM:(LIBSVM工具相较于MATLAB自带的工具:1).支持多分类及回归(‘-s 0’ ...

  5. Todd's Matlab讲义第4讲:控制误差和条件语句

    误差和残量 数值求解方程\(f(x)=0\)的根,有多种方法测算结果的近似程度.最直接的方法是计算误差.第\(n\)步迭代结果与真值\(x^\*\)的差即为第\(n\)步迭代的误差: \begin{e ...

  6. POJ 2029 Get Many Persimmon Trees

    Get Many Persimmon Trees Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 3243 Accepted: 2 ...

  7. 微信电脑版微信1.1 for Windows更新 可@人/转发撤回消息/可播小视频

    微信电脑版微信1.1 for Windows发布更新了,版本号为1.1.0.18,群聊可@人/可转发撤回消息/可播小视频,功能越来越接近微信手机版了. 本次更新的一些新特点: 群聊中可以@人. 消息可 ...

  8. hihoCoder挑战赛11.题目4 : 高等理论计算机科学(LCA)

    clj在某场hihoCoder比赛中的一道题,表示clj的数学题实在6,这道图论貌似还算可以... 题目链接:http://hihocoder.com/problemset/problem/1167 ...

  9. webservice测试实例

    webservice测试实例(LR8.1) 接口声明:这个接口是sina的短信服务接口,我只是用来做脚本学习使用,不会对其产生压力:希望读者也只是用来进行录制学习,而不是产生压力. 接口文档:http ...

  10. Code First06---CodeFirst中的一对多关系

    本章我将介绍Code First将类之间的引用关系映射为数据表之间的一对多关系的默认规则.主要包含以下两部分内容: 1.Code First将类之间的引用关系映射为数据表之间一对多关系的默认规则. 2 ...