一、“無(wú)”的哲學(xué)

　　佛家講究“因果報(bào)應(yīng)”，有果必有應(yīng)。此段看似與主題沒有血緣關(guān)系，實(shí)際講的是“因”。

　　我個(gè)人比較喜歡老子的道家思想，并喜歡以其思想解釋學(xué)習(xí)與工作中遇到的一些問(wèn)題。例如我之前寫過(guò)的“中國(guó)古代道家思想與網(wǎng)頁(yè)重構(gòu)的思考”一文。

　　老子有云：“天下萬(wàn)物生于有，有生于無(wú)”。具體解釋就是：天下萬(wàn)物都是由看得見的具體事物（“有”）產(chǎn)生的，而看得見的具體事物（“有”）又是由看不見的，無(wú)形無(wú)狀的東西（“無(wú)”）產(chǎn)生的，這個(gè)看不見的“無(wú)”也就是“道”，或叫做“根”、“母”。

　　我們看武俠片，經(jīng)常聽到“無(wú)招勝有招”這句話，這也是道家“無(wú)”之思想之體現(xiàn)。因?yàn)槟阈闹袥]有招式，你才能有無(wú)限的可能，生成其他的招式以克敵，即所謂以不變應(yīng)萬(wàn)變；相反，如果你心中牢記一套“華山劍法”，當(dāng)你與人交手時(shí)，勢(shì)必按照此套路走，要是遇到相克之劍法，結(jié)局就是一敗涂地。“無(wú)招”是一種境界，是你功夫修煉到一定程度才能領(lǐng)悟到的。我們這代人應(yīng)該都看過(guò)李連杰主演的《倚天屠龍記魔教教主》，其中張三豐老頭教完張無(wú)忌太極拳后問(wèn)他“記住了沒？”張無(wú)忌一句“全忘記了！”讓人印象深刻。這就是“無(wú)”的境界。

　　這種境界我是深有體會(huì)的。例如每逢大考之前，我總是把以前做過(guò)的題目全部忘掉，這樣，考試時(shí)就能思如泉涌；反而是強(qiáng)記題目的做法限制了發(fā)揮。這就好比發(fā)射炮彈，炮管里提前預(yù)裝了重型炸彈，結(jié)果戰(zhàn)斗開始時(shí)，發(fā)現(xiàn)需要的是煙霧彈，此時(shí)，反而被預(yù)裝的炸彈給阻塞限制了。打籃球也有這種體會(huì)，如果心中記得的是動(dòng)作，我要這么走，然后這么做，往往表現(xiàn)不佳。反而是腦中什么想法也沒有，全靠下意識(shí)行動(dòng)，那真是所向披靡，得分如探囊取物。

　　可見，要想發(fā)揮更大，就需要“無(wú)”，把一些“限制的東西”通通去掉。沒有限制才能發(fā)揮出最大的潛能。站在最簡(jiǎn)單，最原始的那個(gè)點(diǎn)上，你才能自由馳騁，應(yīng)變自如。

　　二、名字的本質(zhì)是什么

　　我們有沒有思考過(guò)這么一個(gè)問(wèn)題：名字的本質(zhì)是什么？
　　這個(gè)問(wèn)題其實(shí)不難，名字本質(zhì)上就是一個(gè)符號(hào)，用來(lái)區(qū)分人與人的。與符號(hào)一樣，名字本身就蘊(yùn)含著很多的信息。舉個(gè)例子，我的名字：張?chǎng)涡瘛Ｆ渲刑N(yùn)含的信息有：我老爸也姓張，我是上午太陽(yáng)剛剛升起的時(shí)候出生的，我五行缺金。一個(gè)名字，如果其蘊(yùn)含的信息越多，則這個(gè)名字就越獨(dú)特，也就是說(shuō)，越不可能被別人使用；相反如果這個(gè)名字很普通，例如李娜、張艷之類，就會(huì)被大規(guī)模的重用，OK，這其實(shí)沒什么大不了的，我們的唯一身份標(biāo)識(shí)不是名字，而是身份證，但是，對(duì)于CSS樣式的命名，沖突與否可不是拉便便，擦個(gè)屁股就沒事的。

　　對(duì)于CSS，為了避免樣式?jīng)_突，我們總會(huì)給其賦予相當(dāng)特殊的命名，或是在選擇符上添加HTML標(biāo)記，或是使用層級(jí)。所謂一朝怕蛇咬，十年怕井繩。一旦我們經(jīng)歷過(guò)樣式?jīng)_突帶來(lái)的讓人吐血的麻煩后，我們可能就會(huì)時(shí)時(shí)在避免沖突上狠做文章，所謂過(guò)猶不及，結(jié)果又是一個(gè)爛攤子，本如花似玉的黃花小閨女變成個(gè)臃腫的肥妞。例如下面人人網(wǎng)的CSS命名：

