程式設計雜筆

[程設雜筆] 前端純CSS切版體會+技巧雜筆

寒假接了個切版的case。由於以前沒有實際切過很複雜的版,所以在這之前對於這塊,也不是算很有經驗。經過這次經驗後,就隨手記一下這次切版的步驟和小技巧好了。

第一步:選定好工具

以前寫CSS,都是用原始CSS下去設定,寫是寫的出來,不過就是會浪費很多時間在找要設定的class和排定CSS的結構。以前其實就想要玩玩看SASS/SCSS,但是因為寫的程式都不太需要寫大量的CSS,抑或是不用很結構化的CSS,所以沒有用SASS/SCSS開發也無所謂。

SASS和SCSS其實是類似的東西,差別就是在SASS又比SCSS更簡潔,沒有大括號,一些語法也較簡單,但是其實兩者經過轉換後,都可以變成CSS啦。不過,對我而言,我比較喜歡SCSS,因為SCSS有括號,讓我比較好對格排版(我有嚴重的程式碼排版潔癖……)。其實不是說SASS沒有排版啦,那是因為SASS和python一樣是用縮排來表示括號,不過我個人就是不太習慣。或許改天我跳坑coffeescript的時候,就會連帶跳SASS了,但是目前SCSS的括號而言,對我是比較習慣的。

以下有一篇SASS/SCSS介紹:

http://blog.visioncan.com/2011/sass-scss-your-css/

因為我個人是以vim來做前端開發,所以就要找一下scss的套件。我使用的是gulp-sass。

https://github.com/dlmanning/gulp-sass

第二步 設定reset.css

因為世界上的瀏覽器太多種了,而各家瀏覽器實作CSS的方式都不太一樣。有些高,有些窄,有些美,有些醜(我絕對沒有指明某 XXX explorer)。所以就有一位很厲害的老兄發明了這個東西,只要把它貼在CSS前面,就可以把很多不一樣的紛爭給弭平。


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

第三步:設定好基本section的寬高和display方式

如果不是用bootstrap等CSS framework來開發的話,那就一定要先進行這一步。就好像是蓋房子前,你要先想好每層樓要蓋多高的感覺。

這邊的section就是代表每個段落的意思,在蓋房子來說,就好像是房子的每一層。譬如我們可以這麼設:

div.section{
    width:100%;
    display:inline;
    background:#FFFFFF;
    &.red{
        background:#FF0000;
    }
   .container{
        width:960px;
        margin:0 auto;
    }
}

然後我們的html就可以這麼寫,然後一直排下去:

<div class="section">
<div class="container">
        <!--有的沒的--></div>
</div>
<div class="section green">
<div class="container">
        <!--有的沒的--></div>
</div>
<div class="section red">
<div class="container">
        <!--有的沒的--></div>
</div>

這個意思就是說我們的每一段寬度都是100%,然後基本的背景色是白色,但如果有class是section+red的話,那它的背景色就是紅色。如果細心一點,還會發現section裡面包了一個container,左右的margin是auto。這個意思是我們要把這個container置中。

再更細心一點,也可以發現,我們的width是寫死的,960px。會選用960這個數字,是因為960這個數字好分割,可以被2 3 4 5 6 8 12 15 20整除,也就是你想把你的container切幾份,都像小學數學一樣簡單。當然,我認為還有一個原因是因為這個寬度是人眼最舒服的寬度,太寬,會很有壓迫感,太窄,可以裝的東西又太少。

還蠻多文章都說,在切版的時候,可以參照這個960px的系統下去數格子切。譬如網站要分左右三份,那裡所當然一份就是320px。然後button、還有各元件的寬度,也都可以照這樣數。但我個人是認為大的元件需要套用,但小至button或比較細的元件,那就見人見智了,其實直接寫幾px,看起來舒服就好。

第四步:設定全域變數

設定全域變數是很重要的,可以大大增進程式碼的彈性。假設你的網站有很多的綠色,大至div,小至button,到處都是綠色。那如果不用SCSS開發,你可能會寫成像這個樣子

