CSS---通向臃肿的道路(关于 “separation of concerns” (SoC)的原则)
When it comes to CSS, I believe that the sacred principle of “separation of concerns” (SoC) has lead us to accept bloat, obsolescence, redundancy, poor caching and more. Now, I’m convinced that the only way to improve how we author style sheets is by moving away from this principle.
The Path To Bloat
Because the styles of our module are tied only to presentational class names, they can be anything we want them to be. For example, if we need to create a simple two-column layout, all we need to do is replace the link with a div
in our template. That would look like this:
- <div class="Bfc M-10">
- <div class="Fl-start Mend-10 W-25">
- column
- </div>
- <div class="Bfc">
- column
- </div>
- </div>
And we would need only one extra rule in the style sheet:
- .Bfc {
- overflow: hidden;
- zoom: ;
- }
- .M- {
- margin: 10px;
- }
- .Fl-start {
- float: left;
- }
- .Mend- {
- margin-right: 10px;
- }
- .Fz-s {
- font-size: smaller;
- }
- .W- {
- width: %;
- }
Compare this to the traditional way:
- <div class="wrapper">
- <div class="sidebar">
- column
- </div>
- <div class="content">
- sidebar
- </div>
- </div>
This would require us to create three new classes, to add an extra rule and to group selectors.
- .wrapper,
- .content,
- .media,
- .bd {
- overflow: hidden;
- _overflow: visible;
- zoom: ;
- }
- .sidebar {
- width: %;
- }
- .sidebar,
- .media .img {
- float: left;
- margin-right: 10px;
- }
- .media .img img {
- display: block;
- }
I think the code above pretty well demonstrates the price we pay for following the SoC principle. In my experience, all it does is grow style sheets.
Moreover, the larger the files, the more complex the rules and selectors become. And then no one would dare edit the existing rules:
- We leave alone rules that we suspect to be obsolete for fear of breaking something.
- We create new rules, rather than modify existing ones, because we are not sure the latter is 100% safe.
In other words, we make things worse because we can get away with bloat.
Nowadays, people are accustomed to very large style sheets, and many authors think they come with the territory. Rather than fighting bloat, they use tools (i.e. preprocessors) to help them deal with it. Chris Eppstein tells us:
"LinkedIn has over 1,100 Sass files (230k lines of SCSS) and over 90 web developers writing Sass every day."
CSS---通向臃肿的道路(关于 “separation of concerns” (SoC)的原则)的更多相关文章
- 理论篇:关注点分离(Separation of concerns, SoC)
概念 关注点分离(Separation of concerns,SOC)是对只与"特定概念.目标"(关注点)相关联的软件组成部分进行"标识.封装和操纵"的能力, ...
- 编码原则 之 Separation of Concerns
相关链接: Separation of Concerns 原文 The Art of Separation of Concerns Introduction In software engineeri ...
- 【TYVJ】1467 - 通向聚会的道路(spfa+特殊的技巧)
http://tyvj.cn/Problem_Show.aspx?id=1467 这题我并不是看题解a的.但是确实从题解得到了启发. 一开始我就想到一个正解,设d[i][0]表示i开始走过奇数个点的最 ...
- tyvj1467 通向聚会的道路
背景 Candy住在一个被划分为n个区域的神奇小镇中,其中Candy的家在编号为n的区域,Candy生日这天,大家都急急忙忙赶去Candy家庆祝Candy的生日. 描述 Candy共有t个朋友 ...
- 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则
结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...
- 转:一位10年Java工作经验的架构师聊Java和工作经验
黄勇( 博客),从事近十年的 JavaEE 应用开发工作,现任阿里巴巴公司系统架构师.对分布式服务架构与大数据技术有深入研究,具有丰富的 B/S 架构开发经验与项目实战经验,擅长敏捷开发模式.国内开源 ...
- 专访黄勇:Java在未来的很长一段时间仍是主流(把老板当情人,把同事当小孩,把客户当病人)
url:http://www.csdn.net/article/2015-09-06/2825621 2015-09-06 13:18 摘要:本文采访了现任阿里巴巴公司系统架构师黄勇,从事近十年的Ja ...
- MVC-01 概述
一.何谓MVC 1.MVC是开发时所使用的一种架构(框架). 2.目的在于简化软件开发的复杂度,以一种概念简单却又权责分明的架构,贯穿整个软件开发流程,通过“商业逻辑层”与“数据表现层”的切割,让这两 ...
- 一位10年Java工作经验的架构师聊Java和工作经验
从事近十年的 JavaEE 应用开发工作,现任阿里巴巴公司系统架构师.对分布式服务架构与大数据技术有深入研究,具有丰富的 B/S 架构开发经验与项目实战经验,擅长敏捷开发模式.国内开源软件推动者之一, ...
随机推荐
- DP擎天
DP! 黄题: 洛谷P2101 命运石之门的选择 假装是DP(分治 + ST表) CF 982C Cut 'em all! 树形贪心 洛谷P1020 导弹拦截 单调队列水题 绿题: 洛谷P1594 护 ...
- 转载:ORA-12516 “TNS监听程序找不到符合协议堆栈要求的可用处理程序” 解决方案
ORA-12516 “TNS监听程序找不到符合协议堆栈要求的可用处理程序” 解决方案 简单描述一下场景,总共两台应用服务器,每台安装3个tomcat进行集群,并通过nginx做了负载均衡,今天在生 ...
- makefile :=和+=
经常有人分不清= .:=和+=的区别 这里我总结下做下详细的分析: 首先你得清楚makefile的运行环境,因为我是linux系统,那么我得运行环境是shell 在Linux的shell里,shel ...
- 使用idea搭建maven项目
前言---2018-11-24 博主最近呀,也是一直在看书,但是呢有许多小伙伴和博主反应,在eclipse都会搭建maven项目,但是呢到了idea就不会了,于是了博主就起了个早床写一遍博客咯.希望对 ...
- Numpy系列(一)- array
初始Numpy 一.什么是Numpy? 简单来说,Numpy 是 Python 的一个科学计算包,包含了多维数组以及多维数组的操作. Numpy 的核心是 ndarray 对象,这个对象封装了同质数据 ...
- Eclipse之JSP页面的使用
Eclipse之JSP页面的使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.使用Eclipse创建JSP文件 1>.点击new file,选择jsp File 2&g ...
- java Concurrent并发容器类 小结
Java1.5提供了多种并发容器类来改进同步容器的性能. 同步容器将所有对容器的访问都串行化,以实现他们的线程安全性.这种方法的代价是严重降低并发性,当多个线程竞争容器的锁时,吞吐量将严重减低. 一 ...
- 4.Centos7安装JDK8以及环境配置
1.下载 linux 版本 jdk (jdk-8u11-linux-x64.tar.gz) 一定要是 .tar.gz 版本,可以去我的百度网盘下载或者在百度上面找 2.新建文件夹命令:mkdir /u ...
- Leetcode#88. Merge Sorted Array(合并两个有序数组)
题目描述 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素数量分别为 m ...
- Leetcode#344. Reverse String(反转字符串)
题目描述 编写一个函数,其作用是将输入的字符串反转过来. 示例 1: 输入: "hello" 输出: "olleh" 示例 2: 输入: "A man ...