首页 >web前端 >html教程 >CSS哲学伪命题_html/css_WEB-ITnose

CSS哲学伪命题_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:25:571046浏览

标题党。这篇文章断断续续的修改过好几次,也没有满意,本来是想总结一下我这些零散的 CSS 知识结构,可能由于知识体系不全面,总是没能把知识点串联成一个通顺的内容。贴出来权当大家一起讨论下“前世今生”。文章后续可能会不定时更新。

CSS 作为 Web 的基础部分,极其容易上手。但是 CSS 并不算的上是一门编程语言,在语言能力上略显薄弱,往往导致整体的维护性变差。但是这并没有使得大家停止对 CSS 的探索,从命名规范,目录架构,预处理器(如 SASS),后处理器( PostCSS),模块化等等的方向上,努力把 CSS 变得更好。

关于自我历程

其实我自己并没有系统的学习过 CSS(虽然我现在也不知道如何系统的学习),看了几个视频,扫了下中文版的 API,然后就开始了切图生涯,很多的知识点也都是后来一些零散的博客中了解到的。这过程中,的的确确踩过不少的坑,有的填了,有的继续祸害着项目里其它的同学。也导致我在很长的时段时间里都是走在一个混乱无序的 CSS 书写当中。

最早遇到的大概的是命名的问题了吧,因为本身积累的词汇量就少,动不动就没单词可用了。那个时候好像也就是网上列出一大堆像 menu, siderbar之类的“命名大全”来模仿。再到后来接触到了 Bootstrap这种比较系统的框架(里面有好多可以值得借鉴的地方),而后又看到一些按类别划分文件,再配有特有的前缀的管理方式(那个时候还并不知道 SMACSS的名词),还有一些原子化,把功能和样式分离等等的。在 SASS兴起的时候其实挺兴奋的,因为终于感觉有了点编程的能力,当然了,对变量,嵌套, mixins等等的使用,很大程度上提高了编程效率。在后来同事的分享中,又了解了 BEM 的命名方式(初看很乱,了解后有一种豁然开然的感觉,细细回想起来,也就是大家约定一套共用的命名规范)。以及通过 PostCSS去实现 CSS 中一些自动处理的任务。在 React/ES6/Webpack 出现后,使得很大一部分程度上,CSS 写在 JS 中的方式也开始在特定的场合中频频出现。

以上,通通出现过我的项目中,在项目切换维护的时候,那感觉,心如刀割。并不是说上面涉及到的知识点有对错的问题,只是在一个团队中,如果没有一些统一的架构和约定,往往到项目的后期会变得越来越不稳定。这不禁又让我想起了 CSS 的学习曲线(像PHP?又来黑了),样式大家都能写,能愉快的维护,又是另一个层次了。

个人觉得 CSS 中有两个比较重要的点, 语义化可维护性,而最终都是为了提高开发的效率。

语义化很大一部分程度上是为了阅读需要,简易明了。建议团队内还是要尽量的保持风格一致。其它的,可以看一下 CSS语义思维的内容,这里不展开讲了。

可维护性真的是一个很虚的概念,但是涉及到了多方面的各个点。比如,该怎么保持项目的简单性,灵活性,而同时又有足够的扩展能力?又比如如何抽取模块,是以功能划分还是以样式结构?如何重用样式?如何防止样式被覆盖,避免冗余代码等等。

除了一次性的单页面这种外,一般项目类型的,都建议在开始的时候就搭好底层,统一一下整体风格与使用习惯,保持良好组织结构,命名规范,不然越往后面,可能会遇到更大的问题。

比如,对文件做一个层次划分

  • 基础框架(reset,iconfont,栅格)

  • 通用模块(原子,统一规范的模块)

  • 页面样式(继承通用模块)

采用类似 BEM/SUIT等等的命名方式等等。

现有的技术选择

其实我们在平时应该或多或少的接触过一些 SASS, Compass, BEM, SMACSS, OOCSS的概念与设计模式。当然并没有一种解决方案是绝对的,合适当前的项目就可以了。

BEM

用于解决项目命名规则问题。BEM 通过已 block(块), element(元素), modifier(修饰符)的概念,使用连接符串联父级块作为前缀,来实现功能模块命名的唯一性。有兴趣的同学可以看一下 BEM的进化史。发现一句话并不太好表述清楚,想要具体了解的同学可以移步 官网。

BEM这种唯一性以及元素间的平级展开,往往在稍微复杂一点的项目里,就会把名字命名的很长很长。目前也有很多是在 BEM的基础上衍生出来的一些方式(如 SUIT)。

OOCSS (Object Oriented CSS)

面向对象 CSS。是一种已面向对象的维护方式去管理组织 CSS 代码。其哲学理念是模块化,功能单一性,关注点分离。

OOCSS 中有两个重要的原则

  • 结构和外观分离。样式尽量独立,和 DOM 无关

  • 容器和内容分离。CSS 只关注内容

OOCSS与 SASS结合是一个不错的选择,充分强大。

SMACSS(Scalable and Modular Architecture for CSS)

可扩展和模块化 CSS。把 CSS 样式划分为若干个不同类别的文件,如基础,布局,模块,主题等等。在加上一些特有前缀的组合。

ACSS (Atomic CSS)

原子化 CSS。遵循关注点分离原则。

CSS 模块化

随着 React的迅速引爆,其它关于 CSS 的另一种使用方式也在兴起。将样式在 JS 中定义。借助 require/import而解决了 CSS 中的命名空间的问题,使得单文件变得简单清晰。而通过组合,也可以实现快速的重复利用。甚至有些 CSS 可以单独与组件去绑定。

以及其它的一些方式。上述的方式,是比较让我眼前一亮的感觉。

未来走向

待补充...

扩展阅读

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn