css 寫法中的一些疑惑,
前提:.最近和同事對css命名有過爭論,對css命名規(guī)則有些疑惑;發(fā)出來給大家參考參考
對于CSS，為了避免樣式?jīng)_突，我們總會給其賦予相當特殊的命名，或是在選擇符上添加HTML標記，或是使用層級.因此我有思考有疑惑
1.css 勁量避免多層嵌套或者嵌套過多;
參考:
我理解,在CSS命名之“三無原則”中
例如
<div class="xxmodel">
<div class="xxmodel-child">
<div class="xxmodel-child-grandson">
</div>
</div>
</div>
<div class="xxmodel">
<div class="child">
<div class="grandson">
</div>
</div>
</div>
這樣多層結(jié)構(gòu);我們應該不用id,盡量讓變量命名有意義,盡量不要層級,
而且,css的命名要盡量語義,明確化
參考:(CSS命名規(guī)范——BEM思想（非常贊的規(guī)范）) :
http://blog.csdn.net/chenmoquan/article/details/17095465
因此,我定義了css 樣式:
.xxmodel{
xx:xx
}
.xxmodel-child{
xx:xx
}
.xxmodel-child-grandson{
xx:xx
}
這樣都是第一層級,而且可以看出他們的層級關(guān)系(有的時候也許我們需要一個parent作為一個模塊的樣式標識,來避免樣式重復
ps:這邊其實暫時沒用到張大神里面講到按功能命名的規(guī)則);
而不贊同:
.xxmodel{
xx:xx
}
.xxmodel .child {
xx:xx
};
這是某機油提出個問題:你這樣命名太長了,如果不推薦層級,那為什么sass 他自動構(gòu)建的時候是層級嵌套的?如果大家一起快速開發(fā),用sass ,人家就是這么生成的怎么辦?
對此,我啞火.我沒詳細使用過sass,對此我不能發(fā)表反駁;有看到的或許可以給我解答一下.
2.命名名稱過長,使用了駝峰
<div class="xxModel">
<div class="xxModel-child">
<div class="xxModel-child-xxBtn">
</div>
</div>
</div>
在一次css討論上.聊到多層命名上;
我們現(xiàn)在使用多層命名,我們盡量的避免命名過長,盡量語義化,那么依然有情況:我們可能描述某個模塊,使用了英文單詞拼接:比如:xxModel,通常我們單詞拼接都講究駝峰命名吧?,那么為了語義化我們寫成這樣:"xxModel-child-xxBtn"是否可以呢?
某同事提:哪有你這樣寫的啊?去看看別人誰這樣寫了?
我啞火,因為我不是別人.
駝峰規(guī)則命名沒問題,-中橫線命名沒問題,為什么加起來就有問題了,我迷惑..
如果沒看到:(CSS命名規(guī)范——BEM思想（非常贊的規(guī)范）)這篇博文的時候:
類似這樣的寫法:"site-search__button,header__logo",這樣的命名為了更語義化,更便于維護;
是不是又遭到詢問:css不都是用中橫線連接的嗎?你見過誰這樣又是中橫線又是下橫線啦?
是啊,沒見過,至少周圍沒見過,常用的ui框架也沒見過..
同樣是為了語義,為了更方便維護,咋就有區(qū)別了呢;
3.對于通用格式的命名:
第一種:mt5,mt10,mt20,mt30...
第二種:mt-s,mt-l,mt-xl,mt-xxl....
我習慣于第一種,畢竟在書寫頁面時,可以很明確的知道我需要的是什么屬性;而對于mt-s.mt-l,說實話,我開始要點進去,我才知道他代表的是什么,或許經(jīng)常使用過后大腦已經(jīng)形成了反射,瞬間知道比如:mt-xxl代表的什么
這時,同事詢問:你這樣寫,如果以后我們要改規(guī)范,修改css,mt-l不表示10了,我們表示15,我們是不是只需要改一處就可以了?你這個mt-10如果改成值mt-10{maring-top:15};讓人家怎么怎么維護,豈不是還要所有的頁面都去改一下?改錯了怎么辦?
我一時無話,我一時覺得有道理,可是總覺的少了點什么..
http://www.cnblogs.com/lyzg/p/5561001.html
我覺得,這提出的問題其實并不是問題;
借用諸葛里面有段話(他解析的時張大神的某個插件):
"首先他這部分代碼里面，包含了我們在網(wǎng)頁開發(fā)中大部分常用的css屬性，如display,height,margin,padding,border,color,font-size等。在屬性類的命名上，基本上都是采取屬性跟屬性值的縮寫。其他可說明的是：
1）width除了有固定值的屬性類定義外，還包含了百分比的屬性類定義，畢竟這個在實際工作中也時有用到；
2）margin，border，padding由于包含上下左右相關(guān)的屬性，所以他還提供了針對上下左右單邊的屬性類，方便單獨使用。
另外他的代碼都有瀏覽器兼容性方面的考慮，所以要是在自己的工作中用的話，最好是參考著他的來。
這種方法在我使用之前，我比較顧慮的是它的可維護性。因為這些屬性類很多都包含屬性值，比如.f12{font-size: 12px}，所以在html元素的class屬性值就肯定會包含f12這樣的css屬性類名，假如要修改的對應的屬性值該怎么辦呢？那么就需要修改三個地方才行：首先是屬性值定義的地方，第二是屬性類名定義的地方，最后就是在html中使用的地方。當時想到這個問題的時候，我覺得這種方法不可行，因為在實際工作中，尼瑪UI崗位的同事改設計的情況太多了，那樣的話，頁面上用到這種屬性命名類的地方都要經(jīng)常改來改去。
但是后來我發(fā)現(xiàn)，即使不用這種命名方法，我還是改變不了UI調(diào)整設計圖的情況，而且只要設計圖一改，甚至我的html結(jié)果以及我那些采用語義化命名的css類都要改，那個麻煩程度其實比用屬性命名類的方法更厲害，所以我最后就開始在項目中嘗試這個方法。結(jié)果發(fā)現(xiàn)，其實特別好用，尤其是做些文本類的排版，垂直布局，分欄布局，以及百分比布局等特別簡單高效，前面提到的那個維護的問題也很小。我有兩個方法來解決來那個問題：
1）假如原先用f12，后來設計把font-size改成14px，那么我只用再增加一個f14即可，再把原先html中需要把f12替換成f14的地方，換成f14即可。如果f12沒有別的地方用到了，我會考慮把f12再刪掉。
2）假如原先用f54，由于這種屬性類并不具備通用性，所以我可能考慮直接把f54替換成我需要的屬性類，比如f52。"
我想到這些問題:
如果只是為了避免后面修改規(guī)范的時候只需要修改一個地方;
首先,是什么情況下需要修改規(guī)范?規(guī)范在我看來這個就是一個底層的東西,除非有更好的規(guī)范替代,才去修改,而不是去修改其中的樣式數(shù)值;規(guī)范的修改應該是一個很嚴肅的問題啊,或許可以比喻數(shù)據(jù)庫的結(jié)構(gòu)呀命名呀的設計?
另外什么情況下才需要修改默認的數(shù)值?那就是ui調(diào)整的時候啦~~單獨調(diào)整一個屬性值,對整個項目的整體結(jié)構(gòu)不會有影響嗎?這個是mt.或許真不會,最多什么地方丑點,其他的呢?比如:fz-xl?會不會出現(xiàn)錯位,擠壓?
而且,輪到這種全局修改的情況了,真的整體的ui不會動嗎?我是不信的..(同事說你去看看阿里,京東他們怎么寫的....我啞火,寶寶淚崩.沒去過...實在說不出來,大公司肯定有非常嚴謹?shù)囊?guī)范我信.但隨意改規(guī)范我還是不信的..);
所以,直觀一點貌似也沒什么錯?..
或許我可以講一下,你看人家也是這么寫的....(噗).
:
個人觀點,小結(jié):
為什么要有規(guī)范,為的是 保持 CSS 易于維護,保持代碼清晰易懂,保持 CSS 的可拓展性
不光光是css,我們規(guī)范為的是方便大家協(xié)同開發(fā),整體風格嚴謹;規(guī)范的代碼可以促進團隊合作;減少bug率;降低維護成本,幫助代碼走查..太多了.
至于爭論規(guī)范到底是什么. 哪種才是最好的?
用我們大佬一句話:別吵了,我們這里就是這個規(guī)范!很霸道,很霸氣對不對?沒錯就是這么霸氣,就是這么對!
首先:
1規(guī)范是人定的.每個人的標準或多或少都不不一樣,世上沒有兩片相同的葉子,我們css可以使用中橫線-,因為這樣也的確比較方便直觀,你也許認為駝峰方便(或許現(xiàn)在并沒有強烈的,明確的解釋為什么css 不可以使用駝峰?),那就用駝峰;
2,規(guī)范是人用的,規(guī)范是我們自己,我們的團隊,我們自己的團隊需要用的,他是方便互相協(xié)同的,不是用來爭的,有個規(guī)范,大家按著規(guī)范走就可以了,規(guī)范團隊經(jīng)理可以定,你可以定,我可以定,大家都能定,你一個人,你定的你自己嚴格遵照;團隊定的,嚴格遵從就行了;開發(fā)的規(guī)范出發(fā)目的一切還是為了更快更好的開發(fā).其他行業(yè)的規(guī)范不也如此?
也許,我們也可以是他人口中的別人家的規(guī)范(孩子)?保持好奇心,求同而存異,團隊至上.