　　我想我們都希望寫出精簡(jiǎn)高效的CSS代碼，如果CSS重用性越高，想必就越高效。這如人的名字一樣，如果名字越普通，越?jīng)]有含義，越容易被重用，所以CSS要想重用性高，就需要命名簡(jiǎn)單。但是，簡(jiǎn)單的命名越容易造成樣式?jīng)_突，例如.more{}。從這點(diǎn)上來(lái)說(shuō)，重用性與樣式?jīng)_突時(shí)兩個(gè)對(duì)立的矛盾體。

　　不過(guò)，萬(wàn)幸的是，這種矛盾并不是不可調(diào)和的。記住一些準(zhǔn)則/方法，CSS既可以有高度的重用性，又不會(huì)有樣式?jīng)_突的困擾。下面就將介紹這些命名方法。

　　三、面向?qū)傩缘拿椒?/h3>

　　我們習(xí)慣在CSS命名的時(shí)候摻雜語(yǔ)義，這樣可以讓代碼更易懂。例如淘寶首頁(yè)“免費(fèi)注冊(cè)”按鈕上的class名稱：help-guest-regist

　　上面的class命名語(yǔ)義就很明顯，獨(dú)眼龍看告示——一目了然，”help-guest-regist”就是”幫助-顧客-注冊(cè)”，很nice，很人性化的命名。作為在單一的首頁(yè)上使用，我是很難挑出什么毛病來(lái)的。

　　但是，從道家“無(wú)”的哲學(xué)思想來(lái)看，語(yǔ)義其實(shí)是對(duì)自身的一種束縛，越是語(yǔ)義強(qiáng)烈的命名越是沒有重用性（尤其是內(nèi)容語(yǔ)義的）。舉個(gè)實(shí)際點(diǎn)的例子，例如人人網(wǎng)的右側(cè)邊欄的標(biāo)題：//zxx:一般找這類反例我就喜歡找人人網(wǎng)還有新浪，基本上一找一個(gè)準(zhǔn)。人人網(wǎng)雖然外表長(zhǎng)得跟facebook類似，但是就CSS而言，差距不是一兩個(gè)檔次的。

　　這個(gè)標(biāo)題的class名是”side-item-header”，樣式如下圖所示：

　　現(xiàn)在一切ok，現(xiàn)在設(shè)想下，如果頁(yè)面中間的模塊有個(gè)標(biāo)題，其樣式也是：

{padding:0 0 8px; text-align:right;}

　　四、精簡(jiǎn)高效CSS命名之“三無(wú)原則”

　　此“三無(wú)原則”就是：無(wú)ID，無(wú)層級(jí)，無(wú)標(biāo)簽

　　CSS命名就應(yīng)該最簡(jiǎn)單、最直接，直搗黃龍。沒有HTML標(biāo)簽，沒有層級(jí)，這些通通滾蛋，不要。為什么不要，有三大原因：
　　1.限制重用
　　我們會(huì)使用層級(jí)(#test .test)，會(huì)使用標(biāo)簽(ul.test)，可能是習(xí)慣(沒多想)，或是為了避免沖突。但是，我跟你說(shuō)，從今以后，這種寫法讓他見鬼去吧（如果不是為了改變CSS優(yōu)先級(jí)的話）。正如開篇論述的哲學(xué)觀點(diǎn)，你限制越多，越抑制了CSS的重用性。例如#test .test{}這種寫法，里面的CSS重用性多大，完全限死在了id為test的元素下，哪有重用性可言；又如ul.test，我勒個(gè)去，這個(gè)ul標(biāo)簽十有八九就是裝飾用的，往這兒一放，同樣CSS樣式的div標(biāo)簽可以用嗎？哭爹喊娘，眼淚汪汪也不管用啊。所以，相信我，層級(jí)啊，標(biāo)簽啊什么的，通通見鬼去吧。要知道，層級(jí)啊，標(biāo)簽啊作用是什么，是用來(lái)提高CSS優(yōu)先級(jí)，把那個(gè)字母長(zhǎng)的讓人發(fā)毛的”!important”干掉的。

　　2. CSS文件大小
　　這瓜子雖小，吃多了也是可以填飽肚子的。所以，你的CSS名稱不要像老太太的裹腳布一樣，搞得又臭又長(zhǎng)，如下圖所示的人人網(wǎng)那個(gè)冗長(zhǎng)的CSS命名吧：

　　你看名稱的字節(jié)數(shù)已經(jīng)比屬性還大了，要是這些名稱都在15字符以內(nèi)，乖乖，這個(gè)CSS文件可以小個(gè)1~2K絕對(duì)沒有問(wèn)題的。你看下圖這樣子的命名，這樣子的CSS排版是不是更舒服，更簡(jiǎn)潔。

　　3.降低了渲染效率
　　來(lái)個(gè)例子考考大家（以后我面試別人可能就會(huì)考這題），HTML如下：

<div id="test">    <ul class="test"></ul></div>

it知識(shí)庫(kù)：精簡(jiǎn)高效的CSS命名準(zhǔn)則/方法，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。