写CSS的姿势

前两天去帝都参加第三届FEDay前端开发者大会,见了很多老朋友,也认识了很多新朋友。最主要的是听了很多大神的分享,涨了不少的姿势。想写这篇文章的出发点是PostCSS作者@Andrey Sitnik分享完之后有些同学提问,让我有感而发。希望这篇文章对一些同学有所帮助。

写CSS的姿势

对于前端而言,会写CSS并不难,因为这是基础之一,但能写好CSS那就不一定了。在整个社区也经常会碰到类似这些问题:

  • 怎么写CSS
  • 如何组织管理和维护CSS
  • CSS处理器是不是只能在大型项目中使用
  • 需不需要从Sass(或者其他的处理器,比如LESS之类)转到PostCSS

其实从这些问题中,我们就能简单的总结出写CSS的姿势无外呼有:

  • 直接写CSS,不采用任何的CSS处理器
  • 通过CSS处理器写,然后在编译出CSS
  • 直接写CSS,通过PostCSS再处理
  • 通过处理器编译出CSS,再使用PostCSS二次加工
  • CSS in JavaScript

那么在这些过程或姿势当中,有不少同学存在一定的困惑。接下来简单的聊聊我自己的一些看法和认识。

直接写CSS

很多初学者或者刚接触Web开发的同学一般都会采用直接写CSS,来给需要的Web页面添加样式。这种方式简单,无需了解CSS的处理器一些语法。简而言之,你只要懂CSS的语法、属性,你就能写出CSS。只不过写得好与不好之分,好不好管理和维护之分,特别是一些大型的项目。

当然,有些同学具有一定的基础之后,具有一定的实战经验之后常常会有新的困惑出来:

  • 怎么更好的管理和维护CSS
  • CSS的管理方法对于小型项目实用吗

其实看上去是两个命题,但我个人觉得是一个命题,那就是:怎么能更好的管理和维护CSS?针对这个问题,经过这么多年的发展和进化,业内同行朋友也提出和总结出一些管理CSS的方法。比如@INESSA BROWN 前段时间整理的《Methods to Organize CSS》一文中就提到了几个优秀的方案。比如说:

OOCSS

写CSS的姿势

OOCSS提倡内容和容器分开;设计和结构分开。这也是社区之内提出较早的一种编写、维护和管理CSS的方案.

SMACSS

写CSS的姿势

Atomic Design

写CSS的姿势

除了前面提到的,还有其他的类似方法,比如BEMSUITCSSMCSSAMCSS等。

看到上面这些列出来的方法,可能你已经有点放弃治疗或者说吃药了,甚至有点自生自灭的想法。其实不管上面哪一种方法,他们都是围绕CSS编写中最蛋疼的三个地方做的处理:

虽然上面的CSS方法论能解决我们CSS很多问题,但面对这些层出不穷的CSS方法论(或许后面还会有新的方法论出来),我又应该怎么根据自己的需求来选择自己需要的方法论呢?特别是一些初级的CSS同学经常会这样问。

@simurai曾经总结过一些选择方法,但原文地址已经404了。大致摘取下来的内容是这样的:

Q: 我只需要创建一个单页面或简单的站点。内容以文本为主。没有人和我协作,就我自己。

A:简单就好。直接给 HTML 元素添加样式,连 class 都不需要。依赖级联关系,利用样式继承。随着站点增长,可能需要开始看看 OOCSS,或不时使用一些工具类。

Q:我们是一个中型团队。项目复杂度增长较快,采用多人协作。

A:使用 BEMSUITSMACSSITCSSEnduring CSS 等。它们各不相同,但也有相似点,在某些方面亦有重叠之处。它们所使用的命名约定,能保证你们之间不会发生冲突。和团队一起讨论下,在作出最终决定前,可能需要多进行一些尝试。

Q: 我们是有多个团队的大公司,产品庞大而复杂。跟踪变化相当困难。代码库不断变化,而我们又不想顾此失彼。 A: 使用 JSXJSS,或其他类似的 CSS-in-JS 库。将 CSS 与 HTML/JS 绑在一起,更容易修改、移动或删除组件,而又不影响其他部分。还可以看看 ACSS 这样的 Atomic CSS,这是另一种解决相同问题

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-evolution.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部