【译】设计师/后端工程师也能立刻实践！前端设计（CSS设计）的技巧
本文是我在众成翻译平台上认领并翻译的：设计师/后端工程师也能立刻实践！前端设计（CSS设计）的技巧 ，正文内容以下：css
你们好，我是2015年的应届毕业生小原，职位是前端工程师。不久前我加入了新业务的开发，负责前端的设计和实现。我想在回顾当时作法的同时，总结出一套可以轻松实现的前端编程设计方法。html
什么是高灵活性的前端开发设计
不论开发什么样的业务，均可能面临界面样式没有彻底肯定，或者从此还须要增长或改变功能点的状况。所以代码开发与业务构思同样，都须要具有高度的灵活性，对变化频繁的前端来讲更是如此。前端
前端开发的灵活性是指，前端代码能在多大程度上高效的、持续地应对界面更新。web
咱们须要应对哪些变化
界面的变化需求是各类各样的，好比“把这个按钮的颜色和大小改一下”或者“把这块内容往上移一些，让它更醒目一点”之类的。这些修改需求虽然看起来五花八门，但其实均可以分为【功能点的布局】的变化和【功能点的外观】的变化这两类。编程
分离【功能点的布局】与【功能点的外观】
将这二者分离可以造成高效的敏捷性开发周期：从精益开发、设计构思到针对业务不断地进行测试、逐步改善功能。在这种开发模式下，将用户场景（接触功能点的流程 → 功能点的布局）和印象唤起（外观引发的情绪性操做 → 功能点的外观）分离并独立修改的状况也会不少。若是把【功能点的布局】与【功能点的外观】这两个要素分离开来进行独立开发，那么其中一个要素改变的时候另外一个要素就不会产生bug（好比改变外观的时候布局被打乱）。这样一来就可以实现快速响应更新的高效率开发了。另外，因为可以将功能的各个组成部分像堆积木同样组装起来构建网站，开发人员还能够轻松地尝试各类各样的布局。后端
也就是说，在前端开发中，采用将【功能点的布局】与【功能点的外观】有意识地分离开来的设计，可以使代码具有足够的灵活性来应对业务改进的需求。并且这种设计实施起来很是简单。前端工程师
明白这一点以后，即便你不懂前端，也能大体了解什么是具备灵活性的良好编程设计了吧。ide
分离开发【功能点的布局】与【功能点的外观】的方法
引言说的有点多了，仍是来看看具体应该如何进行上文所述的前端开发吧。 整体思路是，在有关DOM构造和CSS的部分，遵循分离【功能点的布局】与【功能点的外观】这一规则进行代码编写。 ※ 详细的规范：文件结构与布局的命名遵循SMACSS风格，模块的命名则遵循BEM风格。布局
【功能点的外观】代码编写方法
首先介绍【功能点的外观】，这部分代码我采用了流动设计。这里的流动设计是指，元素的宽高尺寸依赖于外层元素，随外层元素宽高尺寸的变化而变化。代码实现以下所示：测试
// 例1 左边栏设计 <div class="item"> //与item的外观相关的全部css类名所有包含“item” <div class="item__movie">...</div> <div class="item__body"> <div class="item__body__title">...</div> <div class="item__body__prof"> //在item中添加了prof组件 //一样与prof的外观相关的全部css类名所有包含"prof" <div class="prof"> <div class="prof__user"> <div class="prof__user__img"></div> <div class="prof__user__inf"></div> </div> </div> </div> <div class="item__body__tag">...</div> </div> <div class="underline"></div> </div>
/** 外层的.item的设计要注意 **/ .item{ width: 100%; /** 为了将宽度的设置交给【item的布局】css文件，在这里将宽度设为100% **/ /** float: left; 反例 设置【item的布局】的css不要写 **/ /** margin: 10px; 反例 设置【item的布局】的css不要写 **/ /** 如下是设置外观的css **/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.3); -moz-box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.3); box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; }
/** 为避免在item外发生css干扰进行嵌套**/ /** 另外，使用__明确表示这是item的子元素**/ .item .item__body{ /** 自由设置css **/ ... } .item .item__body .item__body__title{ /** 自由设置css **/ .. }
// 例2 右边栏设计 <div class="nav"> <div class="nav__title--l">...</div> <div class="nav__select"> <div class="nav__select__child">...</div> <div class="nav__select__child">...</div> <div class="nav__select__child">...</div> </div> <div class="nav__title--s">...</div> <div class="nav__title--s">...</div> <div class="nav__title--s">...</div> </div>
/** 外层的.nav的设计要注意 **/ .nav{ /**为了将宽度的设置交给【nav的布局】css，在这里将宽度设为100% **/ width: 100%; height: 100%; /** float, margin之类与布局有关的css不要写 **/ /** 如下是设置外观的css */ -webkit-box-shadow: 1px 0px 3px rgba(153, 153, 153, 0.5); -moz-box-shadow: 1px 0px 3px rgba(153, 153, 153, 0.5); box-shadow: 1px 0px 3px rgba(153, 153, 153, 0.5); position: relative; color: #e9e8e8; background-color: #253038; }
/** 避免在nav外发生css干扰**/ .nav .nav__title{ /** 自由设置css **/ ... } .nav .nav__title.nav__title--l{ /** 自由设置css **/ ... } .nav .nav__select{ /** 自由设置css **/ .. }
为何这样写？
这段代码的目的是将class="item"和class="nav"这两个元素内部包含的全部子元素的【功能点的外观】整合起来。class="item"所包含的class="item__body"等内部元素的css设计也能够进一步细化，但首先要注意的是，class="item"和class="nav"这两个父元素的与【功能点的布局】相关的css设计没有写在这个css文件中。
这样一来，对class="item"和class="nav"这两个元素来讲，【功能点的外观】就被独立出来了。
※像class="nav__title--l"这样包含“__"或“-”的命名方法是基于BEM记法的。在这里的做用只是一种命名规范，好比为了明确地防止在元素class="item"外发生css干扰。
【功能点的布局】代码编写方法
接下来介绍【功能点的布局】，为了设定各个组成部分的位置，我准备了一个盒模型。代码实现以下所示：
<html> <head>...</head> <body> <div class="l-wrap"> <div class="l-main"> <div class="l-header"></div> <div class="l-height-offset"></div> <div class="l-side"></div> <div class="l-cont"> <div class="l-cont__body"></div> </div> </div> </div> </body> </html>
/** 在设定布局的代码中加上前缀“l-” **/ /** background, color, border等与外观有关的css不要写 **/ /** 感受就像在编写只定义了大小和位置的透明盒子 **/ .l-wrap { width: 100%; height: 100%; /** 像这样与外观有关的css不要写 **/ } .l-main { width: 100%; min-height: 100%; vertical-align: top; } /** 若是要写设定外观的代码，要经过不一样的类名来写 **/ .main { background-color: #fbfbfc; } .l-header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 48px; } .l-height-offset { height: 48px; } .l-side{ position: fixed; z-index: 99; top: 48px; width: 230px; height: 100%; max-height: 100%; } .l-cont{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding-left: 230px; margin: 0 auto; } .l-cont__body { -webkit-box-sizing: border-box; -moz-box-sizing: border