CSS 的进化: CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components
这里有各个方式的比较:styled-components/comparison
还有
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端
Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为
“SCSS”( 时髦的css(Sassy CSS)),它是css3语法的的拓展级,就是说每一个语法正确的CSS3文件也是合法的SCSS文件,SCSS文件使用.scss作为拓展名。第二种语法别成为缩进语法(或者 Sass),它受到了Haml的简洁精炼的启发,它是为了人们可以用和css相近的但是更精简的方式来书写css而诞生的。它没有括号,分号,它使用 行缩进 的方式来指定css 块,虽然sass不是最原始的语法,但是缩进语法将继续被支持,在缩进语法的文件以 .sass 为拓展名。
Compass is an open-source CSS Authoring Framework.
看下自己的项目现在进化到那个阶段,阶段本身无优劣之分,不是说你用技术新,你就很厉害,不是你厉害,是人家发明这个东西的人厉害。
CSS Modules
http://www.ruanyifeng.com/blog/2016/06/css_modules.html
1,局部作用域
2,全局作用域
3,组合
4,模块引入
.className {
background-color: blue;
}
.title {
composes: className;
color: red;
}
##another.css
.className {
background-color: blue;
}
##App.css
###demos/blob/master/demo05/components/App.css可以继承another.css里面的规则。
.title {
composes: className from './another.css';
color: red;
}
styled Componets的demo
https://github.com/styled-components/styled-components
import React from 'react';
import styled from 'styled-components';
// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
// Use them like any other React component – except they're styled!
<Wrapper>
<Title>Hello World, this is my first styled component!</Title>
</Wrapper>