前段时间，顶头上司给了一个课题，让我演说一下如何写出在项目中可复用性强的样式代码，方便应用于所有相似的页面，而且可以根据需求直接改变某一部分的样式。
想了一下，就顺便写写我个人的一点感想。、
先说说开发环境吧，我是用less+gulp进行开发，首先定义好gulpfile的方法：
//导入工具包 require(‘node_modules里对应模块‘) var gulp = require(‘gulp‘), //本地安装gulp所用到的地方 g = require(‘gulp-load-plugins‘)({lazy:false}); // -----------------pc------------------------- /*错误处理*/ var handleError = function (err) { g.util.beep(); /*发出滴声提示*/ g.util.log(err).toString(); /*输出错误信息*/ }; gulp.task(‘baseCss‘, function () { gulp.src(‘src/less/pc-base/base.less‘) //生成pc-css .pipe(g.plumber({errorHandler: handleError})) /*less文件错误时不退出watch服务，同时打印出错误信息*/ .pipe(g.less()) .pipe(gulp.dest(‘src/home/css‘)); }); // -----------------pc------------------------- gulp.task(‘homeCss‘, function () { gulp.src(‘src/less/home/home.less‘) .pipe(g.plumber({errorHandler: handleError})) /*less文件错误时不退出watch服务，同时打印出错误信息*/ .pipe(g.less()) .pipe(gulp.dest(‘src/home/css‘)); }); gulp.task(‘userCss‘, function () { gulp.src(‘src/less/home/user/user.less‘) .pipe(g.less()) .pipe(gulp.dest(‘src/home/css/user‘)); }); gulp.task(‘adminCss‘, function () { gulp.src(‘src/less/admin/admin.less‘) .pipe(g.less()) .pipe(gulp.dest(‘src/admin/css‘)); }); gulp.task(‘styleCSS‘, function() { gulp.src([‘src/less/pc-base/base.less‘, ‘src/less/home/home.less‘, ‘src/less/home/user/user.less‘]) .pipe(g.plumber({errorHandler: handleError})) /*less文件错误时不退出watch服务，同时打印出错误信息*/ .pipe(g.less()) .pipe(gulp.dest(‘src/home/css‘)); }) gulp.task(‘watchUser‘, function () { gulp.watch(‘src/less/pc-base/*.less‘,["baseCss"]); gulp.watch(‘src/less/home/*.less‘,["homeCss"]); gulp.watch(‘src/less/home/user/*.less‘,["userCss"]); gulp.watch(‘src/less/admin/*.less‘,["adminCss"]); }); gulp.task(‘serve‘, [‘styleCSS‘, ‘adminCss‘, ‘watchUser‘]); gulp.task(‘navCss‘, function () { gulp.src(‘src/less/home/nav.less‘) .pipe(g.less()) .pipe(gulp.dest(‘src/home/css‘)); }); gulp.task(‘nav‘, function () { gulp.watch(‘src/less/home/nav.less‘,["navCss"]); });
gulp安装，以及导入导出设置这里就不作详细讲解。
我本人理解写可复用性强的css其实就是分模块定义，现在各种各样的框架MVC 等都是让项目模块化，按需加载使运行更快，更好的维护，分模块定义less也是同理，公共的样式定义好，每个模块的样式分别写在一个less里。
如何让将less分模块呢，一下是less的列表，所有的less最后会编译到一个统一的css里引入html项目内。
公司的项目是企业门户网站，定义的样式分别是：
reset.less // 对浏览器的默认样式进行重设
base.less // 标签的基本样式
common.less // 页面的公共
input.less // 统一管理表单的样式
nav.less // 网站导航的统一样式
等等，只有最合适的命名方式。主要就是从html结构和bug的快速定位和便于其他成员的修改上去考虑，尽量做到与html布局契合。
定义base的样式，base就是整个项目的基本样式，里面定义好各种标签的基本样式，颜色，边框等，都定义好。（ps：本人推荐标签样式就在这里定义好，之后的其他less里面尽量不要改标签样式，需要改变样式直接通过添加类实现，以免引起错误，也方便其他项目的协作者更好进行删改和重构）
样式里调整最多就是margin，padding，border，为了对页面维护更加简单，不推荐直接在相对应的div里编写，如一个页面可能有样式有数千行，在一个div的class里写了margin-left：10px；后面构建页面的时候发现需要margin-left是20px；需要修改的时候就会比较麻烦，一个还好，如果是大量相同的页面都需要更改不同的margin样式就会变得非常麻烦，就需要通过在base里统一定义一系列的样式，如下：
.inline-block{display: inline-block;}
.none{display: none;}
.clearfix:after{
content:"\20";
clear:both;
height:0;
display:block;
overflow:hidden;
}
.clearfix{*zoom:1;}
.innerCenter{
margin: @inner-area-margin;
width: @inner-area-width;
}
.tac{text-align: center;}
.tar{text-align: right;}
//字体
.fz12{font-size: 12px;}
.fz14{font-size: 14px;}
.fz16{font-size: 16px;}
.fz18{font-size: 18px;}
.fz20{font-size: 20px;}
.fz24{font-size: 24px;}
//外边距
.m0{margin: 0;}
.ma0{margin: 0 auto;}
.ml0{margin-left: 0;}
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.ml20{margin-left: 20px;}
.ml25{margin-left: 25px;}
.ml30{margin-left: 30px;}
.ml98{margin-left:98px;}
.mtn5{margin-top: -5px;}
.mt0{margin-top: 0;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mr0{margin-right: 0;}
.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr15{margin-right: 15px;}
.mr20{margin-right: 20px;}
.mr25{margin-right: 25px;}
.mr30{margin-right: 30px;}
.mr-20{margin-right: -20px;}
.mb0{margin-bottom: 0;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
//内边距
.p0{padding: 0;}
.p10{padding: 10px;}
.ptb50{padding: 50px 0;}
.plr50{padding: 0 50px;}
.pl0{padding-left: 0;}
.pl10{padding-left: 10px;}
.pl15{padding-left: 15px;}
.pl20{padding-left: 20px;}
.pl25{padding-left: 25px;}
.pl30{padding-left: 30px;}
.pt0{padding-top: 0;}
.pt5{padding-top: 5px;}
.pt10{padding-top: 10px;}
.pt15{padding-top: 15px;}
.pt20{padding-top: 20px;}
.pt25{padding-top: 25px;}
.pt30{padding-top: 30px;}
.pr0{padding-right: 0;}
.pr10{padding-right: 10px;}
.pr15{padding-right: 15px;}
.pr20{padding-right: 20px;}
.pr25{padding-right: 25px;}
.pr30{padding-right: 30px;}
.pb0{padding-bottom: 0;}
.pb5{padding-bottom: 5px;}
.pb10{padding-bottom: 10px;}
.pb15{padding-bottom: 15px;}
.pb20{padding-bottom: 20px;}
.pb25{padding-bottom: 25px;}
.pb30{padding-bottom: 30px;}
需要更改就在对应的div直接添加对应的class，更便于维护。
关于css的命名
一些常用的class命名：
头：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，
这些命名大概都是约定俗成的通用样式命名。
还有关于css性能的问题
以前写less的时候总是会不停的嵌套，一个div里面嵌套无数的div，同时定义无数的类，不停的嵌套下去，如：
.nav{
.title{
.top{
.content{
span{...}
p{...}
}
}
}
}
经过less编译到css里就变成了.nav .title .top .content span{...}; .nav .title .top .content p{...};而浏览器的识别往往是从右到左进行的，这样写浏览器首先会查找页面上所有的“span”节点，然后再去做进一步的判断：如果它的父节点的 class 为“.content”，再进行下一步遍历，直至匹配成功。由此可见，这样匹配远比我们想象的要慢的多，CSS 的性能问题不容忽视。我会尽量使用base里定义好的标签样式，如果还有其他的特别的样式，直接通过class来添加，有利于页面渲染。
Color
Font
Letter-spacing
Line-height
List-style
Text-align
Text-indent
Text-transform
White-space
Word-spacing
#bookmark > .menu-left {list-style-image: url(blah)}
------------>>>>>>>>
#bookmark {list-style-image: url(blah)}
在 CSS 中，有很多 CSS 的属性以可以继承的，如果某个节点的父节点已经设定了上述的 CSS 样式（如：color, font 等 ...），并且子节点无需更改该样式，则无需再作相关设定，同时，也可以利用这一点：如果很多子节点都需要设定该 CSS 属性值，可以统一设定其父节点的该 CSS 属性，这样一来，所有的子节点再无需做额外设定，加速了 CSS 的分析效率。
而且写页面html，css，JavaScript分离，不再标签里直接加样式，这样也方便也页面的维护。
原文：http://www.cnblogs.com/zjh1989blog/p/5167027.html