前端进阶(12) - css 的弱化与 js 的强化
css 的弱化与 js 的强化
web
的三要素 html, css, js
在前端组件化的过程中,比如 react、vue 等组件化框架的运用,使 html 的弱化与 js 的强化
成为了一种趋势,而在这个过程中,其实还有另一种趋势也在慢慢形成:css 的弱化与 js 的强化
。
之前有写过一篇 CSS 模块化,但对 css in js
这种理念没有过多讲解,所以这次深入一下。
css in js
理念,即是摒弃原有的用 .css
文件书写样式,而把样式写进 js
里面,这样就可以做到一个组件对应一个文件、一个文件便是一个组件。
1. 支持的第三方库
- styled-components: 仅支持
react
- radium: 仅支持
react
- emotion
- aphrodite
- polished
- jss
- glamorous: 仅支持
react
- styled-jsx: 仅支持
react
- glamor: 仅支持
react
- styletron: 仅支持
react
更多第三方库可以参考 css-in-js。
2. 书写方式
一般 css in js
的写法有两种:
- 使用
es6
的模板字符串 - 使用 js 对象
{}
2.1 使用 es6
的模板字符串
styled-components、emotion、styled-jsx 都是采用的这种写法。
比如 styled-components
:
import React from 'react';
import styled from 'styled-components';
// 创建一个使用 <h1> 标签的 <Title> React 组件
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// 创建一个使用 <section> 标签的 <Wrapper> React 组件
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
// 就像正常的 React 组件一样,只不过他们都自带样式
<Wrapper>
<Title>Hello World, this is my first styled component!</Title>
</Wrapper>
比如 emotion
:
import { css } from 'emotion';
const app = document.getElementById('root');
const myStyle = css`
color: rebeccapurple;
`;
app.classList.add(myStyle);
这种写法的好处是,通过编辑器插件和 lint 插件(如 stylelint),就像写正常的 css 一样,有自动完成提示、错误提示、lint 自动矫正等功能。
2.2 使用 js 对象 {}
radium、aphrodite、polished、jss、glamorous、glamor、styletron 都是采用的这种写法。
比如 radium
:
import Radium from 'radium';
import React from 'react';
import color from 'color';
var styles = {
base: {
color: '#fff',
':hover': {
background: color('#0074d9').lighten(0.2).hexString()
}
},
primary: {
background: '#0074D9'
},
warning: {
background: '#FF4136'
}
};
class Button extends React.Component {
render() {
return (
<button
style={[styles.base, styles[this.props.kind]]}>
{this.props.children}
</button>
);
}
}
Button = Radium(Button);
<Button kind="primary">Primary</Button>
<Button kind="warning">Warning</Button>
比如 aphrodite
:
import React, { Component } from 'react';
import { StyleSheet, css } from 'aphrodite';
const styles = StyleSheet.create({
red: {
backgroundColor: 'red'
},
blue: {
backgroundColor: 'blue'
},
hover: {
':hover': {
backgroundColor: 'red'
}
},
small: {
'@media (max-width: 600px)': {
backgroundColor: 'red',
}
}
});
class App extends Component {
render() {
return <div>
<span className={css(styles.red)}>
This is red.
</span>
<span className={css(styles.hover)}>
This turns red on hover.
</span>
<span className={css(styles.small)}>
This turns red when the browser is less than 600px width.
</span>
<span className={css(styles.red, styles.blue)}>
This is blue.
</span>
<span className={css(styles.blue, styles.small)}>
This is blue and turns red when the browser is less than 600px width.
</span>
</div>;
}
}
这种写法的好处是,不需要 es6
的语法,对属性可以更方便的操作。
3. 决定是否使用
如果你是喜欢把样式和组件分开书写,那么这种方式就可能不太适合你;如果你追求一个组件对应一个文件、一个文件便是一个组件,那就立马用上吧。
4. 后续
更多博客,查看 https://github.com/senntyou/blogs
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
本文转载于:前端进阶(12) - css 的弱化与 js 的强化
前端进阶(12) - css 的弱化与 js 的强化的更多相关文章
- css 的弱化与 js 的强化(转)
web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势,而在这个过程中,其实还有另一种趋 ...
- 前端进阶试题css(来自js高级前端开发---豪情)既然被发现了HOHO,那我就置顶了嘿嘿!觉得自己技术OK的可以把这套题目做完哦,然后加入高级前端的社区咯
http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...
- 3. web前端开发分享-css,js提高篇
一. css基础知识掌握之后(个人的标准是:弄清块元素与内联元素的区别,弄清float的应用场景,弄清position[pə'zɪʃən] 下五个属性static['stætɪk],relative[ ...
- web前端开发分享-css,js提高篇
一. css基础知识掌握之后(个人的标准是:弄清块元素与内联元素的区别,弄清float的应用场景,弄清position[pə'zɪʃən] 下五个属性static['stætɪk],relative[ ...
- 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题(二)-callback,promise,generator,async-await JS的进阶技巧 前端面试送命题(一)-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制
[原创]分布式之数据库和缓存双写一致性方案解析(三) 正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- 前端三件套 HTML+CSS+JS基础知识内容笔记
HTML基础 目录 HTML基础 HTML5标签 doctype 标签 html标签 head标签 meta标签 title标签 body标签 文本和超链接标签 标题标签 段落标签 换行标签 水平标签 ...
- 前端性能优化 css和js的加载与执行
一个网站在浏览器端是如何进行渲染的? html本身首先会被渲染成 DOM 树,实际上 html 是最先通过网址请求过来的,请求过来之后,html 本身会由一个字节流转化成一个字符流,浏览器端拿的就是字 ...
- gulp构建前端,压缩css,js文件,实现浏览器自动刷新
一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 ...
随机推荐
- Arava: 写一个控制台风格的Mp3播放器
Mp3播放器 来写一个控制台版的mp3播放器.以前很喜欢 cmd.fm 这种控制台风格的播放器. 播放mp3使用 mp3spi 库:下载mp3spi库文件,解压,拿出根目录下的 mp3spi1.9.5 ...
- 哈工大 计算机网络 实验四 利用 Wireshark 进行协议分析
计算机网络实验代码与文件可见github:计算机网络实验整理 实验名称 利用 Wireshark 进行协议分析 实验目的: 本次实验的主要目的. 熟悉并掌握Wireshark的基本操作,了解网络协议实 ...
- XML序列化反序列化
using System; using System.Collections.Generic; using System.IO; using System.Xml.Serialization; nam ...
- 【NumPy】 之常见运算(np.around、np.floor、np.ceil、np.where)(转)
原博客链接:https://blog.csdn.net/tz_zs/article/details/80775256 np.around: 四舍五入取整 n = np.array([-0.746, 4 ...
- 面向对象编程(C++篇2)——构造
目录 1. 引述 2. 详述 2.1. 数据类型初始化 2.2. 类初始化 1. 引述 在C++中,学习类的第一课往往就是构造函数.根据构造函数的定义,构造函数式是用于初始化类对象的数据成员的.无论何 ...
- 借助DBHelper实现学生管理案例分析
一.案例功能的实现 数据: --专业 create table ProfessionInfo ( ProfessionID int primary key identity(1,1), --专业编号 ...
- tp5 (自写) 实现redis消息队列 + 排行榜
1:小皮开启redis, 控制器按Ctrl 点击new Redis 进入 redis.php 进行封装 //向队列添加数据 // LPUSH key value1 [value2] //将一个或多个值 ...
- tensorflow源码解析之distributed_runtime
本篇主要介绍TF的分布式运行时的基本概念.为了对TF的分布式运行机制有一个大致的了解,我们先结合/tensorflow/core/protobuf中的文件给出对TF分布式集群的初步理解,然后介绍/te ...
- java控制流学习
java流程控制学习 Scanner对象 概念 1.通过Scanner类实现程序和人的交互,通过它获取到用户的输入.java.util.Scanner是java5的特征. 我们可以通过Scanner类 ...
- C++高并发场景下读多写少的优化方案
概述 一谈到高并发的优化方案,往往能想到模块水平拆分.数据库读写分离.分库分表,加缓存.加mq等,这些都是从系统架构上解决.单模块作为系统的组成单元,其性能好坏也能很大的影响整体性能,本文从单模块下读 ...