### 筆記 > class跟id不一樣，class本來就是設計用來可以重復利用的，而id才是設計唯一的（如果遵循BEM，class幾乎也都是唯一的了）。 這個重用分為：**當前頁面多處使用**，和 **多個頁面可以使用**，比如 #container 是屬于后者，當然了也有兩種情況都有的。 不過我們也不必要糾結這么細，不要總感覺如果寫了一個樣式，只能在一個地方用一次（指上面兩種情況都不滿足）的話，就很吃虧了，很浪費，總抱有這種想法是不對的（**玻璃心，處女座，強迫癥，偏執狂，完美主義者的人真的活得好累啊**），計算機沒你想的那么矯情和脆弱的，你別擔心它，你還是多擔心自己吧，能重用固然是很好，可總有些特殊的東西啊，真正的完美就是能夠包容不完美，當你能夠接納自己的不完美的時候，很多東西就會有細微的變化，一切都會向好的方向去發展的。 [是什么阻礙了代碼的重用？問題是否應該只解決一次即可？ - 知乎](https://www.zhihu.com/question/21011591) >[danger] 因為復用并非無代價，而且代價往往還很高。 * * * * * > 四、讓規則越具體越好 >不要試圖編寫像 ol li a 這樣的長選擇符，最好是創建一個像.list-anchor一樣的類，并把它添加到適當的元素上。 具體是語義明確，清晰，而不是照搬DOM結構才叫具體，以前犯了好多錯誤啊。 無論多復雜的東西，也能分門別類，如果不能，那只能說明類別太多了。（世上萬物都有其位置，都有其定律） 不過我們也不要糾結于這么細，不要總感覺，如果寫一個樣式，只在一個地方用一次（上面兩種情況都不滿足）那就很吃虧了，能重用固然是很好，可總有些特殊的東西啊，真正的完美就是能夠包容不完美。 * * * * * class用于標識某一個類型的對象，命名必須言簡意賅。 命名分為：面向屬性的命名（原子性，比如顏色），面向“語義”的命名（業務邏輯的語義） 這一切都是為了css命名語義化 * * * * * ### CSS的屬性有： 位置類：定位，寬高，邊框，內外邊距，位置等 外觀類：文字大小，顏色，背景顏色，CSS3顏色等，邊框顏色、圓角等等 * * * * * ### 元素在面向業務是反而屬性有： 位置類：在頁面中位置，頂部，尾部，側邊，是否居中，寬高，等等 外觀類：狀態，選中，當前，危險，提示等等 * * * * * ### 命名是抽象的 或者說是抽象與具體結合的，但其實，具體也是抽象的，世間萬物都是抽象的。 我們來看人名，比如說，馬蓉這個名字： 馬為姓名，表示她姓馬，從而可知他爸爸姓馬，可能還能知道是什么筆派的。 蓉為名，一歲一枯榮，蓉是花的意思，一般只有女孩的名字才會出現這個字。父母給她起這個是希望她健康，像花兒一樣成長，成長環境，家庭的熏陶決定了孩子的性格，所以根據這個名字基本可以猜測這個女孩的性格了。 名字是抽象的，你可以說它有意義，也可以說她沒意義，在于你怎么理解。 根據上下文關系，情景，我們把一些詞歸為，動詞，名詞，形容詞，主謂賓，其實這些概念就是人們創造出來的，創造出來的那么它的本質就是抽象的，世間萬物本是不存在的，世間萬物其實都是抽象的，**為什么要抽象，因為要具體**，人們希望對事物更加了解，具體，所以才抽象出來很多東西，形成共識，這就是我們掌握知識的基礎。 命名時首先列出這個事物的幾個關鍵對象，比如側邊，關聯，容器，記錄，關聯操作等等，先找出這些關鍵對象，在對它進行抽象。 * * * * * ### 掌握知識技巧 學習任何東西都是應該抱有目的性的，就像當初學html一樣，學到用的時候才知道怎么學，順其自然的就會用css了，就知道class的好處了，會用class擺脫將樣式寫在元素上的痛苦了，這一切就是那么自然。 當你學習后，親身做過，在這個過程中，你自然就掌握知識了。 * * * * * ### 什么是完美？ * * * * * [內存鎖與內存事務 - 劉小兵2014](https://my.oschina.net/digerl/blog/34001#tt_daymode=1) > 如果世界已經是完美的，為什么我們還需要工作呢？ * * * * * [關于糾結](http://www.hmoore.net/xiak/product/344394) > 人生苦短，要做更有意義的事 [程序員為什么要一直改BUG，為什么不能一次性把代碼寫好？ · php筆記 · 看云](http://www.hmoore.net/xiak/php-node/574447) > 比如網絡通信協議，同樣不完美，但我們不能等到完美那一天才上網。 * * * * * [Java 老矣，尚能飯否？](https://mp.weixin.qq.com/s/HTleF2EVow3q6BMe_Cm4YA) >[info] 1998 年 12 月，Java 第一個里程碑式的版本，即 Java 1.2 發布了。這個版本使用了 JIT（Just in time）編譯器技術，**使得語言的可遷移性和執行效率達到最優的平衡**，同時 Collections 集合類設計優良，在企業應用開發中迅速得到了廣泛使用。 >[danger] 沒有東西是完美的，只能在某個點上達到一個平衡，趨于完美。至于平衡向那邊傾斜，這取決于你的當下的具體情況，任何事物都是相對的，沒有絕對的，站在這個點是最好的，站在另外一個點就是完全不同了，所以永遠記住，任何事都是相對的。 * * * * * [css行高line-height的一些深入理解及應用 ? 張鑫旭-鑫空間-鑫生活](https://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/) > 文字 px 高？并不是。 [去除inline-block元素間間距的N種方法 ? 張鑫旭-鑫空間-鑫生活](https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/) > 無法要求我們源代碼中去除空格和換行，對精度細節有要求的話，只能設置font-size:0了。 [使用 box-shadow 進行畫圖](https://mp.weixin.qq.com/s/q_c5r-fVJ3AvpDcJCUQUxA) ***** [你所不知道的 CSS 陰影技巧與細節](https://mp.weixin.qq.com/s/6hSW1A1uMY7CwvkPgQxSEw) [Vue: scoped 樣式與 CSS Module 對比](https://mp.weixin.qq.com/s/FoDei2gy0Mtqy608FOxGwQ) [你未必知道的CSS故事：揭開leading的面紗](https://mp.weixin.qq.com/s/CsETZ7Ad3vkDpIo6zDufFg) [什么是關鍵 CSS]([https://mp.weixin.qq.com/s?\_\_biz=MzA5NzkwNDk3MQ==&mid=2650585406&idx=1&sn=862751889d949b987bf8c238b6053a18&source=41#wechat\_redirect](https://mp.weixin.qq.com/s?__biz=MzA5NzkwNDk3MQ==&mid=2650585406&idx=1&sn=862751889d949b987bf8c238b6053a18&source=41#wechat_redirect)) [生成精靈圖 工具網站推薦](https://www.toptal.com/developers/css/sprite-generator/) [精靈圖自動檢測工具網站推薦](http://www.spritecow.com/) [這33個超級好用的 CSS 選擇器，你可能見都沒見過](https://mp.weixin.qq.com/s/o1ECWAYh_Atuk8iVmCibjw) * * * * * update time：2017-8-24 01:18:14