iT邦幫忙

DAY 35
1

Sass3.3 & CSS設計模式系列 第 36

Sass教學 (35) - MVCSS - Foundation

以下文章同步於Github

程式碼連結
MVCSS
MVCSS中文翻譯

Foundation
Foundation是指當你要使用MVCSS設計模式來建立你的Sass結構時,
所需要的預設設定,你也可以當做是當Sass專案創建時,預設會載入的初始設定。
一個MVCSS的專案結構會長成如下:

application.sass
foundation/
  _reset.sass
  _helpers.sass
  _config.sass
  _base.sass
  _tools.sass
components/
structures/
vendor/

而foundation的組成如下,下面我們會一一介紹:

  1. Reset
  2. Helpers
  3. Config
  4. Base
  5. Tools

1.Foundation - Reset
我們在建立專案前,都會先導入Reset css先將所有瀏覽器的預設CSS樣式給清空,
MVCSS是使用, Normalize.css,如果你不習慣它的Reset.css,也可以考慮使用 Eric Meyer 的 Reset CSS 。
關於各種版本的Reset CSS差異性,
我也寫過一篇文章,各位可以從中評估並挑選自己上手的即可。

2.Foundation - Helpers
Helpers是指專案上有用到的functions、@Mixin、extend、animations。

functions、@mixin
Sass、Compass其實就有很多好用的function使用了,
但如果你有自己寫functioin與@Mixin那便也可以自行新增。

Extends
在MVCSS的觀念有個很有趣的一點是,
應該要盡量避免使用%佔位選擇符,
MVCSS提出了一個清除浮動的設定來解說:

// ----- Clearfix ----- //

.group::after
  clear: both
  content: ''
  display: table

%佔位選擇符的功用自然是能夠將class堆疊起來,
但這樣同時也會造成堆疊的code變得擁擠,
與其如此,倒不如直接在HTML TAG上面直接載入.group即可,
這樣的概念也與OOCSS有些雷同:

<footer class="group">  
  <p class="fl">Made with Envy</p>  
  <p class="fr" src="" alt="Envy Logo">test</op>
</footer>  

假使有些模組會用到時,
便直接繼承.group,

.g  
  @extend .group  
  display: block  
  margin-left: -$g-gutter / 2  
  margin-right: -$g-gutter / 2  

個人補充一點,
但這樣並不代表%佔位選擇符就沒有用處,
有些時候在每個區塊的文字字體都不一樣時,
便可以透過這樣來管理字體:

%helvetica
    "Helvetica Neue", Arial, sans-serif
%segoe
    "Segoe UI", "Myriad Pro", "Helvetica Neue", Arial, sans-serif
h1  
    @extend %segoe  
p,li  
    @extend %helvetica
.search .title
    @extend %segoe 

Animations
在Helpers中,應把全站的動畫(Animations)設定都集中起來,
並可靈活套用於各種模組上,
除非是特別的動畫模組才會在該模組下方直接寫Animations,
否則都應整合在Helpers的Animations裡面。

3.Foundation - Config
Config則是拿來設定所有變數與字型的地方,下面的範例將拆解為Base、Colors和Fonts的設定。

@Font-face
MVCSS的範例是引入了Bourbon的+font-face mixin提供字體檔案,
但如果你已經有使用自己的網頁字體與服務的話,便可留空此段。

Variables(變數)
MVCSS的變數為了與它們的功能有所相呼應,
都會加上前綴詞來了解該變數是屬於Component(組件)還是Structure(結構),
$b-* 基礎變數
$c- 顏色
g- RWD斷點(breakpoints)
$componentName-* 使用在 Components(組件)
$structureName-* 使用在 Structures(結構)

顏色的部份則是先定義一組顏色變數,
再設計一組有語意化的來繼承,
不過假使你的專案色系並沒有分到那麼細,
那麼直接使用顏色變數也可以。

// -------------------------------------  
//   Colors  
// -------------------------------------  

// ----- Palette ----- //  

$cerulean: #017ba7
$forest: #7ba05b
$gainsboro: #ecf0f1
$gold: #ffd700
$jet: #343434
$scarlet: #ff3f00
$white: #fff

// ----- Base ----- //

$c-background-invert: $white
$c-background: $gainsboro
$c-border: lighten($jet, 30%)
$c-error: $scarlet
$c-highlight: $cerulean
$c-text-invert: $white
$c-text: $jet
$c-subdue: lighten($cerulean, 40%)
$c-success: $forest
$c-warning: $gold

// ----- Components ----- //

// Example:$row--a-background: $c-highlight

// ----- Structures ----- //

// Example:$dropdown-link-color: $c-subdue

// -------------------------------------  
//   Base  
// -------------------------------------  

// ----- Borders & Box Shadow ----- //  

