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)的原则)的更多相关文章

  1. 理论篇:关注点分离(Separation of concerns, SoC)

    概念 关注点分离(Separation of concerns,SOC)是对只与"特定概念.目标"(关注点)相关联的软件组成部分进行"标识.封装和操纵"的能力, ...

  2. 编码原则 之 Separation of Concerns

    相关链接: Separation of Concerns 原文 The Art of Separation of Concerns Introduction In software engineeri ...

  3. 【TYVJ】1467 - 通向聚会的道路(spfa+特殊的技巧)

    http://tyvj.cn/Problem_Show.aspx?id=1467 这题我并不是看题解a的.但是确实从题解得到了启发. 一开始我就想到一个正解,设d[i][0]表示i开始走过奇数个点的最 ...

  4. tyvj1467 通向聚会的道路

    背景   Candy住在一个被划分为n个区域的神奇小镇中,其中Candy的家在编号为n的区域,Candy生日这天,大家都急急忙忙赶去Candy家庆祝Candy的生日. 描述   Candy共有t个朋友 ...

  5. 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则

    结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...

  6. 转:一位10年Java工作经验的架构师聊Java和工作经验

    黄勇( 博客),从事近十年的 JavaEE 应用开发工作,现任阿里巴巴公司系统架构师.对分布式服务架构与大数据技术有深入研究,具有丰富的 B/S 架构开发经验与项目实战经验,擅长敏捷开发模式.国内开源 ...

  7. 专访黄勇:Java在未来的很长一段时间仍是主流(把老板当情人,把同事当小孩,把客户当病人)

    url:http://www.csdn.net/article/2015-09-06/2825621 2015-09-06 13:18 摘要:本文采访了现任阿里巴巴公司系统架构师黄勇,从事近十年的Ja ...

  8. MVC-01 概述

    一.何谓MVC 1.MVC是开发时所使用的一种架构(框架). 2.目的在于简化软件开发的复杂度,以一种概念简单却又权责分明的架构,贯穿整个软件开发流程,通过“商业逻辑层”与“数据表现层”的切割,让这两 ...

  9. 一位10年Java工作经验的架构师聊Java和工作经验

    从事近十年的 JavaEE 应用开发工作,现任阿里巴巴公司系统架构师.对分布式服务架构与大数据技术有深入研究,具有丰富的 B/S 架构开发经验与项目实战经验,擅长敏捷开发模式.国内开源软件推动者之一, ...

随机推荐

  1. SQL Server 2008还原数据库时出现“备份集中的数据库备份与现有的数据库不同”的解决方法

    引言 现在在做项目,由于每个人是分模块的,所以大家的测试数据都不同步,导致好多时候会因为别人填的数据不同而调半天的错.所以我还是自己还原一个数据库,自己填自己的数据吧. 报错 之前还原过很多个数据库都 ...

  2. LeetCode刷题(Java)

    第一题 class Solution { public int[] twoSum(int[] nums, int target) { Map<Integer, Integer> map = ...

  3. platform驱动分离

    目录 platform驱动分离 框架结构 与输入子系统联系 设备描述 驱动算法 注册机制 程序 测试 platform驱动分离 框架结构 与输入子系统联系 设备描述 驱动算法 注册机制 程序 测试 - ...

  4. ACM-ICPC 2018 徐州赛区网络预赛 F Features Track(STL模拟)

    https://nanti.jisuanke.com/t/31458 题意 有N个帧,每帧有K个动作特征,每个特征用一个向量表示(x,y).两个特征相同当且仅当他们在不同的帧中出现且向量的两个分量分别 ...

  5. SpringBoot系列: JdbcTemplate 事务控制

    ============================Spring JdbcTemplate 事务控制============================之前使用 JDBC API 操作, 经常 ...

  6. [再寄小读者之数学篇](2014-06-22 最大值点处导数为零的应用 [中国科学技术大学2012 年高等数学B考研试题])

    设 $f(x)$ 在 $[0,1]$ 上连续, 在 $(0,1)$ 内可导, 且 $f(0)=f(1)=0$, $f\sex{\cfrac{1}{2}}=1$. 证明:对于任意的实数 $\lm$, 一 ...

  7. 函数语法:JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转载)

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  8. C#利用VUDP.cs开发网络通讯应用例程

    VClassLib-CS项目Github地址:https://github.com/velscode/VClassLib-CS VUDP文档地址:https://github.com/velscode ...

  9. cnblogs鼠标点击特效

    喜大普奔! 伸手党福利 ! 创建mouse.js文件, 上传到博客, 直接引用即可, 内容如下: (function(window, document, undefined) { var hearts ...

  10. 【webpack】中file-loader和url-loader使用方法

    file-loader 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存.此外,这意味着 你可以就近管理图片文件,可以使用相对路径而不用担心部署时 URL 的问题.使用正确 ...