鐵人賽系列文又開始囉，這次的主題是 CSS

你覺得 CSS 最重要的是什麼勒？

如果換個方式思考，寫 CSS 最 痛苦 的事情是什麼呢？

1. 載入速度緩慢
2. 遇到不會解的問題
3. 接別人寫的 CSS
4. 接別人寫的 CSS，然後還看不懂在寫什麼
5. 兩個月後維護自己寫的 CSS ，然後還看不懂在寫什麼

稍有資歷的工程師，其實最後幾點也遇過不少次 ?。

很多時候產品有時限性的，在撰寫程式碼的時候就不會那麼的要求，尤其是 CSS 濫用優先值、important 也是很常見的事情，接下來就會遇到：

• 奇怪，樣式怎麼寫不上去
• 頁面上的色彩與整體設計不相同
• 啃，字體怎麼無法調整
• 不同的框架相互影響
• 這麼低能的解法絕對不是我寫的

身為一名前端工程師，寫好 CSS 也是必須的，還記得以前在寫 CSS 的時候，為了寫出好的 CSS 經歷過很多階段的磨練，像是苦練基本功、學好 sass、自幹框架、熟悉各種架構、配合各種環境等，到現在已經衍伸出屬於自己的心法，接下來會介紹業界常用的技巧，來解決所遇到的問題：包含避免捅自己的方法。

一、CSS 架構

說到看不懂自己寫什麼，通常是沒有規矩在寫 CSS，這個篇幅會放在最前方，而整個架構概念會貫通各段文章。

二、開發環境

身為一名前端工程師，在自己的領土上插旗也是很重要的，無論搭配任何的後端語言，最好對於自己工作範疇有一定的掌握度，所以透過一些工具來打理良好開發環境是很重要的，也會開始了解怎麼建置 Sass 環境。

三、Sass 開發心法

這邊不會介紹到 Sass 的基礎語法，而是透過先前的 CSS 架構來了解 Sass 開發中的坑，並且讓 Sass 的可用性更加翻倍！

四、實戰架構

在了解整個技術基礎概念後，還會分享我在實作上的方法，如果後面篇幅許可，再加入更多框架運用，如： Bootstrap 4 !?

在整個觀念釐清以後，除了踩到自己腳外的問題也會一一有了答案，比如說效能問題，在良好的架構下，我們可以簡單地抽離不必要的 CSS 模組，並且不會對其他的畫面產生影響。

驚險刺激的鐵人賽又開始囉，這次能不能順利達成呢!?

同時發表於：https://wcc723.github.io/css/2016/12/01/css-most-important/