★一口氣搞懂Web開發現場應該要懂的CSS相關知識
★解決您在開發時遇到的困難
★解決團隊協作開發的溝通問題
隨著前端開發的複雜度增加,出現各種以React、Vue.js 等處理CSS的方法,HTML套用樣式的手法也是五花八門。因此,開發人員肯定會對CSS感到頭大,該怎麼應用CSS?該使用哪種工具才好?
本書為網站製作和前端開發領域的設計師與開發人員提供了易於理解的CSS設計指引,您可藉由本書學到最新的觀念與CSS方法論,做出符合專案需求的最佳CSS設計。
- 第 1 章 編寫 CSS 困難嗎?(第1頁)
- 編寫 CSS 很難嗎?(第1頁)
- 本書討論的內容/不討論的內容(第7頁)
- CSS 設計(第8頁)
- 第 2 章 缺少 CSS 設計會遇到的困擾(第10頁)
- 總之先寫再說(第10頁)
- CSS 方法論(第12頁)
- 第 3 章 先來瞭解 BEM(第15頁)
- 何謂 BEM?(第15頁)
- 何謂元件?(第16頁)
- 為何要介紹 BEM?(第17頁)
- BEM 的粗略概要(第20頁)
- 專欄 BEM 並非僅限定於 HTML 和 CSS(第23頁)
- 第 4 章 BEM 的 B =區塊(第24頁)
- 劃分區塊的例子(第24頁)
- 何謂區塊?(第26頁)
- 這樣該怎麼決定區塊呢?(第28頁)
- 區塊的編寫方式(第33頁)
- 第 5 章 BEM 的 E =元素(第36頁)
- 何謂元素?(第36頁)
- 元素的編寫方式(第37頁)
- 元素的規範(第39頁)
- 冗長的程式碼(第40頁)
- 1. 防止樣式發生衝突(第40頁)
- 2. 僅由 HTML 便可理解設計人員所想的架構(第43頁)
- 3. CSS 選擇器變得相當單純(第45頁)
- 專欄 元素後面不會再加上元素(第47頁)
- 第 6 章 BEM 的 M =修飾符(第48頁)
- 何謂修飾符?(第48頁)
- 區塊的修飾符例子(第48頁)
- 元素的修飾符例子(第50頁)
- 省略寫法①(第52頁)
- 省略寫法②(第52頁)
- 第 7 章 BEM 的其他內容(第54頁)
- 怎麼編寫區塊名稱、元素名稱(第54頁)
- 專欄 偏好大駝峰式命名法(第55頁)
- BEM 帶來的好處(第56頁)
- 選擇器的編寫方式(第57頁)
- 區塊的補充內容(第58頁)
- 第 8 章 SMACSS:基礎規範(第59頁)
- SMACSS(第59頁)
- SMACSS 中的 CSS 規範集(第60頁)
- 編寫 HTML 和 CSS 要先做什麼是?(第61頁)
- normalize.css(第62頁)
- Reset CSS(第64頁)
- 設計基礎規範(第67頁)
- normalize 或者 reset(第68頁)
- 以 normalize 輕微重置(第69頁)
- 第 9 章 SMACSS:布局規範(第71頁)
- 編寫區塊前的準備(第71頁)
- 布局規範的程式碼範例(第72頁)
- 應該使用 id 選擇器嗎?(第73頁)
- 定義類似 BEM 形式的布局(第75頁)
- 有關小粒度布局的規範(第76頁)
- 第 10 章 SMACSS:主題規範(第80頁)
- 具有主題功能的網站(第80頁)
- 主題功能的應用(第83頁)
- 不同語言的樣式調整(第84頁)
- 依照頁面種類調整(第88頁)
- 主題規範與修飾符(第91頁)
- 第 11 章 功能類別(第92頁)
- 何謂功能類別(第92頁)
- 功能類別的使用範例(第93頁)
- !important(第95頁)
- 功能類別的好處(第95頁)
- 功能類別的缺點(第96頁)
- 應該使用功能類別嗎?(第96頁)
- 第 12 章 命名空間式前綴詞(第98頁)
- 規範發生衝突(第98頁)
- 迴避規範衝突(第100頁)
- 何謂命名空間式:JavaScript 的情況(第101頁)
- 何謂命名空間式:CSS 的情況(第103頁)
- 怎麼使用命名空間式前綴詞(第105頁)
- 應該使用命名空間式前綴詞嗎?(第109頁)
- 第 13 章 設計區塊間的留白:前篇(第111頁)
- 何謂留白的問題?(第111頁)
- 留白設計(第115頁)
- 留白的方向(第118頁)
- 決定留白的變化(第119頁)
- 第 14 章 區塊間的留白設計:中篇(第122頁)
- 上方想要設定較多留白的情況(第122頁)
- 表達頁面大致結構的留白設計(第125頁)
- 第 15 章 區塊間的留白設計:後篇(第130頁)
- 怎麼在區塊設定留白?(第130頁)
- 實作方法 1:對區塊本身設定留白(第132頁)
- 實作方法 2:製作留白專用的區塊(第133頁)
- 實作方法 3:準備留白用的功能類別(第135頁)
- 專欄 不採用 margin 的抵銷(第136頁)
- 決定實作方法的關鍵(第137頁)
- 不需要考慮區塊間留白的情況(第141頁)
- 第 16 章 在專案中應對自如(第144頁)
- 只要有技術就行了嗎?(第144頁)
- 為何不能夠單獨一人?(第144頁)
- 編寫 HTML 和 CSS 時的難處(第147頁)
- Atomic Design(第148頁)
- 即便採用瀑布式開發(第150頁)
- 第 17 章 推薦設計指引(第153頁)
- 何謂設計指引?(第153頁)
- 設計指引的內容與意義(第157頁)
- 程式碼的規範(第158頁)
- 超簡易的元件清單(第159頁)
- 元件清單有什麼用處?(第161頁)
- 以元件清單為前提的編寫流程(第162頁)
- 維護元件清單(第164頁)
- 進階設計指引(第164頁)
- 第 18 章 使用建置製作 CSS:不直接使用完成的 CSS(第169頁)
- 何謂建置?(第169頁)
- 壓縮(minify)(第170頁)
- 嘗試壓縮手邊的檔案(第173頁)
- 各種建置處理(第178頁)
- 第 19 章 使用建置製作 CSS:Sass(第182頁)
- 何謂 Sass ?(第182頁)
- 內嵌選擇器(第183頁)
- 進階 &(Parent Selector)(第185頁)
- 變數(第186頁)
- mixin(第187頁)
- 轉換 Sass 的程式碼(第189頁)
- 專欄 SCSS syntax 還是 Sass syntax ?(第190頁)
- 使用應用程式來建置(第191頁)
- 有助於 CSS 設計的 Sass(第192頁)
- 與 Sass 的交流方式(第194頁)
- 第 20 章 使用建置製作 CSS:Autoprefixer(第197頁)
- Can I use(第197頁)
- Vendor Prefix(第199頁)
- 輪到 Autoprefixer 出場(第200頁)
- 應該使用 Autoprefixer 嗎?(第202頁)
- 第 21 章 使用建置製作 CSS:PostCSS(第204頁)
- 何謂 PostCSS ?(第204頁)
- 插件(第205頁)
- 常用的方式(第206頁)
- 應該使用 PostCSS 嗎?(第209頁)
- 第 22 章 進階元件:通用型區塊、限定型區塊(第212頁)
- 該取什麼名稱呢?(第212頁)
- 通用型還是限定型?(第215頁)
- 通用型名稱的優點(第215頁)
- 通用型名稱的缺點(第217頁)
- 究竟該怎麼辦?(第219頁)
- Enduring CSS(第219頁)
- 第 23 章 進階元件:區塊嵌套(第225頁)
- 何謂區塊嵌套?(第225頁)
- 區塊嵌套的優缺點(第226頁)
- 應該作成嵌套區塊嗎?(第230頁)
- 作不作成區塊嵌套的範例(第231頁)
- 第 24 章 功能優先(第239頁)
- 功能優先的思維(第239頁)
- 僅使用功能類別的範例(第240頁)
- 功能優先的特徵(第241頁)
- HTML 和 CSS 幾乎沒有元件(第244頁)
- Tailwind CSS 中的元件(第246頁)
- 一定要使用 React、Vue.js 嗎?(第249頁)
- 粒度更細微的抽象化(第251頁)
- 是否應該導入功能優先的設計?(第252頁)
- 結語(第255頁)
- 索引(第258頁)
紙本書 NT$ 520
單本電子書
NT$
520
同分類熱門書