標籤:

一些編寫css的建議

來源:一些編寫css的建議 [鋒子的博客]

作者:鋒子

javascripty已經走上工程化的道路了,各種mvm,mvvm框架已經讓人目不暇接了,這裡就不討論js了。我來講下我在實際工作中編寫CSS的一些經驗吧,當然很多人也總結過這樣的經驗,我說的肯定沒有哪些大牛寫的好,我只是簡單的把自己的工作經驗拿出來與大家分享下。

工欲善其事,必先利其器

在編寫css的時候,你需要至少掌握一個開發工具,無論是SASS,還是LESS,本質上來說他們一樣的,只是語法有點不一樣。如果你還是在純手寫css,那麼請儘快了解它們,並根據自己的習慣選擇其中一個並使用他們。個人而言,我比較喜歡sass,更符合我的書寫習慣。也有很多人喜歡Less,他們覺得less語法更加便捷。

什麼SASS/LESS

SASS(LESS)是CSS3的一個擴展,增加了規則嵌套、變數、混合、選擇器繼承等等。通過使用命令行的工具或WEB框架插件把它轉換成標準的、格式良好的CSS代碼。

為什麼需要SASS/LESS

它們作為一個開發工具,提供了許多便利的寫法,大大節省了設計者的時間,使得CSS的開發,變得簡單和可維護。

它們也是編寫模塊化、可維護的CSS的基石。

該如何使用

網上關於SASS/LESS的教程一大堆,我這裡不浪費篇幅寫基本語法了。

推薦幾個學習他們的網址,它們都差不多,學了一個基本都可以使用了:

SASS

  • SASS中文文檔
  • SASS用法指南-阮一峰
  • SASS入門

LESS

  • LESS中文網
  • LESS入門

下面的內容我用SASS舉例,內容不限於SASS,LESS同樣適用!

神說,無規矩不成方圓

是的,無規矩不成方圓,你需要了解一種css命名規範或者制定自己的規範(不建議自定義,不利於團隊合作);

為什麼需要有一種命名規範呢?

當你編寫過大量css時候,你就發現沒有一種有效的命名規範會讓你痛不欲生。如果你在一個稍微大一點的項目中,或者在與其他人合作開發的過程,這種感覺特別明顯。因為當你為css命名的時候會發現這個命名在別的地方使用了,或者隊友已經使用過了,你必須重新命名。久而久之,css的命名就會雜亂無章而且又臭又長,一眼望去根本猜不到這個命名的意義。

BEM命名規範

各種命名規範是仁者見仁,智者見智,在這裡我介紹下BEM命名規範,我介紹的不一定就是適合你的,你需要自己思考何種命名規範適合自己。。

BEM是由Yandex團隊提出的一種CSS Class 命名方法,旨在更好的創建CSS/Sass模塊。

BEM的意思就是塊(block)、元素(element)、修飾符(modifier)。

  • block: 可以理解為一個區域、一個組件或者一個塊級元素,具體如何區分需要根據實際情況具體分析;
  • block__element: 就是一個上面的block裡面的元素,比如說導航(nav:block)裡面有a標籤(a: element)就是一個元素, block與element使用兩個下劃線鏈接;
  • block__element–modifier: 我的理解是狀態或屬性。比如element裡面的a標籤,它有active、hover、normal三種狀態,這三種狀態就是modifier。midifier是使用兩個「–」中橫線連接

就上面所說的例子我用實際的代碼來示範下:

<!-- HTML結構 -->n<nav class="nav">n <a href="#" class="nav__item nav__item--active">當前頁:active</a>n <a href="#" class="nav__item nav__item--hover">假設滑鼠在這裡要加個hover的class</a>n <a href="#" class="nav__item nav__item--normal">假設需要加個normar的狀態</a>n</nav>n

// SASS寫法n.nav{n &__item{n &--active{n <!-- active樣式 -->n }n &--hover{n <!-- hover樣式 -->n }n &--normal{n <!-- normal樣式 -->n }n }n}n

/* 編譯後的css */n.nav{ }n.nav__item{ }n.nav__item--active{ }n.nav__item--hover{ }n.nav__item--normal{ }n

從上面的例子可以一眼看出css的含義,而且編譯後的css沒有任何的嵌套,但是SASS的結構卻很清晰,一目了然。

由此可見,使用SASS配合BEM可以寫出一份易讀、可維護、模塊化的代碼;

神說,我不認識你

一份可讀性的SASS必須有一份說明,一個文件,一個函數都需要一份說明。

對於一份SASS文件,你至少需要說明兩點,這份SASS是公用還是私有、哪個頁面哪個部分

@charset "utf-8"n/*n* 預定義函數n* author:xxxn* time:xxxx-xx-xxn*/n/*n* 清除浮動n* use: @include clearfix();n* author: xxxn* time: xxxx-xx-xxn*/n@mixin clearfix(){n *zoom: 1;n &:before,n &:after {n content: "";n display: table;n }n &:after {n clear: both;n overflow: hidden;n }n}n

神說,世界要統一

  • reset

