emotion 排名第二的维护者 Sam 所在公司弃用了 css-in-js 方案，引起了不小的讨论：Why We're Breaking Up with CSS-in-JS
CSS-in-JS是一种技术（technique），而不是一个具体的库实现（library）。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些 .css， .scss或者 less之类的文件，这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。值得一提的是，虽然CSS-in-JS不是一种很新的技术，可是它在国内普及度好像并不是很高，它当初的出现是因为一些 component-based的Web框架（例如React，Vue和Angular）的逐渐流行，使得开发者也想将组件的CSS样式也一块封装到组件中去以解决原生CSS写法的一系列问题。还有就是CSS-in-JS在React社区的热度是最高的，这是因为React本身不会管用户怎么去为组件定义样式的问题，而Vue和Angular都有属于框架自己的一套定义样式的方案。
在之前篇章里面主要是对js的打包应用和处理，而打包方面另外一个重要工作就是样式处理。
继 精读《请停止 css-in-js 的行为》 这篇文章之后，我们又读了一篇抵制 css-in-js 的文章，虽然大部分观点都有道理，但部分存在可商榷之处，让我们分析一下这篇文章，了解 css 还做了哪些努力，以及 css-in-js 会如何发展。
大家好，我 ssh。在过去的开发中，我一直在用 styled-component 库作为 CSS 的解决方案。它有很多优点，灵活、可复用性强、功能强大、可以接受动态 JS 变量传入组件等等…… 但今天我看到一篇文章，说都是 Spot 团队的人已经决定抛弃 CSS-in-JS 的方案了，因为对他们来说，性能损耗已经远远超过其灵活性的优势了。接下来，我来和大家分享一下这篇Why We're Breaking Up with CSS-in-JS
本文是由 Emotion 的第二大活跃维护者 Sam 分享，本文第一人称都指的是 Sam。Emotion 是一个广泛流行的 CSS-in-JS 库，用于React。文文章 Sam 会带大家深入探讨 CSS-in-JS 最初吸引人的原因，以及为什么作者（以及Spot团队的其他成员）决定放弃它。
随着 React 项目日益复杂化、繁重化，React 中 css 面临很多问题，比如样式类名全局污染、命名混乱、样式覆盖等。这时， css 模块化就显得格外重要。
1、CSS和JS在网页中的放置顺序是怎样的？ （1）CSS 对于谷歌浏览器和Safari放在head里或body里都一样。因为它是在全部的样式表完全加载下来之后才开始渲染页面，将内容呈现在页面上。 对于Firefox，head标签中的<link rel="stylesheet">行为与Chrome/Safari中完全一致，这些link标签全部加载完成之前，页面上不显示内容。而body标签中的<link rel="stylesheet">则不阻塞任何内容显示，会出现FOUC无样式内容闪烁。 对于IE/Edge
近日，Meta开源了一款「CSS-in-JS库」 —— StyleX。看命名方式，Style - X是不是有点像JS - X，他们有关系么？当然有。
几年前，如果有人提到用 JavaScript 编写 HTML 作为构建大型网站的一种方式，很多开发者会当这作不可理喻的想法，但是现在，使用 React、Vue 和 Angular 框架为组件开发的应用正在慢慢替代传统的 Web 开发。
什么是css模块化？ 为了理解css模块化思想，我们首先了解下，什么是模块化，在百度百科上的解释是，在系统的结构中，模块是可组合、分解和更换的单元。模块化是一种处理复杂系统分解成为更好的可管理模块的方式。它可以通过在不同组件设定不同的功能，把一个问题分解成多个小的独立、互相作用的组件，来处理复杂、大型的软件。看完模块化，是不是有种拼图的即视感，可以把大图分成各个小图，然后把小图拼成大图，分与合的艺术感。那么css模块化思想，也就是在css编写环境中，用上模块化的思想，把一个大的项目，分解成独立的组件，不同的
CSS 是前端开发的重要组成部分，但是它并不完美，本文主要探讨 React 样式管理方面的一些解决方案，目的是实现样式的高度可定制化, 让大型项目的样式代码更容易维护.
Sam Magura 是 Spot 的软件工程师，也是活跃的 Emotion 库维护者。最近，他详细解释了 Spot 公司为什么放弃运行时 CSS-in-JS 库 Emotion，而选择了 Sass 模块——运行时开销、负载开销和服务器端渲染问题导致了较差的用户体验。
原生 canvas 提供了 save() 和 restore() 两个方法去管理画布状态。p5.js 作为一个 canvas 库，也理所当然的提供了状态管理的方法。在 p5.js 里这两个方法叫 push() 和 pop()。
在现代web开发中，CSS框架和JavaScript (JS) 是两个常用的工具。CSS框架通过提供一系列样式和布局选项，可以帮助我们快速构建美观的网页。而JS则提供了一套功能强大的脚本语言，可以为网页添加交互和动态效果。本文将深入探讨CSS框架和JS之间的关系，并通过具体代码示例来说明它们如何相互配合。
一直都用博客园写博客，后面自己曾经想自己写一个博客项目，但是因为各种各样的事情最后做了一半就没能继续做下去。但是中间定制markdawn样式的时候接触到的代码高亮插件highlight.js倒是给我留下了很深的影响，今天有时间于是决定利用当初的经验重新diy一下博客园的代码块样式，算是对夭折的博客项目的一个弥补吧。
``` ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ······················· 我们自己的CSS文件 ├─ /font/ ······················ 使用到的字体文件 ├─ /img/ ······················· 使用到的图片文件 ├─ /js/ ························ 自己写的JS脚步 ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】 ├─ /favicon.ico ················ 站点图标 └─ /index.html ················· 入口文件
Bootstrap简介什么是Bootstrap？框架：库 lib libraryjQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件 这就是一个框架Bootstrap 让我们的 Web 开发更简单，更快捷；注意是 Bootstrap 不是 BootStrap！这是一个词，不是合成词，其含义为：n. 引导指令,引导程序Bootstrap 是当下最流行的前端框架（界面工具集）；特点就是灵活简洁，代码优雅，美观大方；其目的是为了让 Web 开发更敏捷；是 Twitt
WordPress 引入css/js 是我们制作主题时首先面对的一个难点，任何一款主题都要加载自己的 css,js,甚至很有可能还需要加载 Jquery 文件,网上方法特多，说法不一，我们今天借鉴 wordpress 官方最新的 twentysixteen 主题来学习总结一下 WordPress 引入 css/js 各种常用方法，以及最优化的加载方法。
下图是程序目录，每一个我都给大家标注出来了，大家前期不用死记硬背，后面开发学习过程中，用的多了， 自然就记住目录下每个文件的作用了。
简介 CSS-in-JS是什么，看到这个词就能大概猜到是在JavaScript里写CSS，那为什么要在JavaScript里写CSS呢，像之前一样写在css文件里哪里不好么？ （图片来自：http:/
qiankun 是主流的微前端方案，其他的还有京东的 micro-app、腾讯的 wujie 等。
WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的
Web开发是需要掌握多种技术。我们习惯于与多种语言密切合作。而且，随着开发Web应用程序变得越来越普遍和差别细微化，我们经常寻找创造性的方法来弥合这些语言之间的差距，从而使我们的开发环境和工作流程更容易，更高效。
1、为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，也为了更好阅读、修改和提高对CSS的加载速度，CSS的编写应该遵循一定的编写规范。目前网上已经流行一些比较好的规范，大多由网友总结；大公司的CSS规范也值得我们去参考。但由于无法获取到大公司的内部资料，只能参考部分网上一些比较好的资料来制作一套自己的规范。
为了解决传统CSS在现代前端应用开发中遇到的痛点，FreeWheel评估了大量新一代的CSS框架/工具/方案。在本文中，作者以评估过程为线索，介绍了CSS-in-JS的背景、现状、开发特点和趋势。
styled-components 利用 ES6 的 tagged template 语法创建 react 纯样式组件。消除了人肉在 dom 和 css 之间做映射和切换的痛苦，并且有大部分编辑器插件的大力支持（语法高亮等）。此外，styled-components 在 ReactNaive 中尤其适用。
是滴，随着 webpack 的兴起，css 也可以进行 Tree Shaking： 以去除项目代码中用不到的 CSS 样式，仅保留被使用的样式代码。
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（三）认识项目所有文件 在《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版
因为才刚开始学js，所以很多话不敢说的太绝对，就加上了“基本，大概，可能”这样的形容词。
这是webpack实战系列笔记的第4篇记录，简单描述一个思想：模块化思想——一切皆模块。本系列前几篇：
经常上 V2EX 的人应该知道，前一段时间该论坛上线了暗色主题切换功能，当天就获得一致好评。也就是在当天，我给自己的博客 github 上面提交了一个 issue，也就是需要给博客添加一套暗色主题并支持主题切换。但是人都是有拖延症的，这一拖，两个月就过去了，我的主题切换功能才终于上线了。
hexo默认的代码高亮样式有时候不够好看，而highlightjs可以自己引用很多好看的样式，比如vs样式。但是它却不支持行号，因此有了这篇修改教程。
主要的实现原理是，2套css样式，2套js文件，如果需要切换图片的情况也需要2套图片，页面上有个切换按钮，点击的时候切换css样式和js文件，以及切换图片，css文件切换时会立即起效，但是js没有效果，需要重新刷新下，采用的是点击按钮的时候直接reload,切换样式文件和js文件都在初始化时进行
通过 JS 来管理 CSS 就很好解决上述列举的问题。CSS 模块化的解决方案有很多，但主要有两类。
最近，我惊喜地发现了一个CSS媒体特性——scripting，它能够在所有现代浏览器中使用。这意味着，我们可以根据用户浏览器是否支持JavaScript来提供不同的CSS规则，从而减少未样式化内容的闪烁或不受欢迎的布局偏移。
CSS Modules CSS 模块化 不管是用jquery还是react开发，都会遇到的一系列 CSS 的问题： 全局污染 命名混乱 依赖引入复杂 无法共享变量 代码冗余 通过 JS 来管理 CSS
<meta name="viewport" content="width=device=width,initial-scale=1,user-scalable=0">
三年来，我设计的 Web 应用程序都没有使用 .css 文件。作为替代，我用 JavaScript 编写了所有的 CSS。
本教程针对零基础同学，讲解网站开发三个基础技术：HTML、CSS、JS，带你快速入门！
网页中，文档结构是由HTML定义的，文档外观是由css(样式文件)定义的。通常css样式可以写在外部单独的css文件中，然后通过<link>元素引入，也可以写在<head>标签的子节点<style>元素中，也可以直接写在DOM元素style属性里（内联样式）。
上文「前端工程四部曲」模块化的前世今生（上）中我们主要介绍了JS模块化相关的知识，对于JS模块化，相信很多人都不陌生，但说起CSS模块化，可能大家就没有这么清晰了。大部分人都会重点关注JS而忽略CSS，但CSS也是前端三剑客不可或缺的一部分，在编写CSS的时候，绝大多数人都是比较随意的，所以会经常造成一些开发痛点。接下来这篇文章我们就来简单聊一聊 CSS 模块化。
pace.js是一个非常赞的JavaScript插件，可以实时监听页面的数据加载，包括Ajax请求，显示页面加载进度，并且能够定制样式，类似浏览器加载进度条，比如Safari。
然后在css下需要建立三个样式，”index,common(公共),reset(重置)”新手比如我，需要这样写，但是熟练以后就不用了
最近手头的工作繁多，有研究性的项目和系统研发，正好遇到同事离职，接手了框架的UI组件，不仅需要维护和填坑，还需要开发新的功能组件。因为身在H5-Hybird的框架部门，最近团队开始尝试使用React-Native来做些东西。之前也有过开发iOS App的冲动，学了点Object-c,这次正好借此机会进入App开发，以弥补自己在Native-App上的经验不足。
上一章节讲述了使用 「插值表达式」、「v-text」、 「v-html」 的数据渲染功能。
首先我需要写一个例子，之前的例子被我玩坏了，再写一个完整的模板出来太耗费时间了，我直接写一个比较简单的页面，但是基本上网站都是这几块，我们先看一下运行的效果：
组件 框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。 什么是组件： 组件是视图层的基本组成单元。 组件自带一些功能与微信风格的样式。 一个组件通常包括开始标签和结束标签，属性来修饰这个组件，内容在两个标签之内。 <tagname property="value"> Content goes here ... </tagname> 官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 本期给大家带来的是7个微信
Firefox 和 Chrome 分别是当今世界最流行的浏览器之一，虽然这两款浏览器都有各自的优势，但随着时间的推移，Firefox 的受欢迎程度在逐渐下降，开始走下坡路。这无可厚非，并不是 Firefox 不行了，而是 Chrome 太强了，背靠 Google 顶级大厂，无缝整合 Google 服务，界面极度简洁，它就像一个十足精美的篮子，你往里面放的鸡蛋越多，它就越好用。
一个特别有趣的概念是在CSS中使用JS将CSS抽象到组件级别本身，使用JavaScript以声明性和可维护的方式描述样式。所以，我们已经列出了一些有用的项目来开始。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
