zoukankan      html  css  js  c++  java
  • 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 1
        </div>
        <div class="Bfc">
            column 2
        </div>
    </div>

    And we would need only one extra rule in the style sheet:

    .Bfc {
        overflow: hidden;
        zoom: 1;
    }
    .M-10 {
        margin: 10px;
    }
    .Fl-start {
        float: left;
    }
    .Mend-10 {
        margin-right: 10px;
    }
    .Fz-s {
        font-size: smaller;
    }
    .W-50 {
         50%;
    }

    Compare this to the traditional way:

    <div class="wrapper">
        <div class="sidebar">
            column 1
        </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: 1;
    }
    .sidebar {
         50%;
    }
    .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."    

  • 相关阅读:
    团队沟通利器之UML——活动图
    Ninject对Web Api的支持问题
    关于分布式系统的数据一致性问题
    ASP.NET Web开发框架 查询
    用泛型的IEqualityComparer<T> 去除去重复项
    数据库连接监控组件,避免日常开发中因为数据库连接长时间占用或业务完成后忘记关闭连接所带来的数据库问题
    认识项目经理
    状态模式(State Pattern)
    Django框架学习通用视图
    MS CRM 2011 Schedule Service Activities
  • 原文地址:https://www.cnblogs.com/JesseP/p/10248078.html
Copyright © 2011-2022 走看看