后端转前端 起步 css理论 OOCSS/SMACSS 实战心得

序言：不管什么工做，最好都带上本身的思想，明悟一条清晰的行为方针。

2019年，后端转前端工做数月后，认为前端开发样式书写太繁琐，样式之间的覆盖问题也让人头疼，身为一个懒人，得想办法简化本身的工做！

网上查看了2014年的一些css理论，如oocss/smacss。面向对象的css？感受又回到了后端老本行了。一番仔细阅读后，值得一试！如下为理论连接

http://www.javashuo.com/article/p-tptoueqj-hd.html

又通过数月的实战应用，已经逐渐适应了本身写的css"框架(?)"，而且也成功安利同事使用，同事用了都说好！

目录结构：

首先，网上下载了一个reset.css，清理一些body边框，设置box-sizing之类的事情

其次，主要分为3类：

• lay-index 框架布局基础样式
• pro-index 项目功能性的组合样式
• fuc-less width/height/margin/padding等自动生成

最后，则是element-ui的组件样式重置，与主题切换。

1、lay-index核心代码之flex(less语法)：

lay-index是布局css文件，而目前最实用的布局天然是flex弹性布局,还不了解flex的同窗请戳：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

lay-index作的工做则是，将复杂flex语法属性简化，好比我要实现纵向自适应排列：

<div class="flex col"> <div class="flex1" style="width:100%"> 占据(100%-30px)*100/170的高度 </div> <div class="flex07" style="width:100%"> 占据(100%-30px)*70/170的高度 </div> <div class="flex-none" style="height:30px"> 占据30px的高度 </div> </div>复制代码

若是我但愿一个div内容 水平居中和垂直居中(画重点，要考！)

<div class="flex"> 内容居中了 </div>复制代码

lay-indnx内其余代码，例如：

2、pro-index里的核心代码

这里存储一些由项目产生的组件样式，方便下次开发快速应用。

<div class="in-flex pro-box width">
   内容居中了,我有边框了
</div>复制代码

3、fuc-less里的核心代码

在框架完善过程当中发现，逐渐添加的 单元样式，已经能知足平常的工做须要了，惟一很差处理的是：width、height、padding、margin这样的不定数值

为了代码写起来舒畅，因而利用less的循环自增语法，来解决这个问题。

最终会获得：

.height30,.width200,.padding5,.marginT15 这些批量产生的css

如下为最终代码：

<div class="WH flex col">        <headerSub class="width flex-none paddingL30"></headerSub>        <div class="width flex1 flex row padding10 pro-box">            <leftMenu :leftMenu="leftMenu" ></leftMenu>            <router-view class="flex1 height"></router-view>        </div>    </div>复制代码

整个css框架，是在几个月内逐渐累积下来的，也通过了数次迭代，大概在作第三个项目时，发现框架已经没有什么须要新增或修改的东西了。

每次书写页面也比之前快了不少，也不用再记太多的css代码，甚至都再也不须要UI出效果图，直接对着原型写前端。

我也仔细思考了下，为何oocss并无流行起来：

1. 市面上有适应面更广，能直接使用的，诸如 bootstrap这样的框架
2. oocss须要前端开发人员带着本身的想法，去推演一段时间才能成行
3. 最终成型的结果，带有浓郁的我的风格，其它人不必定能彻底适应
4. 属于奇技淫巧，会忽视掉代码基础（长期简写，一些样式的完整写法我也忘了）

我又认真的考虑了下，我为何要继续用这个框架：

                概因：天下武功，无坚不摧，惟快不破

最后，将此安利给那些在小公司独自奋战的前端们，但愿大家用更少的时间完成工做，更多的时间学习进步

console.log(`以为有帮助的话，点个赞吧\(^o^)/~`,huhuche);复制代码