css模块化

为什么要模块化

项目多人开发，由于命名不规范，耦合太强，导致改一个东西可能影响到别的并不想影响地方的样式

模块化的好处

• 提高代码重用率
• 提高开发效率、减少沟通成本
• 降低耦合
• 便于代码维护

怎么实现css模块化

1. css样式文件名，规范化，语义化

1）　
主要的 master.css 
布局，版面 layout.css 
专栏 columns.css 
文字 font.css 
打印样式 print.css 
主题 themes.css

2）
reset.css // 对浏览器的默认样式进行重设 
layout.css // 管理页面的布局 
typeset.css // 图文的编排
color.css // 统一管理颜色的搭配 
print.css // 打印效果样式 
ie.css // 把对ie的hack单独分开 

3）
reset.css 
header.css // 头部的所有样式 
container.css // 除头部/底部外的中间区域样式 
footer.css // 底部样式 
print.css 
ie.css 

4)
reset.css /*页面样式重置*/
header.css /*全站头部样式*/
footer.css /*全站尾部样式*/
public.css /*全站公共模块样式*/
index.css /*首页特有样式*/
container.css /*二级及以下主体样式*/
print.css /*打印样式*/
ie.css /*IE hack*/

2. 常用的css命名规则

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guide

服务：service

注册：register

状态：status

投票：vote

合作伙伴：partner

3.class的命名

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }
（2）字体大小,直接使用”font+字体大小”作为名称,如

.font10px { font-size: 10px; }

.font6pt {font-size: 6pt; }
(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }
(4)标题栏样式,使用”类别+功能”的方式命名,如

.barnews { }

.barproduct { }

4.common.css全局提取的公用样式直接使用，减少耦合性

/* common.less */
@charset "utf-8";
/*!
 * utils.less v3.0
 * based on veryless: http://veryless.org/
 */           


// 清除(闭合)浮动：http://www.iyunlu.com/view/css-xhtml/55.html
.Clearfix () { 
    *zoom: 1;
    &:before, 
    &:after {
        display: table;
        content: "";

      /*
       * Fixes Opera/contenteditable bug:
       * http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
       */
      line-height: 0;
    }
    &:after {
        clear: both;
    }
}


// inline-block
.Inline-block () { 
    /* 如果有必要可在其父元素上应用样式vertical-align:top; */
    display:inline-block; 
    *display:inline; 
    *zoom:1;
} 


// 文字隐藏
.Text-hidden () {
    /* 
     * 魔鬼的text-indent-9999px:
     * http://prezi.com/t8yyirefxn2u/text-indent-9999px/ 
     */
    text-indent: 100%;

    white-space: nowrap; /* 强制不换行 */
    overflow: hidden;
}

.Text-ellipsis () {
    /* 
     * 文字溢出隐藏显示省略号，需要用在与文字最近的一个block|inline-block的祖先元素上(ie6中该元素的width需要显性的声明且不能为auto,100%是可行的) 
     */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 文字(强制)折行
.Text-break () {
    word-wrap:break-word;
    word-break:break-all;
}


// 自定义字体
.Font-face(@path, @font-name){
    @font-face{
        font-family: @font-name;
        src: url('@{path}/@{font-name}.eot');
        src: url('@{path}/@{font-name}.eot?#iefix') format('embedded-opentype'),
             url('@{path}/@{font-name}.woff') format('woff'),
             url('@{path}/@{font-name}.ttf')  format('truetype'),
             url('@{path}/@{font-name}.svg#svgFontName') format('svg');
    }
}


// (整体)透明
.Opacity (@a: 0.3) {
    @aa: (@a*100); 
    opacity: @a;
    filter: ~"Alpha(Opacity=@{aa})"; /* ie5-8 */
    *zoom: 1; /* 应用滤镜的元素必须拥有layout */
}
// 背景透明
.Background-rgba (@r: 0, @g: 0, @b: 0, @a: 0.3) {
    @c: rgba(@r, @g, @b, @a);
    @cc: argb(@c);
    background-color:@c;
    filter:~"progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='@{cc}',EndColorStr='@{cc}')";
    *zoom: 1;
}


// 圆角
.Border-radius (@a: 3px) {
    -webkit-border-radius: @a;
       -moz-border-radius: @a;
            border-radius: @a;
}

// 阴影
.Box-shadow ( @a: 0 1px 3px rgba(0,0,0,.3); ) {
    -webkit-box-shadow: @a;
       -moz-box-shadow: @a;
            box-shadow: @a;
}


// 渐变
.Linear-gradient (@a: #ffa600; @b: #fe9200) {
    filter: ~'progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="@{a}", endColorstr="@{b}")';
    background-image: -webkit-linear-gradient(top,@a, @b);
    background-image: -moz-linear-gradient(top,@a, @b);
    background-image: -ms-linear-gradient(top,@a  0,@b 100%);
    background-image: -o-linear-gradient(top,@a, @b);
    background-image: linear-gradient(top,@a, @b);
}
// 禁用渐变
.Linear-gradientDisable () {
    background-image: none;
　　filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);  /* 禁用渐变 */
}


.Box-sizing ( @a: content-box ) {
    -webkit-box-sizing: @a;
       -moz-box-sizing: @a;
            box-sizing: @a;
}

/*!
 * 使用
 */
@charset "utf-8";
@import "lib/common.less";
/*!
 * index.less
 */

.main { .Clearfix(); }
.notice li { .Text-ellipsis(); }
.comment { .Text-break(); }