成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS哲學(xué)偽命題

Shimmer / 1448人閱讀

摘要：最早遇到的大概的是命名的問題了吧，因?yàn)楸旧矸e累的詞匯量就少，動(dòng)不動(dòng)就沒單詞可用了。用于解決項(xiàng)目命名規(guī)則問題。其哲學(xué)理念是模塊化，功能單一性，關(guān)注點(diǎn)分離。借助而解決了中的命名空間的問題，使得單文件變得簡(jiǎn)單清晰。

標(biāo)題黨。這篇文章斷斷續(xù)續(xù)的修改過好幾次，也沒有滿意，本來是想總結(jié)一下我這些零散的 CSS 知識(shí)結(jié)構(gòu)，可能由于知識(shí)體系不全面，總是沒能把知識(shí)點(diǎn)串聯(lián)成一個(gè)通順的內(nèi)容。貼出來權(quán)當(dāng)大家一起討論下“前世今生”。文章后續(xù)可能會(huì)不定時(shí)更新。

CSS 作為 Web 的基礎(chǔ)部分，極其容易上手。但是 CSS 并不算的上是一門編程語言，在語言能力上略顯薄弱，往往導(dǎo)致整體的維護(hù)性變差。但是這并沒有使得大家停止對(duì) CSS 的探索，從命名規(guī)范，目錄架構(gòu)，預(yù)處理器(如SASS)，后處理器（PostCSS），模塊化等等的方向上，努力把 CSS 變得更好。

關(guān)于自我歷程

其實(shí)我自己并沒有系統(tǒng)的學(xué)習(xí)過 CSS（雖然我現(xiàn)在也不知道如何系統(tǒng)的學(xué)習(xí)），看了幾個(gè)視頻，掃了下中文版的 API，然后就開始了切圖生涯，很多的知識(shí)點(diǎn)也都是后來一些零散的博客中了解到的。這過程中，的的確確踩過不少的坑，有的填了，有的繼續(xù)禍害著項(xiàng)目里其它的同學(xué)。也導(dǎo)致我在很長(zhǎng)的時(shí)段時(shí)間里都是走在一個(gè)混亂無序的 CSS 書寫當(dāng)中。

最早遇到的大概的是命名的問題了吧，因?yàn)楸旧矸e累的詞匯量就少，動(dòng)不動(dòng)就沒單詞可用了。那個(gè)時(shí)候好像也就是網(wǎng)上列出一大堆像menu， siderbar之類的“命名大全”來模仿。再到后來接觸到了 Bootstrap 這種比較系統(tǒng)的框架（里面有好多可以值得借鑒的地方），而后又看到一些按類別劃分文件，再配有特有的前綴的管理方式(那個(gè)時(shí)候還并不知道 SMACSS 的名詞)，還有一些原子化，把功能和樣式分離等等的。在 SASS 興起的時(shí)候其實(shí)挺興奮的，因?yàn)榻K于感覺有了點(diǎn)編程的能力，當(dāng)然了，對(duì)變量，嵌套，mixins等等的使用，很大程度上提高了編程效率。在后來同事的分享中，又了解了 BEM 的命名方式（初看很亂，了解后有一種豁然開然的感覺，細(xì)細(xì)回想起來，也就是大家約定一套共用的命名規(guī)范）。以及通過 PostCSS 去實(shí)現(xiàn) CSS 中一些自動(dòng)處理的任務(wù)。在 React/ES6/Webpack 出現(xiàn)后，使得很大一部分程度上，CSS 寫在 JS 中的方式也開始在特定的場(chǎng)合中頻頻出現(xiàn)。

以上，通通出現(xiàn)過我的項(xiàng)目中，在項(xiàng)目切換維護(hù)的時(shí)候，那感覺，心如刀割。并不是說上面涉及到的知識(shí)點(diǎn)有對(duì)錯(cuò)的問題，只是在一個(gè)團(tuán)隊(duì)中，如果沒有一些統(tǒng)一的架構(gòu)和約定，往往到項(xiàng)目的后期會(huì)變得越來越不穩(wěn)定。這不禁又讓我想起了 CSS 的學(xué)習(xí)曲線（像PHP？又來黑了），樣式大家都能寫，能愉快的維護(hù)，又是另一個(gè)層次了。

