CSS 的进化

作者: 技术与健康 | 来源:发表于2018-04-19 21:33 被阅读18次

CSS 的进化
CSS3
css学习第一天
CSS3学习总结一
CSS3常用新特性
CSS进化之路
用CSS实现圆角框
CSS3初识
方应杭live总结
使用纯 CSS 实现 500px 照片列表布局

CSS 的进化： CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components

还有

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>