前端进阶学习（三） --css框架初探

来源：互联网发布：徐州网络推广编辑：程序博客网时间：2024/05/18 00:21

最近在参考trello学习前端，基本完成了大体框架，也是进一步了解了利用框架和组件的优势，于是考虑尝试下建立自己的小型的前端框架，或许不那么优秀，但自己用着舒服，想归想，我是这样子做的：

一.重复造轮子有意义么？

其实用自己的而不用已经写好的强大的框架并不是因为自己写的要更优秀。

一是自己写的更加熟悉，无论是扩展还是应用，可能都更容易使用。

二是可以提升自己对整套前端结构的认识，并且总结归纳。

三是框架层出不穷，熟悉一个又一个框架的时间成本可能也会越来越多。

二.轮子的好与坏

1. 目录组织

参考了 Bootstrap , Blueprint , Yui , Yaml 四个框架的组织方式

当使用一个框架时，我们一般会把所需框架本身的样式链到页面中，然后在它的基础上进行修改。所以框架本身所带的样式可以理解为基础样式。即我们平时所说的全局样式+组件样式。

可以看到，在目录架构上4个框架基本都是遵循基本样式+用户定义扩展样式的常规方式进行组织。

然而，如果按 Bootstrap 做法的话，可能会出现把不常用组件样式也包含在全局样式中一并引入，如果把组件也写在全局 CSS 中，最好确保该组件出现频率较高才引入，避免不必要的带宽浪费。

关于 hack：
对于针对低版本浏览器所写的 hack，对它的处理方式，Blueprint 和 Yaml 都是使用单独引入 hack 文件的形式进行处理，笔者也尝试过这样的做法。
个人觉得这种方式的好处是可以避免给高级浏览器带来冗余代码，而且通过条件判断引入 CSS 也不会给高级浏览器带来额外的请求。

这种方式比较适用于，高低级浏览器本来就刻意设计成有较大差别的情况下，即 hack 比较多的时候才使用。不然就为了十来行 hack 而多引入一个文件的话似乎也不太可取。

2. CSS 规范

a. 前缀

框架中公用模块都有前缀，分别有以下3个思想：
1. Yaml , Yui ：无论如何都是统一的标识开头，再加上改模块名称。
2. Bootstrap：直接模块名称，这方式需要定义关键字。公用模块是 button 都以 btn – 开头， image 则以 img- 开头。
3. Nec ：单字母开头来标识组件。

一般来说应用一个框架，我们先引入框架的样式，再在之上覆盖上自己的样式，所以可以把框架看作是我们的基础CSS。

我们可以借鉴框架的前缀规范来规划我们的基础 CSS 前缀，根据自己的项目实际情况采取不同的方案。

b. 类的划分

类的划分方式在框架中主要有2种标准，分别为：以【组件为粒度】，和以【属性为粒度】。

1. 组件为粒度：把组件的所有样式封装在一个类名中，调用类名即可使用该组件。
2. 属性为粒度：需要属性的时候，调用对应类名拼装。

在我们日常项目中，以属性对类名进行划分比较少见，因为一直遵循的都是“结构、样式、行为”分离的原则，力求降低三者的耦合度。

然而以这种方式划分在一些特定情况下也不是完全不可取。

例如对于一些元素的隐藏，如果没提供相关的类名的话，在js开发阶段开发就会直接内联 style 在对应的元素上（这将会触发 repaint/reflow），所以更好的方式是和js开发约定一个类名触发显示/隐藏的动作，在这种情况下，给 display: none 划分一个特定的类名，供给开发调用就会显得很实用了。

所以，更重要的是我们对所在的实际情况进行分析，并给出最佳的解决方案。