$b-borderRadius: 3px
$b-borderStyle: solid
$b-borderWidth: 2px
$b-border: $b-borderWidth $b-borderStyle $c-border
$b-boxShadow: 0 2px 0 rgba($jet, 0.25)

// ----- Typography ----- //

$b-fontFamily-heading: 'OpenSans', sans-serif
$b-fontFamily: 'OpenSans', sans-serif
$b-fontSize: 16px
$b-fontSize-s: 75%
$b-fontSize-m: 90%
$b-fontSize-l: 115%
$b-lineHeight: 1.5

// ----- Sizing ----- //

$b-space: em(20px)
$b-space-s: 0.5 * $b-space
$b-space-l: 2 * $b-space
$b-space-xl: 4 * $b-space

// -------------------------------------
//   Components
// -------------------------------------

// ----- Grid ----- //

$g-s: em(480px)
$g-m: em(800px)
$g-l: em(1024px)

// -------------------------------------  
//   Structures  
// -------------------------------------  

// ----- Dropdown ----- //

// example:$dropdown-width: em(200px)

4.Foundation - Base
Base則是針對HTML TAG直接寫全域CSS樣式,
以避免每個不同區塊的HTML TAG都還必須重新設定一次,
因為HTML TAG太多,所以通常只會針對重點來設計樣式。

MVCSS是先在頂端定義html和body樣式後,
後面再分為Block(塊狀樣式)、inline(行內樣式)依序設定。

HTML與BODY範例設定如下程式碼,
透過下面的前綴詞,你一目了然就曉得c-是顏色變數,
b-是來自於config的base的預設樣式:

html
  background: $c-background
  color: $c-base
  font-family: $b-fontFamily
  font-size: $b-fontSize
  line-height: $b-lineHeight

body
  font-size: 100%

Block Content(塊狀內容)
在設計Base預設樣式的塊狀HTML tag時,
設計原則是:

  1. 如確定特定HTML tag在全站樣式都長得一樣,可直接在HTML tag寫樣式

  2. 為了避免外邊界疊加增加複雜度,所以限制垂直Margin為單一方向

    ul, p
    margin-bottom: $b-space
    margin-top: 0

    li
    margin-bottom: $b-space-s
    margin-top: 0
    h1, .h1,
    h2, .h2,
    h3, .h3,
    h4, .h4
    font-family: $b-fontFamily-heading
    font-weight: bold
    line-height: 1.2
    margin-bottom: $b-space-xs
    margin-top: 0

inline Content(行內內容)
自然是指行內元素,
例如a、strong、em、code等等。

a
  border-bottom: $b-border
  color: $c-highlight
  text-decoration: none
  &:hover,
  &:focus
    border-bottom-color: $c-highlight
    color: $c-subdue

5.Foundation - Tools
MVCSS的Tools的觀念很像是OOCSS,
但又不是純粹的OO,
Tools的CSS設定都是可以直接指定在HTML tag的class上,
例如,下面 card Component裡面的P段落需要用margin-bottom 對齊,所以能夠輕鬆使用一個 Tool的mbf來寫:

<div class="card">
  <p class="mbf">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam non dolor eligendi placeat.</p>
</div>

Single Responsibility(單一職責)
Tools盡可能限制職責,讓他越單純越好,並讓他能夠在不同組件與結構上快速產生不同樣是。每一個 Tool做一件事確保他們影響的這些元素是可預測的和可擴充的。

太超過的寫法
如果你發現自己使用的Tools太多才能達到效果那就太超過了,
你應該是要在模組(Module)或修飾符(Modifier)來新增樣式。
我個人建議除非你是很純粹的OOCSS,
否則建議Tools的結構在一個HTML TAG不要超過四個以上會比較好。

MVCSS在文件上有提供一個範例:

<a class="btn pbm pll prl ptm tsl" href="v3.zip" >Download v3.0.0</a>
<a class="btn pbm pll prl ptm tsl" href="v2.zip" >Download v2.4.1</a>

在上面的例子中,雖然這樣也可以設計出一個按鈕,
但如果每次要設計按鈕就必須寫那麼多class也是相當麻煩,
所以MVCSS建議可以增加個修飾符(Modifier)來整合:

//CSS結構
.btn--l
  font-size: $b-fontSize-l
  padding: $b-space $b-space-l

//HTML結構  
<a class="btn btn--l" href="v3.zip" >Download v3.0.0</a>
<a class="btn btn--l" href="v2.zip" >Download v2.4.1</a>

要特別記住一點,Tools提供一組強大的class能夠針對各種情境、模組、組件上進行微調,但他並不能代替模組化的CSS。


上一篇
Sass教學 (34) - MVCSS - Styleguide
下一篇
Sass教學 (36) - MVCSS - Components、Structures
系列文
Sass3.3 & CSS設計模式46

尚未有邦友留言

立即登入留言