现代 CSS

PostCSS

PostCSS-modules: 让CSS变得更强大

多年来,我们一直与全局CSS作斗争。现在是时候结束它了。不管你使用哪种语言或框架,CSS命名的冲突不再是问题。我将向你展示如何使用PostCSSPostCSS-modules在服务端自动处理它。CSS最初只是用来美化文档的一种工具。自1996年以来,许多事情发生了变化。浏览器不再是文档查看器了。聊天、工作、游戏,几乎没有任何浏览器不能做到的。现在,我们比在HTML中标记文本和使用CSS开发内容的网站要多得多。我们使用CSS来充分发挥它的潜力,创造出它很难处理的东西。

PostCSS和一些有兴趣的东西

PostCSS是一个很有趣的项目。简而言之,它将CSS转换成抽象语法树(AST),也就是JavaScript可以操作的一种数据形式。基于JavaScript的PostCSS插件可以执行不同的代码操作。PostCSS本身并没有改变你的CSS,它请允许插件执行和转换你的代码。实际上,对于CSS的操作,PostCSS插件并没有任何限制。只要你有想得到的,你都可以写一个PostCSS插件来实现。

深入PostCSS Web设计

PostCSS是一种工具,一款已成长为像Sass和LESS一样主流的处理器,这一切都归功于它的强大、速度和易用性。《深入PostCSS Web设计》是使用PostCSS的完全指南,《深入PostCSS Web设计》将指导你如何编写优秀的样式,并将其运用到Web页面,同时让你的样式保持可维护性。这本《深入PostCSS Web设计》将向你展示如何利用PostCSS简化样式表的整个过程。它涵盖了给Web页面添加动态的、现代的样式特性的各种技术。随着内容的深入,你将学习如何使用PostCSS来让CSS更具模块化的特性、更易于维护。读完《深入PostCSS Web设计》,你将掌握如何给Web添加CSS样式表,以及如何创建高执行,可维护的样式表。

grid-kiss让网格制作变得更容易

去年在CSS Conf科普了一下《CSS Grid Layout》相关的概念。会后PostCSS的作者@Andrey Sitnik给我力荐grid-kiss这个PostCSS插件。说这个插件可以让CSS Grid变得更为简单。一直都想尝试一下,就是没动手,今天体验了一下,还是很有意思的。今天花点时间整理一下,跟大家一起分享。

【转载】让CSS更完美:PostCSS-modules

我们和全局作用域的CSS斗争了多年,现在终于是时候结束它了。不管你用的是什么语言还是框架,CSS命名冲突将不再是个问题。我将给你展示一下PostCSSPostCSS-modules如何使用,并且可以在服务端使用它们。 CSS起初只是一个美化文档的工具,但是事情到1996年发生了变化。浏览器中不再单单只有文档了,即时通讯,各种软件,游戏,没什么是浏览器不能承载的。

从Sass过渡到PostCSS

Sass多年来一直是我的首选。最近我有一段时间,想尝试使用PostCSS的cssnext插件来处理CSS样式。我一直想使用工具尝试写一些CSS的新特性。同时自己的个人网站也是一个最佳测试这些新特性的实验地。

PostCSS入门:Sass用户入门指南

你可能已经听说过PostCSS,它比libsass快了几乎两倍(并且比Ruby Sass快了28倍);或者听说过它支持cssnextCSS Modules而且可扩展功能,但你是否已经找机会尝试一下了?PostCSS最强大之处在于它是模块化并且基于插件的架构,不过这也是个缺点。如果你之前在项目中使用Sass(比如大多数的设计师和前端开发者),你从不需要配置任何东西——Sass内置了全部实用功能,开箱即用。然而,PostCSS需要你做一些配置。你不得不从一眼看不到底的插件列表选择插件并且自己把全部插件一起配置。

PostCSS深入学习: 简写和速写

到目前为止,我们已经使用 PostCSS 做了很多事情,比如,优化样式给预处理器增加功能生成某些符合规范的样式,但是它只有帮助写原始 CSS 的人吗?每个 Web 设计师在他们的职业生涯中都会写出有很多可复用的代码,如果你能用一点时间把每一个都收集起来到最后那将会变得很多。在本教程中,我们要使用 PostCSS 的一系列的简写和速写来减少每天的编代码的时间。 让我们开始吧!

PostCSS深入学习: 结合BEM和SUIT方法使用PostCSS

这篇教程我们将学习如何结合BEM和SUIT来使用PostCSS,让编写CSS样式更容易、更有效。这两个方法都是用来给类命名的,使用它更容易让你将风格紧密结合在一起,并且帮助其他开发人员从各种的类名就能识别出对应的样式风格。BEM是由@Yandex提出的一种类名命名方式。SUIT是基于BEM上的另一种类名命名方式,只不过@Nicholas Gallagher在BEM的基础上做了一些调整。BEM能做的事情,SUIT都可以做,但很多用户觉得SUIT是BEM的一种改进。

PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用

如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器。不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass、Stylus或LESS)结合起来使用。有几个PostCSS插件配合预处理器得到很好的赞誉,因为他们将功能添加到你的工作流中,让你工作变得更加轻松。如果你只使用一个预处理器,而不使用这些插件,你的工作流至少会变得更加困难。我们会涉及一些免费的PostCSS插件,然后我们将会介绍一些配置的阐述,告诉您如何将PostCSS和你喜欢的预处理器(Sass、Stylus或LESS)之一结合在一起使用。

页面

返回顶部