css還可以這么寫?
2018-09-19 來源：IT運維網(wǎng)
作為一個前端，毫無疑問css肯定是最基礎(chǔ)的一項技能之一。css是一個標(biāo)記語言，沒有編程語言的諸多特性，比如變量定義，復(fù)用，嵌套等，所以相應(yīng)的開發(fā)效率也受到限制。 在追求效率和自動化的當(dāng)下，涌現(xiàn)了一批解決方案，像是css預(yù)編譯語言Less, Sass等，解決css命名沖突的css-modules，react中css的最佳實踐styled-components等。
本篇文章不在于探討css的技巧學(xué)習(xí)，而在于討論css的這些提升開發(fā)效率的方案。
Less
Less, Sass, Stylus等 css預(yù)編譯語言，給css賦予了編程特性。拿 Less 來說，它擴展了 CSS 語言，增加了變量、Extend、Mixin、函數(shù)等特性，也支持import導(dǎo)入文件，使 CSS 更易維護(hù)和擴展。本篇簡單介紹一下Less的一些特性，詳細(xì)的教程可以上Less官網(wǎng)查看。
怎么樣使用Less?
我們可以在 命令行 直接使用less，也可以通過 node api 去使用less，或者通過 webpack，gulp，grunt等的 less插件 去使用，甚至可以在瀏覽器端使用，非常靈活。這里簡單說一下在命令行中使用less。
$ npm i less -g# 當(dāng)less被安裝之后，就可以使用全局命令lessc
$ lessc bootstrap.less bootstrap.css
一、變量
變量使css代碼更易維護(hù)。
比如有個主色 #ef8376，在整個樣式表中，我們有多處使用這個顏色。如果主色變動的話，比如主色要變成 #000，我們就要手動去全局替換這個變量，而有一些 #ef8376我們卻不希望替換掉，這樣就造成了極大的困擾。
如果我們使用less的話，就可以這么寫：
@primaryColor: #ef8376;
.banner {
background-color: @primaryColor;
.text {
color: @primaryColor;
border-color: #ef8376;
}}
我們要修改主色，只需要將 @primaryColor 修改為 '#000'即可。
二、Extend
Extend讓我們可以用偽類的寫法去合并一些類。
比如：
nav ul {
&:extend(.inline);
background: blue;}.inline {
color: red;}
會編譯成：
nav ul {
background: blue;}.inline,nav ul {
color: red;}
三、Mixin
Mixin既有Extend繼承已有類的特性，也有其他高級的特性，比如支持變量，支持像使用方法一樣使用mixin
支持變量
.foo (@bg, @color: '#000') {
background: @bg;
color: @color;}.unimportant {
.foo(#f5f5f5);}.important {
.foo(#121212) !important;}
會編譯成：
.unimportant {
background: #f5f5f5;
color: #000;}.important {
background: #121212 !important;
color: #000 !important;}
像方法一樣使用Mixin
.count(@x, @y) {
@margin: ((@x + @y) / 2);
@padding: ((@x + @y) / 4)}
p {
margin: .count(16px, 16px)[@margin];
padding: .count(16px, 16px)[@padding];}
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // next iteration
width: (10px * @counter); // code for each iteration}
.text {
.loop(5); // launch the loop}
會編譯成:
p {
margin: 16px;
padding: 8px;}
.text {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;}
四、Import導(dǎo)入文件
// head.less.banner {
background-color: red;}// footer.css.footer {
background-color: green;}@import './head.less';@import css './footer.css';
會編譯成：
.banner {
background-color: red;}.footer {
background-color: green;}
五、方法
Less支持一些常用的輔助方法
比如darken和lighten用來加深或淡化顏色。
body {
background-color: darken(hsl(90, 80%, 50%), 20%);
color: lighten(hsl(90, 80%, 50%), 20%);}
會編譯成：
body {
background-color: #4d8a0f;
color: #b3f075;}
css-modules
css-modules 相較于 Less 來說有所不同，css-modules 只是拓展了 css 的寫法，解決了css的塊作用域和全局作用域，而不是將css變成一門編程語言。
為什么需要 css-modules？
Css一直以來都有一個問題，就是css定義的類都是全局的，我們雖然可以通過不同的命名空間或是加前綴的方式去避免類的混淆和沖突，但是在寫法上卻不是那么的干凈利落，而且一旦重構(gòu)css的話，也會造成很大的困擾。
為了讓我們能隨意的寫類名而不需要考慮沖突或是覆蓋，css-modules 便出現(xiàn)了。
css-modules提供了 塊作用域 :local 和 全局作用域 :global，這兩個特性就能很好的避免css的命名沖突。
怎么使用？
首先來說一下怎么使用 css-modules。
當(dāng)我們在使用webpack的時候，最簡單的用法是通過 css-loader 來開啟對 css-modules 的支持。如下：
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
modules: true, // 開啟對css-modules的支持
localIdentName: '[name]__[local]___[hash:base64:5]' // 生成的類名的格式
}
}
]}
同時可以配合less-loader 和 postcss使用。注意：在結(jié)合less-loader的時候可能出現(xiàn)對url的兼容問題。見：https://github.com/webpack-contrib/less-loader/issues/109#issuecomment-253797335 。而且 less-loader 的維護(hù)者認(rèn)為結(jié)合 less-loader 和 css-modules沒什么必要。。
css-loader - webpack開啟css modules
postcss-modules - postcss的 css-modules 插件
一、作用域
css-modules提供了兩個關(guān)鍵字，:local 和 :global。
比如這種寫法：
// App.css:local(.banner) {
background: red;}:local(.banner .text) {
color: yellow;}.center {
color: green;}:global(.global-class-name) {
color: blue;}
會編譯成：
.App__banner___3NbRo {
background: red;}.App__banner___3NbRo .App__text___2j1Ht {
color: yellow;}.App__center___3eDJo {
background: green;}.global-class-name {
color: blue;}
:global 聲明的類不會被編譯，會保持不變。
同時，我們在js中引入css，寫法如下：
/** * styles是什么呢？styles其實是一個經(jīng)過處理過的類名的集合。 * * 比如上邊這個css文件，處理后的style對象是這樣的： * * { * banner: 'App__banner___3NbRo', * text: 'App__banner___3NbRo App__text___2j1Ht', * center: 'App__center___3eDJo' * } * * 這樣我們就可以理解為什么css-modules可以避免明明沖突了。 * 命名都按照我們設(shè)置的hash規(guī)則重寫了,保證了類名的唯一，并且在生成的html結(jié)構(gòu)里也進(jìn)行了替換，還何來沖突？ */import styles from './App.css';import React from 'react';
const html = () => {
return <p class={styles.banner}>
<span class={style.text}>HAHAHAHHAHAHA</span>
</p>;};
export default html;
二、Composition - 混合組成
css-modules支持多個類的混合組成。比如：
.colorRed {
color: red}
.text {
composes: colorRed;
background: #000;}
會編譯成：
.App__colorRed___yoG_f {
color: red}
.App__text___2j1Ht {
background: #000;}
可以看到，生成的css中并沒有任何的變化，那這個composes做了什么呢？其實在通過js引用的對象內(nèi)發(fā)生了變化。如下：
{
"colorRed": "App__colorRed___yoG_f",
"text": "App__text___2j1Ht App__colorRed___yoG_f"}
那么在通過 styles.text 使用 text 類的時候，其實也同時使用了 colorRed 類，達(dá)到了混合組成的效果。
三、Import - 引用
css-modules 支持引用其他文件的類。
比如：
// green.css.green {
color: green;}// text.css.text {
background-color: red;
composes: green from './green.css';}
會編譯成：
.green__green___1v20L {
color: green;}.text__text__2jfs0 {
background-color: red;}
其實跟 二 一樣，生成的css并沒有什么改動，其實改變的是生成js對象的內(nèi)容：
import styles from './text.css';
// styles = {green: 'green__green___1v20L', text: 'text__text__2jfs0 green__green___1v20L'}
styled-components
styled-components, 可能是React中css的最佳實踐了，如果你喜歡，你也可以叫它styled-react-components : )。想象一下，像寫react組件一樣去寫css，是一種什么樣的體驗？
如下，你可以這樣來寫樣式：
import React from 'react';import styled from 'styled-components';
const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred;`;
const Wrapper = styled.section` padding: 4em; background: papayawhip;`;
export default () => <Wrapper>
<Title>Hello World, this is my first styled component!</Title></Wrapper>;
styled-components會自動幫你在 運行時 生成一個樣式表，插入到 <head> 下的 <style> 標(biāo)簽中，比如上邊的代碼，會在運行是生成如下代碼：
<head>
<style data-styled-components>
/* sc-component-id: model__Title-cooNNd */
.model__Title-cooNNd {} .jHitSF{font-size:1.5em;text-align:center;color:palevioletred;}
/* sc-component-id: model__Wrapper-bEJrHK */
.model__Wrapper-bEJrHK {} .ipFfju{padding:4em;background:papayawhip;}
</style></head><body>
<section class="model__Wrapper-bEJrHK ipFfju">
<h1 class="model__Title-cooNNd jHitSF">Hello World, this is my first styled component!</h1>
</section></body>
我們可以看到，我們在js中寫的樣式，被插入到了 <style>中，并且生成了一個隨機的類名，而且這個類名，也是被 react-dom 生成的DOM結(jié)構(gòu)所引用。
受益于 styled-components，我們貫徹了 react 的 萬物皆組件 的思想，使我們在css的組件化上又推進(jìn)了一步（發(fā)布一個純css組件試試？） : )
在這篇文章里，我會簡單探討一下 style-components 的用法和特性。
如何使用？
styled-components 一般配合著 react 使用，當(dāng)然也支持 vue （vue-styled-components)。拋開這兩個來說，你也可以直接在原生js下使用：
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
我們這里講配合 react 的用法。
一、首先，安裝依賴
$ npm i styled-components# 配合著babel來使用
$ npm i -D babel-plugin-styled-components
二、配置 .babelrc （當(dāng)然，我們需要安裝 webpack ，配置webpack的config，并且需要需要安裝 babel-preset-env 和 babel-preset-react，這里不贅述）
{
"presets": ["env", "react"],
"plugins": ["styled-components"]}
經(jīng)過以上簡單的配置之后，就可以在項目中使用 styled-components 了。
工具
當(dāng)然，現(xiàn)在的 styled-components 也是支持了 stylelint 和 jest，所以，你也不用擔(dān)心樣式檢查和測試了 ：）
下邊兒說一下 styled-components 的一些用法和特性。 官方文檔在這兒： https://www.styled-components.com/docs/basics
一、動態(tài)樣式賦值
你可以傳props給組件，讓組件根據(jù)所傳的props的值動態(tài)改變樣式。
const Button = styled.button` /* 根據(jù)props的值動態(tài)改變樣式的值 */ background: ${props => props.primary ? 'palevioletred' : 'white'}; color: ${props => props.primary ? 'white' : 'palevioletred'};`;
render(
<p>
<Button>Normal</Button>
<Button primary>Primary</Button>
</p>);
二、樣式繼承
const Button = styled.button` color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px;`;// 創(chuàng)建一個新Button組件，繼承自Button，并對Button進(jìn)行樣式添加和覆蓋const TomatoButton = styled(Button)` color: tomato; border-color: tomato;`;
render(
<p>
<Button>Normal Button</Button>
<TomatoButton>Tomato Button</TomatoButton>
</p>);
三、組件標(biāo)簽替換
比如，你創(chuàng)建了一個Button組件，你想把button標(biāo)簽變成a標(biāo)簽，但是樣式還是button的樣式。那么你可以通過 withComponent 方法輕松做到。
const Button = styled.button` display: inline-block; color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px;`;
// 把<button>標(biāo)簽替換成<a>標(biāo)簽const Link = Button.withComponent('a')
// 繼承Link組件const TomatoLink = styled(Link)` color: tomato; border-color: tomato;`;
render(
<p>
<Button>Normal Button</Button>
<Link>Normal Link</Link>
<TomatoLink>Tomato Link</TomatoLink>
</p>);
四、動畫
// 這個keyframe會隨機生成一個nameconst rotate360 = keyframes` from { transform: rotate(0deg); }
to { transform: rotate(360deg); }`;
const Rotate = styled.p` display: inline-block; animation: ${rotate360} 2s linear infinite; padding: 2rem 1rem; font-size: 1.2rem;`;
render(
<Rotate>< ></Rotate>);
五、Media Query
const Content = styled.p` background: papayawhip; height: 3em; width: 3em;
@media (max-width: 700px) { background: palevioletred; }`;
render(
<Content />);
六、嵌套寫法
styled-components支持嵌套寫法，這個特性是從 Sass 移植過來的。
const EqualDivider = styled.p` display: flex; margin: 0.5rem; padding: 1rem; background: papayawhip; ${props => props.vertical && 'flex-direction: column;'}
> * { flex: 1;
&:not(:first-child) { ${props => props.vertical ? 'margin-top' : 'margin-left'}: 1rem; } }`;
const Child = styled.p` padding: 0.25rem 0.5rem; background: palevioletred;`;
render(
<p>
<EqualDivider>
<Child>First</Child>
<Child>Second</Child>
<Child>Third</Child>
</EqualDivider>
<EqualDivider vertical>
<Child>First</Child>
<Child>Second</Child>
<Child>Third</Child>
</EqualDivider>
</p>);
七、配合其他css類庫使用
比如你在項目中引入了 bootstrap.css，應(yīng)該怎么和bootstrap中的類配合使用呢？
const Button = styled.button.attrs({
// 生成的classList中會包含small
className: 'small'})` background: black;`;
render(
<p>
<Button>Styled Components</Button>
<Button>The new way to style components!</Button>
</p>);
八、優(yōu)先級
怎么樣覆蓋高優(yōu)先級的樣式呢？當(dāng)然我們可以通過 !important來做，不過 styled-components 更推薦下邊這種做法：
const MyStyledComponent = styled(AlreadyStyledComponent)` &&& { color: palevioletred; font-weight: bold; }`;
每個 & 替換為生成的類,那么生成的CSS是這樣的:
.MyStyledComponent-asdf123.MyStyledComponent-asdf123.MyStyledComponent-asdf123 {
color: palevioletred;
font-weight: bold;}
那么怎么覆蓋內(nèi)聯(lián)樣式呢？如下：
const MyStyledComponent = styled(InlineStyledComponent)` &[style] { font-size: 12px !important; color: blue !important; }`;
styled-components 顛覆了傳統(tǒng)的樣式寫法，像寫組件一樣寫css，配合 react 恰到好處 ：）
至于在 Less、css-modules 和 styled-components 中到底選擇哪一個，就要看你的應(yīng)用場景和需求了。
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
