寫前端頁面的時候，是先把html骨架寫好再寫css，還是一邊寫html,一邊寫css?

01-14

我有一點疑問，就是我感覺寫前端的頁面的時候，先寫html骨架再寫css修飾，是不是會跟快點？譬如一開始就把頁面上的所有的圖片和文字放進去（根據PSD圖判斷應該有的html骨架），然後再從上往下給html添加類。

我以前都這樣寫：

第一步，先寫整頁框架，例如左右分欄，上下分欄，頭尾等的html結構。然後寫對應的樣式。

第二步，拆分模塊，一個一個模塊寫html，然後寫css，並且套到對應的整體結構中。

第三步，細節調整，整體聯調樣式。

js呢，其實也可以按照模塊寫。

這樣做的一個好處是，你一個人的工作完全可以無縫拆成多個人的工作。所以當主導一個很重的頁面的改版的時候，這種方式讓多人協作受益良多。

多寫，不在於方式在於姿勢。

先寫骨架並把類寫好，然後再去寫CSS。

以我自己為例，我們公司的設計不是一次交活的，設計團隊會先給出一個大概得布局，開發團隊根據布局先把骨架寫好，然後等設計團隊完成所有的設計並給出文檔後再具體調整樣式。

瀉藥這個問題有意思，我想了想以前寫頁面的時候。開始的時候好像比較喜歡邊寫 html 邊寫 css，到後來慢慢的喜歡把某一塊的 html 寫完，再寫 css 了，類似填天窗……

先寫框架HTML，Component可以簡單拿div, span, 甚至img代替一下，因為設計會變。

然後寫框架層的CSS，如果能用bootstrap, pureCSS等也可以，點到為止，不要實現任何視覺設計的元素，因為設計會變。

記得一定要跟設計組要一份單獨的組件的visual style guide，因為設計變化的時候，layout和visual只需要更新各自就行了。

最後的最後，再單獨寫一份css定義visual design。因為產品敲定/交付/上線以後，設計會變！！！

『橫切，豎切，切得快准狠就是好切。---匿名』

在切圖前，需要做的一些準備工作：

你需要有一個屬於你自己Grid System，如果你是Sass Person，可以使用Susy或者Jeet Grid System ，後者更加輕量級一點。

Jeet Scss Example

.col-7-12{ @include column(12/12); .push-7 { @include unshift();


            }
            .pull-7 {

                 @include unshift();
            }

    }

    .col-5-12{

         @include column(12/12);

            .push-5 {

               @include unshift();
            }
            .pull-5 {

                 @include unshift();

} }

你需要有所了解BEM, 存貨：

http://bem.github.io/bem-method/html/all.en.html

BEM 101 | CSS-Tricks

很多圖友在切圖時，不知道如何命名class，BEM很好的規範了如何給class起名和HTML結構。

製作純靜態頁面的話，Jade對你很有幫助Jade - Template Engine

使用類似於Normalize.css: Make browsers render all elements more consistently. 的東東幫你重置browser rendering。

以上準備完畢就可以切圖了。推薦使用Atom, Brackets, Sublime等

開始切圖

1. 遵循BEM規範，建立對應HTML tag以及 classes，同時把預先準備好的grid system填補上去，

Example HTML:

& & & & & & & && & &