Langou簡介
Langou是一個跨平臺（Android/iOS）前端開發框架，核心代碼使用C++編寫，底層基于OpenGL繪圖，上層實現了一個精簡的排版引擎以及一個JS/JSX運行環境。目標是想實現在此基礎上開發GUI應用程序可兼顧開發速度與運行效率。
CSS樣式表到底是什么
CSS樣式表全稱叫Cascading Style Sheets是一種用來表現HTML文件樣式的語言，是Web前端開發中一定會用到的排版語言，那么Langou中css的靈感就來自于此。與其說是靈感還不如果說是借鑒并通過精簡而來，因為開發這個框架的初衷效率一直就是最重的目標，其次才是使用體驗。
下面是Langou中CSS樣式表的寫法：
import { CSS, Div, Text } from 'langou';
CSS({
'.a': {
width: '100%',
height: '100%',
contentAlign: 'center',
},
'.a .b': {
width: 100,
height: 100,
marginTop: 'auto',
marginBottom: 'auto',
backgroundColor: '#f00',
},
});
const vx = (
<Div class="a">
<Text class="b">Hello!</Text>
</Div>
);
是不是很熟悉呢。
CSS樣式表運行時
這里說的是新式表到底是什么時間應用到視圖上的。樣式表并不會主動去查詢View.class，繪圖線程在渲染幀畫面前會先查詢并解決所有需要更新的樣式表class。請記住樣式表只是靜態的屬性集合，樣式表的應用是需要的視圖對像主動查詢。所以當一個視圖先前已經應用過樣式表，然后樣式表屬性被更改后并不會影響到先前應用樣式表的視圖。需要注意的一點是樣式表樣表應用只是簡單的對視圖對像屬性的更改，并沒有權重的概念，所以在應用樣式表時需要注意與直接設置屬性的先后順序，很有可能先前設置的視圖屬性被樣式表覆蓋，因為樣式表class的設置并不會立即生效它總是在渲染開始前才應用到視圖。
CSS樣式表名稱規則
非常抱歉的告訴各位，現在的樣式表體系只支持class并不支持id與tagName。還是因為同樣的原因效率問題，所以我希望盡量簡單。當然這一切都需要在使用體驗上付出代價，也許在某一天會有人想出更好的替代方案也說不定，要知道眾人的力量是無窮的況且現在框架本身不需限制于任何標準。
名稱組合
樣式表首先都是全局的，后面定義的同名樣式表會與前面定義的樣式表合并如果有重復的屬性會進行替換。怎樣的名字是同名的呢？并不是說定義時的名稱組合key本身，看下面的例子。
CSS({
'.a': { height: 100 },
'.b': { backgroundColor: '#f00' },
'.c': { border: '1 #000' },
'.a.b': { width: 100 },
'.b.a': { width: 200 },
});
const vx = (
<Div class="a b c" />
);
上面.a.b與.b.a表示其實是同一個名稱。并且最后的width為200。
并且越長的名稱組合就會有越多的組合結果，也就是說查詢也會需要更多的時間。比如class="a b c"的樣式組合會有.a、.b、.c、.a.b、.a.c、.b.c、.a.b.c 7種結果，當視圖應用這個樣式時需要查詢這7種可能性。所以在Langou中CSS樣式表的組合限制在4個，多于4個時的組合時可能會出現意想不到結果。
多級名稱
樣式表的數據結構其實是個樹狀結構，每個具名的樣式表都可以有子樣式表，子級樣式表以空格區分且級數沒有限制但理論來說越多的級數查詢的速度也會越慢。如：
CSS({
'.a': { width: 200, height: 200 },
'.b': { height: 100 },
'.a .b': { width: 100, height: 200 },
});
const vx = (
<Div class="a">
<Text class="b">Hello!</Text>
</Div>
);
子級樣式表權重會更高上面的例子中Text的
height應該是200.a .b的樣式表屬性會覆蓋.b。多級樣式表的應用也必須對應視圖的嵌套關系，這樣樣式才能生效，比如上面的例子中
.a .b這個樣式表應用于視圖時，這個視圖的父級或頂級視圖的樣式表必須亦一個.a。
偽類
偽類有三種類型分為normal、hover、down 分別對應正常、光標進入、光標按下。當然在觸摸屏上沒有光標所有hover也不會存在。只有normal、down 對應觸摸開始與觸摸結束。
例：
CSS({
'.a': { width: 100, height: 100 },
'.a:normal': { backgroundColor: '#aaa' },
'.a:hover': { backgroundColor: '#f00' },
'.a:down': { backgroundColor: '#f0f' },
});
const vx = (
<Div class="a" />
);
有一點需要注意偽類不可以再有子級偽類，如：
CSS({
'.a:hover': { backgroundColor: '#f00' },
'.a:hover .b': { width: 200 },
'.a:hover .b:hover': { backgroundColor: '#ff0' }, // 這條規則會拋出異常
});
