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

資訊專欄INFORMATION COLUMN

(css/js)如何起個(gè)好名字

Rainie / 760人閱讀

摘要：就會(huì)給起名表示求和函數(shù)，漸漸地知道最好用英語給變量或者是函數(shù)名起名字，盡管有時(shí)候英語不好，那就翻翻有道吧。所以有一段時(shí)間的命名是很長的兩三個(gè)單詞的駝峰法命名。

什么鬼，又不知道怎么命名class了
直接進(jìn)入正文

記得大一學(xué)C語言的時(shí)候，那個(gè)時(shí)候根本沒把這當(dāng)回事吧。
所謂的混沌階段
變量名，函數(shù)名，隨意吧，那個(gè)時(shí)候?qū)懞唵蔚豤程序，就好像寫著玩，就算復(fù)雜點(diǎn)得也不過一二百行，所以變量名什么的，可能就會(huì)起a b c s s1 s2...

后來漸漸地代碼寫多了點(diǎn)，才發(fā)現(xiàn)也不能隨便起名字吧，稍微有意義一點(diǎn)的。
就會(huì)給起名sum()表示求和函數(shù)，漸漸地知道最好用英語給變量或者是函數(shù)名起名字，盡管有時(shí)候英語不好，那就翻翻有道吧。

再后來工作，走上前端這條路了，恩，前端可是細(xì)致活，有一段時(shí)間覺得前端真是沒意思啊，寫div布局，調(diào)css樣式，就只是為了對對齊，1px的移動(dòng)感覺也并沒有好看很多啊，而且里面那么多元素id到還好反正一個(gè)頁面就一個(gè)，也用的少，class就特別多，代碼量少一點(diǎn)的，布局清晰一點(diǎn)的頁面還好，沒有那么多class名字。接觸到比較大的項(xiàng)目，有很多頁面模塊，每個(gè)模塊的內(nèi)容又有點(diǎn)相似，class很多，寫新頁面的時(shí)候會(huì)時(shí)不時(shí)地思考怎么給這個(gè)class起個(gè)不會(huì)重復(fù)又達(dá)意的名字。那個(gè)時(shí)候，TL和我們說，變量名長一點(diǎn)沒關(guān)系不要讓人看不懂，一個(gè)單詞縮寫不要縮寫到兩三個(gè)字母讓人看不懂。所以有一段時(shí)間的命名是很長的兩三個(gè)單詞的駝峰法命名。

看一些前端框架庫，看他們的命名感覺都挺好的，至少看著舒心，不繁瑣而且挺達(dá)意的。特別是-短杠的用法，之前看bootstrap，覺得挺好的，我之前的做法總是駝峰法命名，比如寫一個(gè)商店的div如下

只是一個(gè)例子，上述層級只有兩級描述商店內(nèi)容的相關(guān)信息，要是再接下去
shopGood下的分級描述有哪些類型的商品 我估計(jì)就起名
shopGoodFood shopGoodBook shopGoodTool...

這樣如果頁面少，也還好，主要是當(dāng)項(xiàng)目有很多頁面時(shí)候，這里命名了個(gè)shop 可能在別的地方又命名了個(gè)shop 很有體會(huì)，許多時(shí)候剛要給起個(gè)名字，智能提示已經(jīng)存在了，然后有想換個(gè)啥呢總不能shop2

吐槽 歸吐槽，總之，也是慢慢地在寫代碼的過程中形成自己的一套好一點(diǎn)的命名規(guī)范和風(fēng)格吧，第一要?jiǎng)?wù)是要寫的能讓別人看頁面布局 通過className DOM元素的意義關(guān)系 一目了然，可維護(hù)吧。

--------------------

正文開始分割線

--------------------------

在命名方面的一些自我總結(jié)

命名盡量用英語，好幾個(gè)英語單詞合成的名稱，可以縮寫，但前提能看懂意思，不然長點(diǎn)就長一點(diǎn)

我還是習(xí)慣駝峰命名規(guī)則，helloWorld

對一些元素的命名可以在后面加上這個(gè)元素名比如cancelBtn productListTable

- 我覺得shopName 有時(shí)候可能shop-name 會(huì)不會(huì)看上去好一點(diǎn)呢(層級多一點(diǎn)話)

盡量減少不必要的class 比如對于ul li這樣的，做好父級的命名

常用的class命名

其他

一些樣式處理 Tips

因?yàn)闉g覽器自帶各自的樣式處理css，所以需要一套自己的reset.css

