写CSS的姿势

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

前两天去帝都参加第三届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很多问题,但面对这些层出不

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

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

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

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