之前有看过CSS3的calc()用法，当时没有怎么注意，也没有认真去看，最多就是标记了一下，当作是已经关注了。
最近有个项目，要实现的是footer无论页面内容是否大于屏幕，始终在最底部，且不能浮动或覆盖任何内容。
网上搜了一下，找到了这个calc()的方法。
例如，如下结构的代码：
<body>
<header>header</header>
<section>section</section>
<footer>footer</footer>
</body>
想要实现footer始终在底部，可以在section标签上写样式min-height: calc(100vh – header高度 – footer高度);
即，在内容部分定义样式，百分百的视图高度，减去头部高度，再减去脚部高度，这样，脚部就始终在最下面。
PS. 不兼容IE8。因为是CSS3。
更详尽的用法说明，可以参考一篇博客，写得很详实：http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html
前提是在不考虑前端工程构建工具的情况——
总的来说，就是要简单、灵活、稳定。
class的命名，属性的权重及先后顺序，都决定了使用的灵活性。
参考bootstrap的命名方式，先有全局，然后针对不同功能的模块或尺寸或颜色，覆写不同样式。
个人认为，要做到bootstrap那样的具备全局观念的样式名称，必须的前提，还是要全局规划，审慎的思考全局里，可能的共有属性的模块，编写统一的样式，然后再根据项目中，不同功能页面的特性，覆写样式，可识别性必须明显。
例如，导航，底部，属于共有模块，可以写全局样式。
例如每个页面的标题栏，共有模块，写全局样式，然后，如果某个页面有不一样的样式，单独覆写。
还有一个必须考虑的因素，即项目中，对方案修改时带来的样式重定义，按我个人的经历来看，即便前期很工整的规划了样式的分类，大致按模块化思路定义了样式，但是，后期各种修改，还是会打乱前期的规划。
这个是难以避免的，项目不能像框架一样去宏大的构成，项目的不确定因素太多了，很多客观因素影响到前端的构成，甚至重构都有可能。
这时候，解决方案可以考虑，文件分割，按照不同页面，分别写不同的css文件，全局样式写到一个文件，然后，不同页面的分别写，虽然产生很多文件，但是，目标清晰，每个页面，只加载各自所需的；然后，每个文件，再按模块分开，用注释标识出来，便于修改时快速查找。