css reset必不可少,網上有很多css reset的代碼,compass也有reset的module,只需要@import 「compass/reset」。如果你覺得這些代碼太冗餘,太多,你至少需要保證你的css有margin和padding的reset,這樣才可以保證在各個瀏覽器中css有相同的樣式。

*{n margin: 0;n padding: 0;n}n

  • border-box

*{n box-sizing: border-boxn}n

建議border-box,更好的計算box寬高。

神說,要有variables(變數)

一份可維護的SASS,首先需要有一份variables,這是提高開發效率基礎,也是確保頁面一致性的基石。

什麼是variables

variables就是說你需要在編寫SASS前定義一份變數表,將項目需要用到的一些基本的樣式通過變數保存起來。

舉個例子來說:

你拿到一個項目的設計稿,在編寫CSS之前,你需要快速瀏覽設計稿,找出其中相同的元素(沒有必要很詳細,先將視線能分辨的元素用變數保存起來,其他的可以在以後使用的再添加)。

那麼問題又來了,什麼是相同元素呢?

  • 間距/行距/邊距
  • 字型大小
  • 顏色
  • 層級
  • 高度
  • ……

為什麼需要variables

使用一份單獨的variables,好處很多,最大的好久就是可維護性,誰用誰知道!

可維護性

  • 等你開發完了,拿給設計師驗收,設計師說這裡不好,換個顏色!—— 沒事,我改個變數!
  • 產品說,這裡不好,列表間距太大了,小屏幕只顯示那麼一點點!—— 沒事,我改個變數!
  • 來來來,產品說我們換一套皮膚! —— 沒事,我重新定義一份變數!
  • ……

這些例子可以讓你明白有一份variables是多麼重要了吧。其實這些只是在可維護方面的好處。作為一名前端,我們是最接近用戶的工程師,我們不能僅僅停留在代碼層面,更需要的是站在用戶體驗的角度思考問題,而variables可以讓我們有一套規範,確保頁面一致性。

一致性

FE是面向用戶的,我們需要對用戶負責。設計師在設計頁面的時候,不能所有的像素的都很精確,不可能每次的顏色都是毫無差錯的。所以在這時候,就需要規範了,如果設計師沒有規範,那我們自己制定一套規範。例如:

  • 同一個項目,一個頁面的列表高度是20px,另一個頁面的列表是21px,這時我們無需理會,直接使用我們之前定義的列表高度進行開發。
  • 同一個頁面,有兩個error的顏色#dc4c4c和#d84a4a,我們也無需理會,使用統一的error顏色變數;

這些是用戶體驗的細節,通過一份variables可以讓我們保持頁面的一致性。

這裡只是略微提下用戶體驗,之後我再寫一篇《前端工程師必須重視的用戶體驗》來詳細講解下用戶體驗。

module(模塊化,基於SASS/LESS)

模塊化在js中經常聽到,對於css來說,模塊化對於易讀性和可維護性同樣重要。那麼如何來做模塊化呢?

多文件夾

建立多個文件夾,分類存放sass文件。例如:將variables、mixin、公共樣式、私有樣式分成多個文件夾存放;

多文件

同一個文件夾的sass可以按模塊、功能等等分成多個文件,最終用@import 導入

這樣說的有點粗糙,我舉個例子吧(下劃線開頭的sass文件不會編譯單獨css文件)

——sassn ——config //基本變數n ——mixin //函數n ——common //公用n ——headern ——asiden ——_list.scssn ——_nav.scssn ——_base.scssn ——compoment //組件樣式n ——dropdownn ——lightboxn ——pagen ——index //首頁n ——_ad.scss //廣告樣式n ——_content.scss //內容信息n ——_info.scss //個人信息樣式n ——_base.scss //index樣式,@import ad;@import content;@import info;n ——write n ——preview n ——_aside.scss //preview頁面獨有側邊欄n ——aboutn ——main.scss //導入所需要的樣式,最終生成一個main.cssn

如上面所示的目錄結構,能讓人一目了然sass的目錄的結構,維護的時候可以快速準確的找到文件。

如果是多頁面的項目,也可以最大限度復用代碼,而且可以導出公用樣式,利用緩存提高載入速度,不用每個頁面都重複寫一樣的代碼。

注意:common文件夾的公共樣式必須是其他頁面所共有的樣式,如果有些頁面有特殊的樣式,應該將會覆蓋的css抽取出來,在頁面中分別導入不同的私有樣式。

根據命名規則限定使用樣式

比如說preview頁面有一個私有aside樣式,可以在這樣寫preview裡面的_aside.scss:

@charset "utf-8"n/*n* 預覽頁面側邊欄n* author:xxxn* time:xxxx-xx-xxn*/n@import ../../common/aside/basen.preview{n .aside{n /* css */n &__item{n /* css */n }n }n}n

這裡需要注意的是,css覆蓋會導致重新渲染,影響性能。

—————————————————————————————————————————

在學習過程如果有任何疑問,請來極樂網(dreawer.com)提問,或者掃描下方二維碼,關注極樂官方微信,在平台下方留言。

推薦閱讀:

HTML元素class屬性的主要作用是選定元素,還是歸納屬性?
如何實現「文字輸入高亮」的效果
新手向 · CSS選擇器

TAG:CSS |