公共基礎(chǔ)的樣式簡寫在common.css

今天寫想寫這個(gè)就是因?yàn)槠鹈趾脽┯X得，看看別人怎么做的，果然找到了很多可以學(xué)習(xí)的文章,再貼一遍
什么鬼，又不知道怎么命名class了
概要知識點(diǎn)：

BEM 命名 block element modifier

常見的class關(guān)鍵詞 布局類/包裹類/大小類/狀態(tài)類...

定制簡單地規(guī)則 利用中劃線- 名稱前綴/后綴...

修飾關(guān)鍵詞 header縮寫hd .modal-hd .article-hd...

層級/樣式范圍

關(guān)于BEM CSS命名規(guī)范的幾篇文章
為什么我們需要BEM
BEM —— 源自Yandex的CSS 命名方法論
NEC-CSS規(guī)范

關(guān)于 如何編寫公共的css文件(common.css)的幾篇文章
如何編寫公共的css文件 如何讓css文件更規(guī)范

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

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

相關(guān)文章

  • 爬蟲 - 收藏集 - 掘金

    摘要：在這之前，還是有必要對一些概念超輕量級反爬蟲方案后端掘金前言爬蟲和反爬蟲日益成為每家公司的標(biāo)配系統(tǒng)。 爬蟲修煉之道——從網(wǎng)頁中提取結(jié)構(gòu)化數(shù)據(jù)并保存（以爬取糗百文本板塊所有糗事為例） - 后端 - 掘金歡迎大家關(guān)注我的專題：爬蟲修煉之道 上篇 爬蟲修煉之道——編寫一個(gè)爬取多頁面的網(wǎng)絡(luò)爬蟲主要講解了如何使用python編寫一個(gè)可以下載多頁面的爬蟲，如何將相對URL轉(zhuǎn)為絕對URL，如何限速，...

    1fe1se 評論0 收藏0

  • 小白的邊學(xué)邊寫，一個(gè)基于laravel的APP接口【API】（二）

    摘要：當(dāng)注冊成功以后，我們應(yīng)該立即返回確認(rèn)用戶登錄的值，并且作為的變量給儲存起來，直到退出時(shí)刪除，或者超出時(shí)間后刪除。在文檔里也有提及，對，就是那個(gè)叫的東東。用戶信息也被正常寫入，之后就可以歡快的擴(kuò)展注冊機(jī)制啦。 前言 根據(jù)上一篇文章，我們已經(jīng)吧dingo/api給安裝并且調(diào)試好了，那么下一步，就是來完善咱們的API了。最首要的步驟一定是要先把注冊的功能給完善了，好了，那就給第一條正式API...

    skinner 評論0 收藏0

  • 小白的邊學(xué)邊寫，一個(gè)基于laravel的APP接口【API】（二）

    摘要：當(dāng)注冊成功以后，我們應(yīng)該立即返回確認(rèn)用戶登錄的值，并且作為的變量給儲存起來，直到退出時(shí)刪除，或者超出時(shí)間后刪除。在文檔里也有提及，對，就是那個(gè)叫的東東。用戶信息也被正常寫入，之后就可以歡快的擴(kuò)展注冊機(jī)制啦。 前言 根據(jù)上一篇文章，我們已經(jīng)吧dingo/api給安裝并且調(diào)試好了，那么下一步，就是來完善咱們的API了。最首要的步驟一定是要先把注冊的功能給完善了，好了，那就給第一條正式API...

    jlanglang 評論0 收藏0

  • JavaScript 回顧學(xué)習(xí)：變量

    摘要：變量的分類全局變量可以在任何地方使用的變量局部變量在函數(shù)內(nèi)聲明的變量只在函數(shù)內(nèi)有定義，作用域是局部性的什么時(shí)候使用當(dāng)一個(gè)數(shù)據(jù)需要被反復(fù)使用時(shí)，就要先保存在變量中。 第一篇回顧學(xué)習(xí)，變量 什么是變量 變量就是在內(nèi)存中刨一個(gè)坑存一個(gè)數(shù)據(jù)，再給這個(gè)坑起個(gè)名。為什么要給一個(gè)加引號呢，因?yàn)镴avaScript是松散類型的，即一個(gè)變量可以用來保存任何類型的數(shù)據(jù)。變量的分類：全局變量：可以在任何地方...

    KitorinZero 評論0 收藏0

發(fā)表評論

0條評論

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