初學者請注意手寫 css 樣式表的各屬性的順序及 CSScomb 的使用

問題

有時候會以爲本身在寫 css 時沒有什麼章法，由於 css 的屬性不少，又有一些繼承不繼承的關係，還有一些相互影響的屬性須要注意。總之就是以爲寫 css 好費勁，不如寫編程語言的邏輯清晰明瞭。

乾貨

• 手寫 css 很重要
• 對於簡單頁面，嵌套式的 sass 和 bootstrap 不必用
• （ 但 sass 中的顏色變量仍是很好用的，能夠在 .scss 文件裏寫 css + 顏色變量）
• css 的原理是很簡單（單字、展現、大小、定位、對齊、樣式，初學者應注意這個順序；這個順序來自 CSScomb）
• 在寫頁面寫出效果後，用 CSScomb 回顧並理清思路
• 可能會碰到的經常使用 css 屬性列表（至少用它們可寫出一個正常的（或被改造的）谷歌首頁）

分析

sass ?

有的人會建議使用 less 或 sass 來代替樣式表文件，或者把一個 css 文件分紅幾部分，而後用一個 @_xx 來引入。新手注意：對於小站點、小頁面的需求來講，是幾乎不須要引入任何 css 預編譯器特性的。
我所理解的 sass 和 compass 等對於 「css 樣式表設計」 的輔助工具、高階工具，是爲了幫助人們解決一些重複性的工做，也就是說能騰出一些處理重複工做的時間去幹別的。

也就是說，若是一我的不能手寫一個佈局（好比手寫谷歌首頁和百度首頁），是由於它對於要實現的效果不理解，對於要實現的效果沒法用 css 來表現，這是樣式表基礎知識的不牢固形成的。

這時用 sass 是沒用的。這些高階工具能幫你解決什麼問題呢？它能縮短你手寫 css 的時間，但不能替你寫 css。

也就是說，sass 編譯出來的 css，你，應該是能夠手寫出來的。若是達不到這個要求，說明你頁面寫得不熟。

bootstrap ?

若是你是一個新手，必定會有不少人像你推薦 bootstrap 由於它可以免去不少麻煩。好比 它的 grid 12 網格佈局。

呃 ... 怎麼說呢，我以爲對於純 css 的學習，要比對於 bootstrap 等前端框架的學習，要有趣。

css 是一個很 showy 的東西，你能夠叫它 UI，也能夠叫它 Web Design，由於它是給 html 上樣式的。它的語句自己是鬆散的（相對於編程語言的邏輯），但它有由於鬆散而毫無章法嗎？

No，Never，不然請向我解釋一下那些看起來很漂亮的網頁是怎麼在 bootstrap 出現以前實現出來的。

而每每越鬆散的東西，它的原理就會越基本 ———— 而在這鬆散的架構和基本的原理之上，發揮出的想象力纔是最大的。

真正的想象力是一種很迷人的東西。若是你用 bootstrap 完成了頁面的所有設計，那麼你的想象力極可能就是 bootstrap 的 grid 。可能在不知不覺中錯過了設計的精髓 ———— 簡單、鬆散、想象力無盡。

而實際上，初學者：css 的原理是很簡單（單字、展現、大小、定位、對齊、樣式，注意這個順序），既包括了在一張網頁上畫畫所須要的一切，又沒有冗餘的東西。在手寫 css 時，在微調樣式表的過程當中，你體會到一種微妙的和諧和內在的、小而美的邏輯。

掌握了 css 原理以後，你會比使用 bootstrap 更以爲心應手。

看教程？

若是你已經下定決心，拋棄 sass 和 bootstrap，擁抱 css ，那麼可能有人會給你推薦 不少書，好比。可是這些書上的資料太多了，而且傾向於覆蓋方方面面。 you know, css looks complex, but using css is easy

解答

這時，應當在練習寫頁面的過程當中，搜索各類解決辦法，順帶溫習樣式表的基礎知識。有些知識，書上的講解好；有些知識，網上的文章就夠拿來解決問題了。

css 屬於後者，因此去寫頁面吧。若是你真的去手寫頁面了，那麼你邁出了正確的一步。

幸運的話，你會遇到以下路障，來幫你鞏固 基礎知識（也就是說，若是你沒思索過這些問題，你極可能就是在基礎知識學習的路上走偏了），從頁面 grid 控制開始，塊級元素固定定位，相鄰，浮動，居中，沉底佈局，響應式，塊級元素佈局。

而如今的你，徹底不用思考這些，你惟一要思考的是：如何把這一塊塊的東西擺在一張網頁上，以及如何調整它的位置。

基礎知識

w3school 就行了，把 這個頁面 裏的全部連接看一遍，而後就可開始寫 html 和 css 了。簡單的說就是，以後可能會有人向你推薦什麼特棒的教程，但你不用看（實際上你可能會以爲教程太簡單而看不下去）。此時你只須要在問題出現時，去問谷歌。
編輯器推薦 st2，安裝 Emmet 插件，想必大家都知道了。

CSScomb

在我練習寫 css 頁面的時候，惟一以爲有幫助的工具就是 CSScomb，你能夠寫一段 css，在完成效果以後（注意，在完成頁面效果以前，別用，而是在搜索問題解決辦法的過程當中，學習 css 基本知識）用它梳理一下，看看結果是什麼。

若是你嘗試了，你會發現是 css 語句的順序調整了。是的，這就是寫 css 的 workflow ，也是你應該思考如何佈局一個頁面的線索。

附一個我目前遇到全部用過的 css 屬性，在 CSScomb 的梳理後，若是你能手寫出谷歌首頁，那麼你必定會了解它們的用法。

.m-1
{
font-size: 4px;
line-height: 5em;

position: relative;
top: 2em;
bottom: 1em;
left: 2em;
right: -0.2em;

display: inline;
display: none;
display: flex;
visibility: hidden;
float: left;
clear: both;

width: 15em;
min-width: 960px;
max-width: 1024px;
height: 5em;
height: 100%;
min-height: 100%;
margin-top: 3em;
margin-right: auto;
margin-left: auto;
margin-bottom: -4em;
padding-top: 4em;
padding-bottom: 2em;

list-style: none;
list-style: none;

text-align: center;

color: red;
border: solid 1px #000;
background: blue;

justify-content: center;
}

固然，上述 css 屬性，只用到一部分就夠了。而且它們是散佈在整個 css 文件中的。
你極可能只寫出這些東西來就可以完成部分頁面了。

.g-1
{
    line-height: 4em;

    height: 4em;

    text-align: center;
}
.g-1 .m-1
{
    float: left;

    width: 8em;

    background: red;
}

.g-1 .m-2
{
    margin-left: 8em;

    background: blue;
}
.g-1 .m-2 .clearme
{
    clear: both;
}