为了避免命名冲突,命名规则如下:

  • 公共组件因为高度重用,,命名从简,不要加前缀。
  • 各栏目的相应代码,需加前缀,前缀为工程师姓名拼音的首字母,例如:海子前缀为“hz_”,分隔符为下划线"_",例如:“hz_imgList”。
  • 模块组件化,组建中的class或id名采用骆驼命名法和下划线相结合的方式,单词之间的分隔靠大写字母分开,从属关系靠下划线分隔。

html:

<ul class="textList">

<li class="textList_firstItem">xxxxxxxxxxx</li>

<li>xxxxxxxxxx</li>

</ul>

CSS:

.textList { }

.textList_firstItem { }


  • 命名清晰,不怕命名长,怕命名容易冲突,长命名可以保证不会产生冲突,所以CSS选择时可以尽量不使用子选择符,也能确保CSS优先权重足够低,方便扩展时的覆盖操作。

.textList_firstItem { }


  • 命名要有意义,不要使用没有意义的命名,尽量用英语命名,不要用拼音。

瞬间从IT屌丝变大神——命名规则的更多相关文章

  1. 瞬间从IT屌丝变大神——注释规则

    注释的主要规则如下: 公共组件和各栏目的维护者都需要在文件头部加上注释说明: /** *文件用途说明 *作者姓名 *联系方式*制作日期 **/ 大的模块注释方法: //======= //代码用途 / ...

  2. 瞬间从IT屌丝变大神——JavaScript规范

    JavaScript规范主要包含以下内容: 底层JavaScript库采用YUI 2.8.0. 统一头部中只载入YUI load组件,其它组件都通过loader对象加载. JavaScript尽量避免 ...

  3. 瞬间从IT屌丝变大神——CSS规范

    CSS规范主要包括以下内容: CSS Reset用YUI的CSS Reset. CSS采用CSSReset+common.css+app.css的形式. app.css采用分工制,一个前端工程师负责一 ...

  4. 瞬间从IT屌丝变大神——HTML规范

    HTML规范包含以下内容: DTD统一用<!DOCTYPE HTML PUBLIC "_//W3C//DTD XHTML 1.0 Transitional//EN"" ...

  5. 瞬间从IT屌丝变大神——分工安排

    分工安排主要包含以下内容: 公共组件(包括common.css和common.js)一人维护,各子频道专人负责,每个频道正常情况下由一人负责,要详细写明注释,如多人合作,维护的人员注意添加注释信息,具 ...

  6. 7天教你精通变大神,学CAD关键还要掌握方法,纯干货新手要看

    接触CAD初期是“痛苦”的,“煎熬”的,也是充满“成就”的. 痛苦是初学者怎么都不懂,需要学习的东西很多,整个过程是有些痛苦的. 煎熬也是每个求学阶段都会遇到的状态,眼睛会了,手不会,这个状态很难受. ...

  7. 极简Node教程-七天从小白变大神(一:你需要Express)

    如果说用一句话来概括Node那就是:它开启了JavaScript服务器端语言. Node系列的文章并不会从一开始长篇概论的讲Node的历史,安装,以及其他很琐碎的事情.只会专门介绍关于Node或者准确 ...

  8. mui初级入门教程(四)— 再谈webview,从小白变“大神”!

    文章来源:小青年原创发布时间:2016-06-05关键词:mui,html5+,webview转载需标注本文原始地址: http://zhaomenghuan.github.io/#!/blog/20 ...

  9. 【同行说技术】Python程序员小白变大神必读资料汇总( 三)

    在文章<Python开发.调试.爬虫类工具大全>里面向大家总结了各种实用工具和爬虫技术,今天小编收集了5篇带有实例干货的资料,赶紧来看看吧!另外,喜欢写博客的博主可以申请加工程师博主交流群 ...

随机推荐

  1. 创业草堂之一:创业的Idea是怎样产生的?

    “创业”,在很多人的想象中,就是两个小伙子在车库里.或者在学生寝室里,侃出了一个Idea,然后找到了一个投资人或VC,经过几句话讲解,VC拍手叫绝,10钟内当场拍板,砸下了2000万美金,然后两小伙子 ...

  2. REACTOS(193)与汇编编译器(69)的高人

    REACTOS(193)与汇编编译器(69)的高人http://blog.csdn.net/caimouse ReactOS编译成VS工程1: 首先从https://www.reactos.org/w ...

  3. java调用phantomjs采集ajax加载生成的网页

    java调用phantomjs采集ajax加载生成的网页 日前有采集需求,当我把所有的对应页面的链接都拿到手,准备开始根据链接去采集(写爬虫爬取)对应的终端页的时候,发觉用程序获取到的数据根本没有对应 ...

  4. Xwindow的文章

    http://blog.csdn.net/crond123/article/details/5733776 http://bbs.csdn.net/topics/90377015 http://bbs ...

  5. printf left justify

    http://www.lemoda.net/c/printf-left-justify/index.html This example program demonstrates how to left ...

  6. android移植

    root@phone-desktop:/opt/4418-source/android4.4.2_r1# ./device/nexell/tools/build.sh -b drone2 -t u-b ...

  7. BZOJ3122 随机数生成器

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=3122 题意: 思路:(1)x1=t则n=1; (2)a=0,则b=t,n=2;否则无解: ...

  8. [HDOJ4635]Strongly connected(强连通分量,缩点)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4635 题意:给一张图,问最多往这张图上加多少条边,使这张图仍然无法成为一个强连通图. 起初是先分析样例 ...

  9. Sublime Text汉化方法和注册码

    汉化方法 安装 SublimeText3 汉化包运行SublimeText3 点击 Preferneces -> Browse Packages 会打开 X:\..\Sublime Text 3 ...

  10. struts2的@Result annotation 如何添加params

    参考: http://struts.apache.org/2.0.11/docs/result-annotation.html http://jdkcn.com/entry/add-params-to ...