日照网站建设公司教你Red Hat 代码运用技巧！

Red Hat 代码

1　过多的依赖

如果有人想渲染我们样式中的某一块内容，首先需要加载以下内容。

Bootstrap CSS：114KB（未压缩）

　　其实网站本身没怎么调用 Bootstrap 库的代码，但我们编写所有 CSS 的前提条件都是 Bootstrap 已经重置了基本样式，所以一旦把这些样式拿走，整个页面就不能正常使用了。

主旨的网站CSS：500KB

　　虽然一般来说，每块内容都有一个单独的关联文件，但这个文件绝不是这块内容的单一样式来源。样式不仅来源位置多样，并且常常基于位置和页面的类被覆盖重写。

2　严重的位置依赖问题

这个项目所使用的标记命名方法都是按照内容块的层级顺序自上而下添加的。我们有几种不同的内容块类型，大部分样式都有固定的作用域，只能在某个内容块内重复使用。下面是一个极端的例子，在广告图版块里有一个 H3 标签：

这个样式不仅被局限在一个页面里（about-contact），而且我们还需要确认 features-quarter 部分是容器标签的直接后代，这样才不会不小心把样式添加到其他部分的元素的后代上。这种自上而下的样式命名方法意味着，每次修改我们都要写一个更长、更具体的选择器。同时，因为标记顺序极为严格，每块内容都很难重排或替换。

当然，我们可以抽出一个单独的组件，并把它需要的所有样式合并到一个单独的文件里，但是这么做基本意味着完全重做这个组件里的 Sass 文件，而且这么做也并没有真的实现标记的模块化。

于是，当我被问及我们的设计是如何模块化的而且能不能把样式分享给其他部门时，我只能说，如果要分享某部分，我们就需要重写那部分的标记和 CSS，同时还得更新网站的标记。

我确信，这样与起初设计方案背道而驰的提议，一定会使我的笑声传出这个房间。因此你就能理解，当他们居然不仅同意了，而且在新网站代码被冻结的情况下还给我们几周时间去构建新系统的时候，我为什么如此惊讶了。

所以，目前我们有了完整的设计、一个非常能干的开发团队，还可以全权创建全新的模块化、可扩展和可持续的设计系统。网站建设好之后，新系统将成为一个有名的高负载的动态网站。