现代 CSS

转载

更合理的 setState

React 是我做前端以来接触到的第三个框架(前两个分别是 Angular 和 Vue),无论是从开发体验上和效率上,这都是一门非常优秀的框架,非常值得学习。借助于 Redux,我们可以轻松的对 React 中的状态进行管理和维护,同时,React 也为我们提供了组件内的状态管理的方案,也就是 setState()。本文不会涉及到 Redux,我们将从 Component 的角度来说明你不知道的以及更合理的 setState()

编写模块化的CSS:CSS文件组织结构

在之前两篇文章中我们已经讨论过如何使用BEM和Namespace来编写模块化的CSS。这篇文章中,我想避开把CSS选择器作为CSS文件结构和组织的依据的方法。如果你思考过关于什么是文件组织的最佳实践,或者怎样能够在项目目录中更容易的找到你要找的CSS文件,或者一个文件应该是多大或者多小合理等问题,那么这篇文章就是为你写的。让我们先看下你一般组织资源的两种方法。

编写模块化的CSS:命名空间

上周,我分享了如何使用BEM创建一个合理的CSS架构。 虽然BEM很棒,但它只是解决方案的一部分。 还有另一部分我还没有提到 —— 命名空间。在今天的这篇文章中,我想与大家分享一下为什么只用BEM还是不够的,以及如何使用命名空间来弥补一些不足。

编写模块化CSS:BEM

你是否做过多页面的大型网站或者其中一部分?如果你做过,你可能会意识到 CSS 架构不够强大所带来的恐惧。你可能还会研究如何编写可维护的 CSS。由于我们的行业很棒,我们有很多推荐的解决方案。因为专家们的纷纷加入,于是我们有 BEM,OOCSS,SMACSS,Atomic Design 等许多选择。现在,问题不是痛苦 “我不知道该怎么办”,而是: “有这么多的方法,我应该尝试哪个?”我是不是应该把所有的都用一遍,是不是只有一种方法才适合我,或者我是不是应该参考它们做一个自己的架构?。我开始只用一种方法。然后,当我尝试不同的方法时,我开始把我认为有意义的东西包含在我的探索过程中。 在这篇文章中,我想和大家分享一下我如何构建 CSS 以及为什么我这样做。 希望它可以帮助你找到你喜欢的方法。

Webpack入门 以及 CSS模块化

这是讲CSS模块化系列文章的最后一篇,我将探索如何通过Webpack来建一个静态的React网站。这个静态网站将包含模板:一个主页和一个包含几个React组件的页面。我们来看看他们是怎么运作的。之前的文章中我们用Webpack快速搭建了一个工程来展示了所有依赖是如何被导入到一个文件的以及在打包过程中如何将一个唯一的classname同时在csshtml中生成the basics of React。在之前的演示中,我们知道通过js来渲染我们标签,但是我们不清楚如何构建我们项目。在这篇文章中我们将用一个更真实的例子演示如何通过我们新学的Webpack知识来构建我们的项目。我把之前演示的代码放到Github上了 css-modules-react ,你可以通过这个代码开始下面的例子。

开始CSS模块

这里不止一种方法来让CSS模块与JavaScript模板、CSS文件或者构建步骤运行起来。这篇文章作为CSS模块系列文章的一部分,我们学习一种方法。本文的目的就是开始一个CSS模块项目并且运行起来。在这个项目中,要求CSS决不能依赖客户端JavaScript运行,所以构建步骤需要在部署之前将所有东西处理成可运行的HTML和CSS。我们将使用Webpack,一款构建系统和模块打包工具。在下一篇文章中我们将集中使代码处于一个渲染静态HTML的浏览器的真实的项目中。

什么是CSS模块以及你为什么需要它们?

我最近对CSS模块很好奇。如果你还没有听说过它们,这篇文章就是为你而写。我们将了解CSS模块以及它的目的是什么。如果你也感兴趣,请持续跟踪,下一篇文章将关于怎样使用CSS模块。如果你想进一步提高你的CSS模块使用技能,第三部分将关于在React环境中使用它们。

理解CSS模块化

在瞬息万变的前端开发世界中,很难找到一个真正有意义的概念,并且将其清晰明了的向广大人民群众普及。把目光投向CSS,一个重大转折就是CSS预处理器的出现(在工具方面来看),其中, Sass应该是最为著名的一个。此外,还有 PostCSS,它和Sass略有不同,但是殊途同归——都是用浏览器不能解析的语法编写,并且最终编译成浏览器能够理解的语法。现在,又有一位新的成员出现了,它就是CSS模块。本文就将介绍CSS模块化的诸多优点,以及如何编写模块化的CSS。

JavaScript 核心概念之作用域和闭包

相信大家已经阅读了很多关于作用域和闭包文章,我也一样。作用域和闭包是 JavaScript 中的关键概念之一。当我阅读了《高性能的JavaScript》这本书后,我才完全理解这两个概念。所以今天强烈推荐这本书中的解释,并与其他开发人员分享。

深入了解一个超快的 CSS 引擎: Quantum CSS (也称 Stylo)

或许你听说过 Quantum 项目。 它是对于 Firefox 内部的一个重大改写,以达到让 Firefox 更快运行的目的。我们将实验性的浏览器 Servo 的一部分功能调换出来,并对引擎的其他部分做除了重大的改进。这个项目好比一架正在飞行的飞机的引擎。我们对适当的地方进行改进,一个一个组件地改进, 当着这些组件准备好的时候,你就能够看到它对 Firefox 的影响。

页面

返回顶部