個(gè)人覺得 CSS 中有兩個(gè)比較重要的點(diǎn)，語義化和可維護(hù)性，而最終都是為了提高開發(fā)的效率。

語義化很大一部分程度上是為了閱讀需要，簡(jiǎn)易明了。建議團(tuán)隊(duì)內(nèi)還是要盡量的保持風(fēng)格一致。其它的，可以看一下CSS語義思維的內(nèi)容，這里不展開講了。

可維護(hù)性真的是一個(gè)很虛的概念，但是涉及到了多方面的各個(gè)點(diǎn)。比如，該怎么保持項(xiàng)目的簡(jiǎn)單性，靈活性，而同時(shí)又有足夠的擴(kuò)展能力？又比如如何抽取模塊，是以功能劃分還是以樣式結(jié)構(gòu)？如何重用樣式？如何防止樣式被覆蓋，避免冗余代碼等等。

除了一次性的單頁面這種外，一般項(xiàng)目類型的，都建議在開始的時(shí)候就搭好底層，統(tǒng)一一下整體風(fēng)格與使用習(xí)慣，保持良好組織結(jié)構(gòu)，命名規(guī)范，不然越往后面，可能會(huì)遇到更大的問題。

比如，對(duì)文件做一個(gè)層次劃分

基礎(chǔ)框架（reset，iconfont，柵格）

通用模塊（原子，統(tǒng)一規(guī)范的模塊）

頁面樣式（繼承通用模塊）

采用類似 BEM/SUIT 等等的命名方式等等。

現(xiàn)有的技術(shù)選擇

其實(shí)我們?cè)谄綍r(shí)應(yīng)該或多或少的接觸過一些 SASS, Compass, BEM, SMACSS, OOCSS 的概念與設(shè)計(jì)模式。當(dāng)然并沒有一種解決方案是絕對(duì)的，合適當(dāng)前的項(xiàng)目就可以了。

BEM

用于解決項(xiàng)目命名規(guī)則問題。BEM 通過已block(塊)，element(元素)，modifier(修飾符) 的概念，使用連接符串聯(lián)父級(jí)塊作為前綴，來實(shí)現(xiàn)功能模塊命名的唯一性。有興趣的同學(xué)可以看一下 BEM的進(jìn)化史。發(fā)現(xiàn)一句話并不太好表述清楚，想要具體了解的同學(xué)可以移步官網(wǎng)。

BEM 這種唯一性以及元素間的平級(jí)展開，往往在稍微復(fù)雜一點(diǎn)的項(xiàng)目里，就會(huì)把名字命名的很長(zhǎng)很長(zhǎng)。目前也有很多是在 BEM 的基礎(chǔ)上衍生出來的一些方式(如 SUIT)。

OOCSS （Object Oriented CSS）

面向?qū)ο?CSS。是一種已面向?qū)ο蟮木S護(hù)方式去管理組織 CSS 代碼。其哲學(xué)理念是模塊化，功能單一性，關(guān)注點(diǎn)分離。

OOCSS 中有兩個(gè)重要的原則

結(jié)構(gòu)和外觀分離。樣式盡量獨(dú)立，和 DOM 無關(guān)

容器和內(nèi)容分離。CSS 只關(guān)注內(nèi)容

OOCSS 與 SASS 結(jié)合是一個(gè)不錯(cuò)的選擇，充分強(qiáng)大。

SMACSS(Scalable and Modular Architecture for CSS)

可擴(kuò)展和模塊化 CSS。
把 CSS 樣式劃分為若干個(gè)不同類別的文件，如基礎(chǔ)，布局，模塊，主題等等。在加上一些特有前綴的組合。

ACSS (Atomic CSS)

原子化 CSS。遵循關(guān)注點(diǎn)分離原則。

CSS 模塊化

隨著 React 的迅速引爆，其它關(guān)于 CSS 的另一種使用方式也在興起。將樣式在 JS 中定義。借助 require/import 而解決了 CSS 中的命名空間的問題，使得單文件變得簡(jiǎn)單清晰。而通過組合，也可以實(shí)現(xiàn)快速的重復(fù)利用。甚至有些 CSS 可以多帶帶與組件去綁定。