div.section{
    background:#00FF00;
}
button{
    background:#00FF00;
}

太完美了,那如果接下來要來個過年大改版,全部都改成紅色,那是否要一個一個去找到所有#00FF00,然後改掉呢?然後再來個各季限定版,全部變成雪白色,又要再做一次。其實,有個比較省時的辦法,就是設定全域變數。那我們會改寫成下面這個樣子:

$background_color_of_theme:#00FF00;
div.section{
    background:$background_color_of_theme;
}
button{
    background:$background_color_of_theme;
}

當然啦,也不是只能設定顏色,長寬也行。像我就會寫好很多個字體大小,然後直接套用就好。除此之外,譬如如果我們的所有button都要不能select的,那就可以在開頭加上這個東西:


@mixin noselect(){
    -o-user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

button{
    @include noselect();
}

mixin其實就是SCSS的函數,非常好用。一個好的程式設師在發現一段程式碼很常出現的時候,就要有把它寫成函數的自覺。


 

其實步驟大概就這樣了吧。剩下的記一些小技巧吧。

1.動畫

可以使用transition或keyframe搭配animation,要新增動畫或拿除動畫很簡單,只要使用jquery addClass 和 removeClass即可。


block{
    opacity:0;
    &.active{
        opacity:1;
        transition: opacity 1s linear;
    }
}

然後以下這三者的用法有一點不太一樣,有興趣可以查查看,網路上蠻多教學的。

opacity:0;
display:none;
visibility:invisible;
2.格狀排版

在做格狀排列的時候,可以使用 float:left 和 display:inline-block兩種方法。

http://www.w3cplus.com/css/inline-blocks.html

http://blog.teamtreehouse.com/using-inline-block-to-display-a-product-grid-view

3. SCSS技巧

如果可以的話,就盡量寫成巢狀的。寫成巢狀的有不少優點,第一是程式比較有結構,第二是class的名稱比較不會重複。

.block{
    .title{
        font-size:$medium;
    }
    &.green{
        background-color:$green;
    }
}

一看到就很清楚是block裡面有title,然後有一種特別的block是背景色是綠色的。

第三個這樣寫的原因是因為class的覆蓋原則,寫越多層,就代表括弧內的特性越獨特,權值越高。這樣寫可能會有點怪怪的,再上一次程式碼:

.block{
    .title{
        font-size:$medium;
    }
    &.green{
        background-color:$green;
        .red-hint{
            background:#FF0000;
        }
    }
}

.hint{
    width:100px;
    height:1000px;
    background:#FFFFFF;
}

[/ce]
因為red-hint權值較高,所以最後背景色是紅色。
詳細class的覆蓋原則可參考這篇:
http://2goo.info/weblog/detail/86157

4. CSS編寫原則

為了寫出效能比較好的CSS,我們會盡可能的寫出最好的結構。以下有一些編寫原則的網站:

http://www.alloyteam.com/2012/10/high-performance-css/

http://geekplux.com/2014/02/20/css_written_principles.html

以前其實也沒有在管CSS的效能問題,後來有位前端界的前輩給我了一點,我才有警覺。不過這方面我在現在還不是做的很好,汗……


 

其實還有很多編寫的小技巧,不過就大概記錄到這裡,其實當把CSS寫長到幾千行後,就會發現CSS要寫好也不是一件很簡單的事。一個好的coder,不僅是要把程式寫出來,更要把程式寫的有效率,寫得別人讀得懂,不然後面接手code的人真的會很可憐QAQ

2 thoughts on “[程設雜筆] 前端純CSS切版體會+技巧雜筆

  1. 第四步:設定全域變數 的例子給的可能有些不好,因為 $green ($GREEN) 通常會是 constant,變數通常會長成這樣 $background_color_of_theme: #00FF00;
    然後下面的各個屬性的值都是用 $background_color_of_theme。不然以你的例子來說,過年到了要換成紅色,但是變數名稱卻叫 $green 感覺有點奇怪。

    Liked by 1 person

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s