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. BS架构与CS架构的区别

    C/S结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,可以充分利用两端硬件环境的优势. ...

  2. OSSEC配置文件ossec.conf中添加mysql服务

    配置路径:/opt/ossec/etc/ossec.conf <ossec_config>   <global>     <email_notification>y ...

  3. OpenVAS漏洞扫描基础教程之OpenVAS概述及安装及配置OpenVAS服务

    OpenVAS漏洞扫描基础教程之OpenVAS概述及安装及配置OpenVAS服务   1.  OpenVAS基础知识 OpenVAS(Open Vulnerability Assessment Sys ...

  4. Java API —— DateFormat类

    1.DateFormat类概述         DateFormat 是日期/时间格式化子类的抽象类,它以与语言无关的方式格式化并解析日期或时间. 是抽象类,所以使用其子类SimpleDateForm ...

  5. 增加oracle数据库最大连接数

    这几天碰到系统不能登陆的情况,初步判断可能是数据库连接满了,(后来检查不是这个原因),做了一次增加数据库最大连接数操作.操作步骤如下 操作系统:Red Hat Enterprise Linux Ser ...

  6. Xwindow的文章

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

  7. API设计

    ---恢复内容开始--- 参考:http://www.cnblogs.com/youxin/p/3967274.html http://scotch.io/tutorials/simple-larav ...

  8. 常用的coco2d-x游戏开发工具(转)

    物理编辑工具Physics Editing ToolsMekanimo 网址:http://www.mekanimo.net/PhysicsBench 网址:http://www.cocos2d-ip ...

  9. 在Ubuntu为Android硬件抽象层(HAL)模块编写JNI方法提供Java访问硬件服务接口(老罗学习笔记4)

    在上两篇文章中,我们介绍了如何为Android系统的硬件编写驱动程序,包括如何在Linux内核空间实现内核驱动程序和在用户空间实现硬件抽象层接口.实现这两者的目的是为了向更上一层提供硬件访问接口,即为 ...

  10. MySQL select into 和 SQL select into

    现在有张表为student,我想将这个表里面的数据复制到一个为dust的新表中去,虽然可以用以下语句进行复制,总觉得不爽,希望各位帮助下我,谢谢.  answer 01: create table d ...