CSS规范主要包括以下内容:

  • CSS Reset用YUI的CSS Reset。
  • CSS采用CSSReset+common.css+app.css的形式。
  • app.css采用分工制,一个前端工程师负责一个栏目,如果多人维护,需要添加注释。
  • 为方便组件模块化和提高弹性,正常情况下,为避免外边界冲突,组件不设置外边界,外边界用组合CSS的方式实现,如下代码所示。

html:

<p>12345</P>

<ul class="textList marginTop10"

<li>XXXXXXXXXX</li>

</ul>

<p>abcd</p>

<ul class="textList marginTop20"

<li>XXXXXXXXXX</li>

</ul>

CSS:

.textList {xxxxxxx}

.marginTop10 {margin-top:10px;}

.marginTop20 {margin-top:20px;}


  • 为避免组件的上下外边距重合问题和IE的haslayout引发的Bug,各模块除特殊需求,一律采用marginTop设置上下外边距,如下代码所示。

<p>xxxxxxxxxxxxx</p>

<p class="marginTop10">xxxxxxxxx</p>


  • 优先对已存在的common.css中的类进行组合,减少自定义类的数量。
  • CSS用一行的写法,避免行数太多,不利查找,如下代码所示。

.menu {margin:0;float:left;font-weight:bold;}


  • 正式发布前应进行压缩,压缩后文件的命名应添加“_min"后缀。

瞬间从IT屌丝变大神——CSS规范的更多相关文章

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

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

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

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

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

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

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

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

  5. 瞬间从IT屌丝变大神——命名规则

    为了避免命名冲突,命名规则如下: 公共组件因为高度重用,,命名从简,不要加前缀. 各栏目的相应代码,需加前缀,前缀为工程师姓名拼音的首字母,例如:海子前缀为“hz_”,分隔符为下划线"_&q ...

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

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

  7. VsCode写Python代码!这代码简直和大神一样规范!太漂亮了!

    VsCode写Python代码!这代码简直和大神一样规范!太漂亮了!    转 https://www.jianshu.com/p/636306763d89 VsCode虽然没有Pycharm的功能齐 ...

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

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

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

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

随机推荐

  1. js捕捉浏览器关闭事件-兼容几乎所有浏览器

    很多时候我们都在困扰,如何捕获浏览器关闭事件,网上虽然有很多方法,但都不理想,后来终于找到了一个很好地实现方法,大家可以试试哦,支持几乎所有的浏览器 <script type="tex ...

  2. [Unity菜鸟] Final IK

    由于本人英文较烂,边翻译用户手册边学习. 用户手册  IK Components Final IK 包含许多强大高速的IK组件 Aim  AimIK solver是一个对CCD算法(cyclic co ...

  3. Xamarin.Android 入门之:xamarin使用webserver和html交互

    一.引言 如今,Android+html5开发已经成为最流行的开发模式. Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设 ...

  4. Hibernate逍遥游记-第12章 映射值类型集合-003映射List(<list-index>)

    1. <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hi ...

  5. java -version

  6. MapReduce 中的Map后,sort不能对中文的key排序

    今天写了一个用mapreduce求平均分的程序,结果是出来了,可是没有按照“学生名字”进行排序,如果是英文名字的话,结果是排好序的. 代码如下: package com.pro.bq; import ...

  7. 【POJ】3134 Power Calculus

    1. 题目描述给定一个正整数$n$,求经过多少次乘法或除法运算可以从$x$得到$x^n$?中间结果也是可以复用的. 2. 基本思路实际结果其实非常小,肯定不会超过20.因此,可以采用IDA*算法.注意 ...

  8. JasperReports+iReport在eclipse中的使用

    转载:http://blog.csdn.net/daming924/article/details/7402295 一.介绍1)它可以PDF,HTML,XML等多种形式产生报表或动态报表,在新版本还支 ...

  9. 4197: [Noi2015]寿司晚宴

    状压dp. 500分解质因数的话,除了最大的质因数只需要8个质数,用二进制x储存,最大的质因数用y来储存(若没有比那8个质数大的质因数就使y=1) 用f[i][j]表示第一个人方案为i,第二个人方案为 ...

  10. HTML页面导出为Word

    protected void btnExport_Click(object sender, EventArgs e) { string strFileName = DateTime.Now.ToStr ...