本文的目的是通過回顧CSS的曆史背景,介紹下時至2018年的今天CSS發展過程中的一些設計模式和工具的演變。通過對這些背景的理解,你將會更輕鬆的理解每個設計思想並且學以致用。接下來讓我們開始吧!
CSS一直被web開發人員認為是最簡單也是最難的一門奇葩語言。它的入門確實非常簡單——你只需為元素定義好樣式屬性和值,看起來似乎需要做的工作也就這樣嘛!然而在一些大型工程中CSS的組織是一件複雜和淩亂的事情,你更改頁面上任意一個元素的一行CSS樣式都有可能影響到其他頁面上的元素。
CSS基本樣式使用
我們從一個最簡單的網頁index.html 開始,這個檔案中包含一個獨立的樣式檔案index.css:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Modern CSS</title> <link rel="stylesheet" href="index.css"></head><body> <header>This is the header.</header> <main> <h1>This is the main content.</h1> <p>...</p> </main> <nav> <h4>This is the navigation section.</h4> <p>...</p> </nav> <aside> <h4>This is an aside section.</h4> <p>...</p> </aside> <footer>This is the footer.</footer></body></html>
上面的HTML標籤中沒用使用任何class或者id。
在沒有任何CSS樣式的情況下,我們的網站看起來是這個樣子:
點擊查看線上demo
功能可用,但看起來不好看,我們可以繼續在index.css加點CSS美化下排版:
/* BASIC TYPOGRAPHY *//* from https://github.com/oxalorg/sakura */html { font-size: 62.5%; font-family: serif;}body { font-size: 1.8rem; line-height: 1.618; max-width: 38em; margin: auto; color: #4a4a4a; background-color: #f9f9f9; padding: 13px;}@media (max-width: 684px) { body { font-size: 1.53rem; }}@media (max-width: 382px) { body { font-size: 1.35rem; }}h1, h2, h3, h4, h5, h6 { line-height: 1.1; font-family: Verdana, Geneva, sans-serif; font-weight: 700; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;}h1 { font-size: 2.35em;}h2 { font-size: 2em;}h3 { font-size: 1.75em;}h4 { font-size: 1.5em;}h5 { font-size: 1.25em;}h6 { font-size: 1em;}
這地方大部分都是關於排版(字型、行高等)樣式的定義,也包含一些顏色和一個layout置中設定。為了讓每個屬性有個合理的值你需要學習點設計理論,但是這個地方我們用到的CSS本身並不複雜,你可以直接定義,結果如下所示:
Click here to see a live example
有所變化了吧!正如CSS確保的一樣——用一種簡單的方式給文檔添加上樣式,不需要編程或者複雜的商務邏輯。不幸的是,實際情況會複雜的很多,我們不單單使用的是CSS的排版和顏色這種簡單的樣式定義。
CSS的布局使用
在20世紀90年代,CSS還未廣泛普及之前,對於頁面的布局沒有太多的選擇。HTML最初是被設計為建立純文字的一門語言,並不是包含側邊欄、列等布局的動態網頁面。早期的時候,頁面配置通常使用的是HTML表格,在行和列中組織內容,這種方式雖然有效,但是把內容和表現雜糅在一塊了,如果你想改變網頁的布局就得需要修改大量的HTML代碼。
CSS的出現推動了內容(寫在HTML中)和表現(寫在CSS中)的分離,人們開始把所有的布局代碼從HTML中移除放入到CSS中,需要注意的是,和HTML一樣CSS的設計也不是用來做網頁內容布局的,所以早期的時候試圖解決這種分離設計是很困難的。
我們來用個實際例子來看下如何?布局,在我們定義CSS布局前先重設下padding和margin(會影響布局的計算),不同的地區我們定義不同的顏色(不要太在意好看不好看只要不同地區間足夠醒目就可以)
/* RESET LAYOUT AND ADD COLORS */body { margin: 0; padding: 0; max-width: inherit; background: #fff; color: #4a4a4a;}header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-color: #4a4a4a; color: #f9f9f9;}nav { background: #eee;}main { background: #f9f9f9;}aside { background: #eee;}
現在頁面應該看起來如下:
Click here to see a live example
接下來我們用CSS來布局下頁面內容,我們將按照時間順序採用三種不同的方式,先從最經典的浮動布局開始吧。
基於浮動的布局
CSS浮動屬性最初是為了將圖片浮動在一列文本的左側或者右側(報紙上經常看到)。早在21世紀初,web開發人員將這個屬性的優勢擴充到了任意的元素,這意味著你可以通過p的內容浮動建立出行和列的錯覺。同樣,浮動也不是基於這樣的目的設計的,所以相容性上會有很多問題。
2006年,A List Apart上發表了一篇熱門文章In Search of the Holy Grail,文章概述了實現聖杯布局的詳細方法——一個頭部、三列內容和一個底部,你一定覺得一個簡單的布局被稱為聖杯布局很瘋狂吧,但是在當時純CSS的時代這的確很難實現。
下面是一個基於浮動布局的例子,用到了我們文章中提到的一些技術點:
/* FLOAT-BASED LAYOUT */body { padding-left: 200px; padding-right: 190px; min-width: 240px;}header, footer { margin-left: -200px; margin-right: -190px; }main, nav, aside { position: relative; float: left;}main { padding: 0 20px; width: 100%;}nav { width: 180px; padding: 0 10px; right: 240px; margin-left: -100%;}aside { width: 130px; padding: 0 10px; margin-right: -100%;}footer { clear: both;}* html nav { left: 150px;}
仔細看下CSS代碼,這裡面為了讓它工作包含一些必須的hack方式(負邊距、clear: both、硬式編碼寬度計算等),稍後我們會對這些細節做詳細的解釋。最終的結果如下:
Click here to see a live example
看起來不錯了,但是通過三列的顏色可以看出來他們的高度不一樣,頁面的高度也沒有填充滿螢幕。這些問題是浮動布局導致的,所有的浮動只是將內容放在某一區塊的左邊或者右邊,但是沒法知道其他區塊的高度。這個問題一直沒有個好的解決方案,直到Flexbox布局的出現。
基於Flexbox的布局
flexbox CSS屬性實在2009年第一次提出來的,但直到2015年才得到瀏覽器的廣泛支援。Flexbox被設計為定義一個空間在行或者列上如何分布的,這讓它比浮動更適合用來做布局,這意味在使用浮動布局十多年後,web開發人員終於不再使用帶有hack的浮動布局方式了。
下面是一個基於Flexbox布局的例子。注意為了讓flexbox生效我們需要在三列的外面額外封裝一個p:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Modern CSS</title> <link rel="stylesheet" href="index.css"></head><body> <header>This is the header.</header> <p class="container"> <main> <h1>This is the main content.</h1> <p>...</p> </main> <nav> <h4>This is the navigation section.</h4> <p>...</p> </nav> <aside> <h4>This is an aside section.</h4> <p>...</p> </aside> </p> <footer>This is the footer.</footer></body></html>
下面是flexbox布局的CSS代碼:
/* FLEXBOX-BASED LAYOUT */body { min-height: 100vh; display: flex; flex-direction: column;}.container { display: flex; flex: 1;}main { flex: 1; padding: 0 20px;}nav { flex: 0 0 180px; padding: 0 10px; order: -1;}aside { flex: 0 0 130px; padding: 0 10px;}
這種方式和浮動布局相比更加緊湊了,雖然flexbox一些屬性和值初看起來有些困惑,但是好歹不需要像浮動布局那樣負邊距的hack方案了,這是個巨大的進步。最終結果如下:
Click here for a live example
效果好多了!所有的列高度都相同,並且佔據了整個頁面的高度。從某種意義上來說這似乎是完美的了,但是這個方式也有些小問題,其中一個就是瀏覽器的相容性——主流的現代瀏覽器都支援flexbox,但是一些舊的瀏覽器不相容。幸運的是瀏覽器廠商也正在盡最大努力終止對舊版本瀏覽器的支援,為web開發人員提供更一致的開發體驗。另一個問題是我們需要<p class="container">
包裹HTML內容標籤,如果能避免會更完美。理想狀態下,任何CSS布局都不需要改變HTML標籤的。
最大的缺點是CSS代碼本身——flexbox雖然去掉了浮動的Hack,但是代碼的可讀性上變得更差了。你很難去理解flexbox的CSS,並且不知道頁面上是如何去布局所有元素的。在寫flexbox布局代碼的時,有很多時候靠的是大量的猜測和嘗試。
特別需要注意的是,flexbox被設計用來在單行或者單列中分割元素的——它不是設計用來給整個頁面做布局的!儘管它能很好的實現(相對於浮動布局好很多)。另一種不同的規範是用來處理多行或者多欄版面配置的,我們稱之為CSS 網格。
基於Grid的布局
CSS網格最早在2011年提出的(比flexbox提案晚不了多久),但是花了好長時間才在瀏覽器上普及起來。截止2018年初,大多數現代瀏覽器都已經支援CSS grid(這比一兩年前有巨大的進步了)
下面我們看一下基於網格布局的例子,注意在這個例子中我們擺脫了flexbox布局中必須使用<p class="container">
的限制,我們可以簡單的使用原始的HTML,先看下CSS檔案:
/* GRID-BASED LAYOUT */body { display: grid; min-height: 100vh; grid-template-columns: 200px 1fr 150px; grid-template-rows: min-content 1fr min-content;}header { grid-row: 1; grid-column: 1 / 4;}nav { grid-row: 2; grid-column: 1 / 2; padding: 0 10px;}main { grid-row: 2; grid-column: 2 / 3; padding: 0 20px;}aside { grid-row: 2; grid-column: 3 / 4; padding: 0 10px;}footer { grid-row: 3; grid-column: 1 / 4;}
雖然結果看起來和基於flexbox的布局一樣,但是CSS在很大程度上得到了改進,它清晰地表達出了期望的布局方式。行和列的大小和形狀在body選取器中定義,每一項item直接通過他們所在行和列的位置定義。
grid-column
這個屬性你可能覺得不太好理解,它定義了列的起點和終點。這個地方讓你覺得困惑的可能是明明有3列,卻為什麼定義的範圍是1到4,通過下面的圖片你就能理解了:
Click here to see a live example
第一列是從1到2,第二列是從2到3,第三列從3到4,所以頭部的grid-column
是從1到4佔據整個頁面,導航的grid-column
是從1到2佔據第一列等等
一旦你習慣了grid文法,你會覺得它是一種非常理想的CSS布局方式。唯一缺點就是瀏覽器支援,幸運的是過去一年中瀏覽器的支援又得到了進一步的提高。作為專為CSS設計的第一款真正的布局工具很難描繪它的重要性,從某種意義上來說,由於現有的工具需要太多的hack和變通方式去實現,因此web設計者過去對於布局的創意上一直很保守,CSS網格的出現有可能會激發出一批從未有過的創意布局設計——想想還是挺激動人心的!
使用CSS前置處理器擴充CSS文法
到目前為止,我們介紹了CSS的基本樣式和布局,現在我們再來看下那些協助CSS提升語言本身體驗的工具,先從CSS前置處理器開始吧。
CSS前置處理器允許你使用不同的語言來定義樣式,最終會幫你轉換為瀏覽器可以解釋的CSS,這一點在當今瀏覽器對新特性支援緩慢的情況下很有價值。第一個主流的CSS前置處理器是2006年發布的Sass,它提供了一個新的更簡潔的文法(縮排代替大括弧,沒有分號等等),同時增加了一些CSS缺失的進階特性,像變數、工具方法還有計算。下面我們使用Sass變數實現下前面例子中帶顏色的地區定義:
$dark-color: #4a4a4a$light-color: #f9f9f9$side-color: #eeebody color: $dark-color header, footer background-color: $dark-color color: $light-color main background: $light-colornav, aside background: $side-color
注意我們用$
定義了可複用的變數,省略了大括弧和分號,文法看起來更加清晰了。簡潔的文法讓Sass看起來很棒,但變數這樣的特性出現在當時來說意義更大,這為編寫整潔可維護的CSS代碼開闢了新的可能性。
使用Sass你需要安裝Ruby(Ruby),這門語言主要是讓Sass編譯成正常的CSS,同時你需要安裝Sass gem,之後你就可以通過命令列把你的.sass檔案轉成.css檔案了,我們先看一個使用命令列的例子:
sass --watch index.sass index.css
這個命令定期把index.sass
中的Sass代碼轉為CSS寫入到index.css
檔案中(--watch
參數設定後會即時監聽.sass檔案改動並執行編譯,非常方便)
這個過程被稱為構建步驟。這在2006年的時候是非常大的一個障礙,如果你對Ruby這樣的程式設計語言熟悉的話,這個過程非常簡單。但是當時很多前端開發人員只用HTML和CSS,他們不需要類似這樣的工具。因此,為了使用CSS先行編譯的功能而讓一個人學習整個生態系統是很大的一個要求了。
2009年的時候,Less CSS先行編譯器發布。它也是Ruby寫的,並且提供了類似於Sass的功能,關鍵不同點是它的文法設計上更接近CSS。這意味著任何CSS代碼都是合法的Less代碼,同樣我們看一個用Less文法的例子:
@dark-color: #4a4a4a;@light-color: #f9f9f9;@side-color: #eee;body { color: @dark-color;} header, footer { background-color: @dark-color; color: @light-color;} main { background: @light-color;}nav, aside { background: @side-color;}
文法上幾乎是相同的(變數的定義使用@
替代了$
),但是Less和CSS一樣帶有大括弧和分號,沒有Sass例子的代碼看起來漂亮。然而,和CSS相近的特性反而讓開發人員更容易接受它,在2012年,Less使用了JavaScript(Node.js)重寫了替換了Ruby,效能上比Ruby編譯更快了,並且很多在工作中使用了Node.js的人更容易上手了。
把這段代碼轉化為標準的CSS,你需要安裝Node.js 和 Less,執行的命令列如下:
lessc index.less index.css
這個命令把index.less
檔案中的Lessz代碼轉化為標準的CSS代碼寫入到index.css
檔案中,注意lessc命令不能監聽檔案的變化(和sass不一樣),這意味著你需要安裝其他自動監聽和編譯的組件來實現該功能,增加了流程的複雜性。同樣,對於程式員來說使用命令列的方式並不難,但是對於其他只想使用CSS先行編譯器的人來說還是個非常大的障礙。
汲取了Less的經驗,Sass開發人員在2010年發布了一個新的文法叫SCSS(與Less類似的一個CSS超集),同時發布了LibSass,一個基於C++擴充的Ruby引擎,讓編譯更快並且適配於多種語言。
另外一個CSS前置處理器是2010年發布的Stylus,使用Node.js編寫,和Sass或者Less相比更注重於清晰的文法。通常主流的CSS先行編譯器就這三種(Sass,Less,Stylus),他們在功能方面非常相似,所以你不必擔心選擇哪一個會是錯誤的。
然而,有些人認為使用CSS前置處理器開始變得越來越沒必要,因為瀏覽器最終會慢慢實現這些功能(像變數和計算)。此外,還有一種稱為CSS後處理器的方法,有可能會讓CSS前置處理器過時(顯然這存在些爭議),我們在後面會詳細介紹下。
使用CSS後處理器的轉換功能
CSS後處理器使用JavaScript分析並轉換你的CSS為合法CSS,從這方面來看和CSS前置處理器很相似,你可以認為是解決同一個問題的不同方式。關鍵的不同點是CSS前置處理器使用特殊的文法來標記需要轉換的地方,而CSS後處理器可以解析轉換標準的CSS,並不需要任何特殊的文法。舉一個例子來說明下,我們用最初定義的header標籤樣式來看一下吧:
h1, h2, h3, h4, h5, h6 { **-ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto;** hyphens: auto;}
粗體部分的屬性成為廠商首碼,廠商首碼是瀏覽器廠商對CSS新功能的實驗和測試使用的,在正式實現前提供給開發人員使用CSS新屬性的一種方式。-ms
代表IE瀏覽器,-moz
是Firefox瀏覽器,-webkit
是基於webkit核心的瀏覽器。
定義這些不同瀏覽器廠商的首碼屬性是非常煩人的,盡量使用產生工具自動添加廠商首碼。我們可以使用CSS前置處理器來完成這個功能,例如,我們可以用SCSS來實現:
@mixin hyphens($value) { -ms-hyphens: $value; -moz-hyphens: $value; -webkit-hyphens: $value; hyphens: $value;}h1, h2, h3, h4, h5, h6 { @include hyphens(auto);}
這個地方使用了Sass的 mixin
功能,你可以定義一個CSS代碼塊然後在其他任何地方重用,當這個檔案被編譯成標準的CSS的時候,所有的@include
語句都被替換成與之匹配的@mixin
中的CSS。總體來說,這個解決方案也不差,但是你仍然要為每個需要廠商首碼的的CSS屬性定義一個mixin,這些mixin的定義將需要不斷的維護,比如當瀏覽器支援了某個CSS屬性後你就要在你的定義中移除掉該屬性。
比起寫mixin的方式,直接正常寫CSS然後由工具自動識別添加需要廠商首碼的屬性的方式顯然更優雅些。CSS後處理器就恰好能完成這樣的功能。比如,如果你使用 PostCSS 和 autoprefixer 外掛程式,你就可以直接寫正常的CSS並不需要指定瀏覽器廠商首碼,剩下的工作全交給後置處理器去處理:
h1, h2, h3, h4, h5, h6 { hyphens: auto;}
當你使用CSS後處理器運行這段代碼的時候hyphens: auto;
將被替換成包含所有瀏覽器廠商首碼的屬性,這意味著你可以正常寫CSS不用擔心各種瀏覽器安全色性問題,豈不是很棒!
除了PostCSS的autoprefixer
外掛程式還有很多有意思的外掛程式,cssnext 外掛程式可以讓你體驗下一些實驗性質的CSS新功能,CSS modules 可以自動改變class的名字避免名稱衝突,stylelint 能檢查出你CSS代碼中一些定義錯誤和不符合規範的寫法。這些工具在過去一兩年裡開始流行起來,給開發人員提供了從未有過的工程化流程。
然而,進程的發展總是有代價的,安裝和使用CSS後處理比CSS前置處理器更複雜。你不僅要安裝、執行命令列,還需要安裝配置各個外掛程式並且定義好各種複雜的規則(比如你的目標瀏覽器等)。很多開發人員不再直接使用命令列運行PostCSS了,而是通過配置一些構建系統,像Grunt 、Gulp 、webpack,他們可以協助你管理前端開發工作中需要的各種構建工具。
值得注意的是對於CSS後處理器存在些爭議,有人認為這個術語有些讓人迷惑(一種說法是建議都應該叫CSS前置處理器,還有一種說法是應該都簡稱CSS處理器,等等),有人認為有了CSS後處理器完全可以不需要CSS前置處理器,有人則主張兩者一起使用。不管怎麼說,去瞭解下CSS後處理器的使用還是非常值得的。
使用CSS設計模式
CSS前置處理器和CSS後處理器讓CSS開發體驗有了巨大的提升,但是單靠這些工具還不足以解決維護大型項目CSS代碼的問題。為瞭解決這個問題,人們編寫了一些關於如何寫CSS的指導方針,通常被稱為CSS規範。
在我們深入分析CSS規範前,首先要搞清楚是什麼讓CSS隨著時間推移變得更加難維護,關鍵點是CSS是全域性的——你定義的每個樣式都會全域應用到頁面的每個部分,用一個命名規範來保證class名稱的唯一性或者有特殊的規則來決定指定樣式應用到指定元素。CSS規範提供了一個有組織性的方式來避免大量代碼時出現的這些問題,讓我們按照時間順序來看看主流的一些規範吧
OOCSS
OOCSS(物件導向的CSS)是在2009年首次提出的,它是圍繞兩個原則建立的規範。第一個原則是結構和樣式分離,這意味著定義結構(布局)的CSS不應該和定義樣式(顏色、字型等)的CSS混雜在一起,這樣我們就可以很簡單的為一個應用定義新的皮膚了;第二個原則是容器和內容分離,把元素看成是一個可重用的對象,關鍵核心點是一個對象不管用在頁面的任何位置都應該看起來是相同的。
OOCSS提供了成熟的指導規範,但是對於具體的執行規範並沒有明確指出。後來出現的SMACSS採用了它的核心概念,並且添加了更多的細節,使用起來更簡單了。
SMACSS
SMACSS(可擴充模組化架構的CSS)是在2011年出現的一種設計模式,它將CSS分為5個不同的類別——基本規範、布局規範、模組、狀態規範和樣式規範。SMACSS也有一些推薦的命名規則,對於布局規範使用l-
或者layout-
作為首碼;對於狀態規範,使用is-hidden
或者is-collapsed
作為首碼。
相比OOCSS,SMACSS有了更多細節上的規範,但是CSS規則該劃分為哪一類別的規範中,這是個需要仔細考慮的問題。後來出現的BEM對這一方面進行了改進,讓它更易使用了。
BEM
BEM (塊, 元素, 修飾符)是在2010年出現的規範,它的思想主要是圍繞把使用者介面切分成獨立的塊。塊是一個可重用的組件(舉個例子像表單搜尋,可以這樣定義<form class="search-form"></form>
),元素是塊的一部分不能單獨重用(比如表單搜尋中的button,<button class="search-form__button">Search</button>
),修飾符是定義了塊或者元素外觀、狀態或者行為的實體(比如禁用搜尋按鈕,定義為<button class="search-form__button search-form__button--disabled">Search</button>
)。
BEM的規範很容易理解,對於新手來說命名規則上也很友好,缺點就是可能會導致class名字非常長,並且沒有遵循傳統的命名規範。後來出現的Atomic CSS又把這個非傳統方式帶到了一個新的高度。
Atomic CSS
Atomic CSS (也稱為 功能性CSS)是2014年出現的一個規範,它的思想是基於可視化的方法建立小而功能單一化的class。這種規範與OOCSS、SMACSS和BEM完全相反——它並不是把頁面上的元素看做是可重用的對象,Atomic CSS忽略掉了這些對象,每一個元素使用了可重用的單一功能的class樣式集合。因此像<button class="search-form__button">Search</button>
就被替換成這樣的寫法了<button class="f6 br3 ph3 pv2 white bg-purple hover-bg-light-purple">Search</button>
如果你看到這個例子第一反應是被嚇的退縮了,沒關係你並不是唯一有這想法的人——很多人認為這種方式完全違背了CSS的最佳實務,但是,關於這個有爭議的規範在不同情境下的應用也產出了一系列精彩的討論。這篇文章很清晰的分析了傳統的分離思想是CSS依賴於HTML建立(即使使用像BEM這類的規範),而Atomic的方式是HTML依賴於CSS建立,兩者都沒錯,但是仔細想想你會發現CSS和HTML徹底分離的想法是實現不了的。
其他的CSS設計模式,像CSS in JS其實也包含了CSS和HTML相互依賴的思想,這也成為了一個飽受爭議的設計規範之一。
CSS in JS
CSS in JS 是2014年推出的一種設計模式,它的核心思想是把CSS直接寫到各自組件中,而不是單獨的樣式檔案裡。這種方式在React架構中引入的,最早是使用內聯樣式,後來又進化成了使用JavaScript產生CSS然後插入到頁面的style標籤中的方式。
CSS in JS再一次違背了CSS中關於分離的最佳實務,主要原因是web隨著時間推移發生了很大的變化。最初web大部分都是靜態網站——這種情況下HTML內容和CSS表現分離是很有意義的,但現在大部分應用都是動態web構建——這種情況下可重用的組件更加有意義了。
CSS in JS設計的目標是定義邊界清晰包含自己HTML/CSS/JS的獨立組件,並且不受其他組件的影響。React是最早採用這種思想的架構,後續也影響到了其他架構像Angular、Ember和Vue.js。需要注意的是CSS in JS的模式相對來說比較新的,開發人員正在不斷的嘗試開發web應用組件時的一些CSS最佳實務。
五花八門的設計模式很容易讓你不知所措,最重要的記住一點——沒有銀彈。
結論
簡而言之這就是現代CSS。我們介紹了CSS基本排版樣式,浮動布局、flexbox和grid布局,瞭解了CSS前置處理器為CSS提供的新文法,比如變數和mixins,還瞭解了CSS後處理器的轉換功能,像給CSS添加廠商首碼,並且使用CSS的一些設計模式克服了全域CSS的一些問題。在這裡我們沒有時間去挖掘更多CSS其他功能了,CSS覆蓋面太廣了——任何一個說它簡單的人可能只是對它一知半解吧!