为什么要模块化
项目多人开发，由于命名不规范，耦合太强，导致改一个东西可能影响到别的并不想影响地方的样式
模块化的好处
- 提高代码重用率
- 提高开发效率、减少沟通成本
- 降低耦合
- 便于代码维护
怎么实现css模块化
- 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*/
- 常用的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(); }