前端代码规范-css

目录
  1. 高质量的css
    1. base.css
    2. common.js
    3. page.css
  • css的命名
  • css的常见问题

    • 高质量的css

    • css的API使用(基础)
    • css的组织(base.css+ common.js + page.css)
      三个css是层叠的关系。

    base.css

    位于最底层，提供reset.css功能以及粒度最小的通用类——原子类。相对稳定，基本不需要维护

    common.js

    位于中间层，是样式的模块化。
    是要高度重用的模块，可以视为组件，放在common.css
    不同的网站有不同的common层，但是同一个网站只应该有一个common层。

    page.css

    位于最高层，提供页面级的样式。

    css的命名

    • 结合骆驼命名法和划线命名法
      • 骆驼表示区别不同的单词
      • 划线表示从属关系
    1
    2
    3
    4
    5
    6
    <ul class="timeList">
    	<li></li>
    	<li></li>
    	<li></li>
    	<li class="timeList-lastItem"></li>
    </ul>

    在多人合作写page.css的时候在命名的时在前面加上姓名的缩写前缀，这样就可以避免不同的人会命令相同的类名。

    1
    <li class="hz-timeList-LastItem"> </li>

    • 多用组合，少用继承

      通过添加多个类实现组合：将一个复杂的类分成容易产生变化的部分和相对稳定的部分，将容易变化的部分拆分出去，没一种可能的变化设计成一个个单独的类，相对稳定的部分设计成一个主体类。

    • 如何处理margin

      如果不确定上下margin特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类。模块最好不要混用margin-top和margin-bottom，同一使用margin-top或者margin-bottom。

    • 低权重原则—尽量避免使用子选择器
      关于权重：标签是1；class的是10，id的是100。

    1
    2
    3
    div em - 权重(2);
    strong.demo  - 权重(11)
    #test.red - 权重(110)

    与使用在选择器相比，新添class反而更利于维护。

    css的常见问题

    • 编码风格
      多行式：易读。但增加行数，增加文件大小。
      一行式：推荐。

    • css hack
      1.IE条件注释法

    1
    2
    3
    <!-- [if IE 6/7/8/9] -->
    <link rel="stylesheet" href="test.css" class="src">
    <!-- [endIf] -->

    2.选择符前缀法
    在css选择符的前面加上一些特定的符号只有特定的浏览器才可以识别的前缀。

    1
    2
    3
    4
    5
    <style>
    	.test{} IE6/7/8
    	*html .test{} IE6
    	*+html .test{} IE7
    </style>

    3.样式属性前缀法
    _xxx:IE6识别；
    *xxx：IE6/7识别。

    1
    2
    3
    <style>
    	.test{width:80px;*width:70px;_width:60px;}
    </style>

    4.解决超链接访问后hover样式不出现的问题
    注意visited和hover伪类的顺序。
    love hate原则。

    1
    2
    3
    4
    <style>
    	a:visited{color:green;}
    	a:hover{color:red;}
    </style>

    5.hasLayout
    IE浏览器的专有属性，用于css的解析引擎。
    手动触发hasLayout可以解决一些用于解析的时候引起的bug。
    触发方式：

    • 设置宽度和高度，比如height：1%；
    • 设置position:relative;
    • zoom:1最安全，最常用，成本最低。

    6.块级元素和行内元素的区别
    块级：div p form ul ol li
    行内：span strong em
    区别：
    块级可以设置宽度和高度，行内元素设置的话无效。
    块级元素的margin和padding，而行内元素的很奇怪：水平有效，数值无效。

    7.display：inline-block和hasLayout
    Inline-block设置之后，它就是行内的块级元素，可以设置长宽，可以设置margin和padding，但是并不是独占一行，和其他元素并排。

    IE6/7不兼容display：inline-block，但是触发hasLayout可以模拟出这个效果。

    8.relative，absolute和float

    • relative和absolute会改变元素在文档流中的位置。relative会保留z-index为0的占位。
    • float则是没有改变元素在文档流的位置。
    • absolute和float会改变display的值（none除外）成为inline-block。

    9.居中

    • 水平居中：
      1)文本和图片等行内元素
    1
    text-align:center;

    2)确定宽度的块级元素

    1
    width:xxx;margin-left:auto;margin-right:auto;

    3)不确定宽度的块级元素
    三种方法：
    用table标签来实现，table不是块级元素，不设置宽度，它的宽度就是由内部的元素撑起，则即使不设置宽度，由margin-left:auto;margin-right:auto;也可以时居中。

    设置display:inline然后配合text-align:center来实现。

    设置父元素float，然后position:relative和left:50%,然后设置子元素position:relative和left:-50%。

    • 竖直居中
      1)父元素高度不确定的文本和图片以及块级元素的竖直居中。
      通过给父容器设置相同的上下边距padding实现的。

    2)父元素高度确定的单行文本的竖直居中
    so easy! 行高等于父元素的高度即可。

    3)父辈高度确定的多行文本，图片，块级元素的竖直居中。
    方法一：
    vertical-align:只有父元素是td或者th的时候才生效，所以设置display:table-cell来激活。但是IE6/7是不支持的。所以可以直接使用table。

    方法二：
    对于一般的使用display:table-cell和vertical-align:middle;来实现，对于不支持的IE6/7则使用hack

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="wrap">
    	<div class="verticalWrap">
    		<img src="xxx" class="vertical" />
    	</div>
    </div>

    <style>
    .verticalWrap{*position:absolute;*top:50%;}
    .vertical{*position:relative;*top:-50%;}
    </style>

    10.z-index的相关问题以及IE6下的select元素
    z轴在元素设置position为absolute或者relative的时候激活。

    select在IE6中是以窗口的形式存在，bug。如何设置z-index是不起作用的。解决方法就是把要放在select上面的内容放在一个iframe里面。

    11.插入png图片的问题
    IE6对png的透明不友好。脚本解决。