以及其它的一些方式。上述的方式，是比較讓我眼前一亮的感覺。

未來走向

待補(bǔ)充...

擴(kuò)展閱讀

CSS模塊(中文翻譯版)

CSS 規(guī)范和最佳實(shí)踐

BEM 進(jìn)化史

如何理解 CSS 類名語義化

CSS 分層

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115073.html

相關(guān)文章

  • 3月份前端資源分享

    摘要：面試如何防騙一份優(yōu)秀的前端開發(fā)工程師簡(jiǎn)歷是怎么樣的作為，有哪些一般人我都告訴他，但是他都不聽的忠告如何面試前端工程師 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfront/mo... 3月份前端資源分享 1. Javascript 使用judge.js做信息判斷 javascript...

    nanchen2251 評(píng)論0 收藏0

  • 物聯(lián)網(wǎng)+區(qū)塊鏈到底是不是一道偽命題？

    摘要：每逢提及物聯(lián)網(wǎng)，后頭必然跟著區(qū)塊鏈提到區(qū)塊鏈，也必須將物聯(lián)網(wǎng)帶入話題。而最嚴(yán)重的，則是物聯(lián)網(wǎng)的安全問題。物聯(lián)網(wǎng)領(lǐng)域的網(wǎng)絡(luò)攻擊頻繁已成現(xiàn)實(shí)，就是去年最令人難忘的一個(gè)物聯(lián)網(wǎng)僵尸網(wǎng)絡(luò)。 showImg(https://segmentfault.com/img/bV8pXD?w=2480&h=1274); 不知從什么時(shí)候開始，物聯(lián)網(wǎng)與區(qū)塊鏈深深地扯上了關(guān)系，并且在今年有愈演愈烈之勢(shì)。每逢提及物...

    cartoon 評(píng)論0 收藏0

  • 世界上究竟有多少種云計(jì)算？這其實(shí)是個(gè)偽命題

    摘要：事實(shí)上，云計(jì)算本質(zhì)上就是開源的，尤其對(duì)于阿里云所專注的公有云服務(wù)領(lǐng)域更是如此。從用戶思維來看世界上根本沒那么多云在筆者看來，不管是自主可控還是開源，抑或是其他形式標(biāo)榜自身的云計(jì)算，其實(shí)都是從自身角度出發(fā)的自說自話。兩個(gè)多月前，阿里云的一句：中國只有兩種云，一種是拿來主義的云，一種是自主可控的飛天云。引發(fā)了業(yè)界的廣泛吐槽，不過很多人嘴上雖然不服氣，可心里也沒脾氣?。赫l讓阿里云是中國公有云市場(chǎng)的...

    FWHeart 評(píng)論0 收藏0

  • SaaS顛覆傳統(tǒng)軟件是不是個(gè)偽命題？

    摘要：確保一次性上線成功。而對(duì)于高難度的需咨詢解決的問題，則應(yīng)盡量避免納入交付范圍。需求，管理策略問題采購權(quán)分散，造成采購源混亂且采購成本虛高。需求，基礎(chǔ)數(shù)據(jù)問題沒有統(tǒng)一的物資編碼規(guī)則，一物多碼現(xiàn)象嚴(yán)重。編者按：本文作者王戴明是具有12年信息化咨詢與管理經(jīng)驗(yàn)的行業(yè)老兵，他通過對(duì)行業(yè)的觀察以及與曾經(jīng)客戶的交流發(fā)現(xiàn)，即便近幾年SaaS的概念炒得火熱，但客戶本身和客戶的需求其實(shí)一直都沒有發(fā)生太大的變化。...

    Dr_Noooo 評(píng)論0 收藏0

  • CSS選擇器概述

    摘要：常用于鏈接描點(diǎn)上用戶行為選擇器選擇匹配的元素，且匹配元素被激活。，選擇的是奇數(shù)項(xiàng)，而使用選擇的卻是偶數(shù)項(xiàng)否定偽類選擇器選擇器功能描述匹配所有除元素外的元素屬性選擇器語法選擇器功能描述用于選取帶有指定屬性的元素。 CSS選擇器概述 一.CSS3 選擇器分類 showImg(https://segmentfault.com/img/bVbbO88?w=805&h=422); 二.選擇器語法...

    wangjuntytl 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<