iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 1
1
Modern Web

CSS 實戰心法系列 第 1

前言,CSS 最重要的事?

鐵人賽系列文又開始囉,這次的主題是 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/


下一篇
OOCSS 結構與樣式、容器與內容
系列文
CSS 實戰心法30

1 則留言

0
pjchender
iT邦新手 5 級 ‧ 3 月前

之前寫 SASS 時被自己捅了個坑,縮排用 四個空白 和 tab 時,肉眼看起來長的都一樣,編譯卻一直錯誤,debug de 超久XDD

我要留言

立即登入留言