zoukankan      html  css  js  c++  java
  • MaintainableCSS 《可维护性 CSS》 --- 复用篇

    复用

    通常,Harry Roberts 所说的 DRY (Don't repeat yourself) 经常被曲解成永远不要重复做通一件事。 但实际上这是不现实的,而且常常导致过分抽象,用太多的精力去过分优化代码,最后得不偿失。

    过度抽象化代码有多痛苦,在 语义篇 已经讲过了,Mixins 也是一个问题。

    同时我们要去考虑抽象, 我们怎么办呢?

    如何复用 Style ?

    一种做法是用逗号分隔符实现,例如:

    .someThing,
    .anotherThing {
        color: red;
    }
    

    这就是一个简单的复用技术,关于其他的复用技术,我们会在模块篇,状态篇,修饰符篇讨论。

    有关 Mixins

    就像工具类一样,修改 mixins 后会自动作用到所有的实例。

    同时 mixins 容易致使多个规则,多参数和多条件。这导致后期难以维护。

    为了降低复杂度,我们会创建小粒度的 mixins ,例如,作用红色文本 (red text) 。期初开起来不错,但是这并非是 red mixins 声明,更像一个规则本身。color: red?

    如果我们需要在多个地方更新规则,搜索和替换就非常必要了,此外,当 red mixin 变为 orange 时,其名称都要更新。

    所以,mixins 很不错,我们应该使用它,但是要明智地使用它。

    有关 Performance

    如果 css 超过了 100kb, 再进行盲目的 DRY ,收效就不是很大了,我们要做的就是使 css 更小,才能使 HTML 更强大。

    压缩图片能显著提高性能。这就是我想表达的,解决其他形式的冗余可以提高维护性和性能。

    违反 DRY 的原则

    例如,如果尝试复用 float:left,就像在不同的 Javascript 对象中复用变量名,这也是不可取的。

    最后总结

    DRY 如果导致过度抽象和过度编程, 我们会难以维护。所有,我们不应该痴迷它的形式,而应该关注于复用具体的模块。我会在以后章节中说明这些。

  • 相关阅读:
    Spring MVC 完全注解方式配置web项目
    spring WebServiceTemplate 调用 axis1.4 发布的webservice
    修改Intellij Idea 创建maven项目默认Java编译版本
    Git Commit提交规范和IDEA插件Git Commit Template的使用
    myEclipse10安装以及破解
    ES6中Map与其他数据结构的互相转换
    ES6用来判断数值的相关函数
    WebStorm使用码云插件问题
    Css解决表格超出部分用省略号显示
    Js/Jquery获取网页屏幕可见区域高度
  • 原文地址:https://www.cnblogs.com/lvyongbo/p/7109951.html
Copyright © 2011-2022 走看看