0人評分過此書
超完美CSS設計風格指南
內容簡介:★一口氣搞懂Web開發現場應該要懂的CSS相關知識
★解決您在開發時遇到的困難
★解決團隊協作開發的溝通問題
隨著前端開發的複雜度增加，出現各種以React、Vue.js 等處理CSS的方法，HTML套用樣式的手法也是五花八門。因此，開發人員肯定會對CSS感到頭大，該怎麼應用CSS？該使用哪種工具才好？
本書為網站製作和前端開發領域的設計師與開發人員提供了易於理解的CSS設計指引，您可藉由本書學到最新的觀念與CSS方法論，做出符合專案需求的最佳CSS設計。
★解決您在開發時遇到的困難
★解決團隊協作開發的溝通問題
隨著前端開發的複雜度增加，出現各種以React、Vue.js 等處理CSS的方法，HTML套用樣式的手法也是五花八門。因此，開發人員肯定會對CSS感到頭大，該怎麼應用CSS？該使用哪種工具才好？
本書為網站製作和前端開發領域的設計師與開發人員提供了易於理解的CSS設計指引，您可藉由本書學到最新的觀念與CSS方法論，做出符合專案需求的最佳CSS設計。
-
第1章 編寫CSS困難嗎？
-
編寫CSS困難嗎？
-
本書討論的內容／不討論的內容
-
CSS設計
-
-
第2章 缺少CSS設計會遇到的困擾
-
總之先寫再說
-
CSS方法論
-
-
第3章 先來瞭解BEM
-
何謂BEM？
-
何謂元件？
-
為何要介紹BEM？
-
BEM的粗略概要
-
專欄 BEM並非僅限定於HTML和CSS
-
-
第4章 BEM的B＝區塊
-
劃分區塊的例子
-
何謂區塊？
-
這樣該怎麼決定區塊呢？
-
區塊的編寫方式
-
-
第5章 BEM的E＝元素
-
何謂元素？
-
元素的編寫方式
-
元素的規範
-
冗長的程式碼
-
1. 防止樣式發生衝突
-
2. 僅由HTML便可理解設計人員所想的架構
-
3. CSS 選擇器變得相當單純
-
專欄 元素後面不會再加上元素
-
-
第6章 BEM的M＝修飾符
-
何謂修飾符？
-
區塊的修飾符例子
-
元素的修飾符例子
-
省略寫法①
-
省略寫法②
-
-
第7章 BEM的其他內容
-
怎麼編寫區塊名稱、元素名稱
-
專欄 偏好大駝峰式命名法
-
BEM帶來的好處
-
選擇器的編寫方式
-
區塊的補充內容
-
-
第8章 SMACSS：基礎規範
-
SMACSS
-
SMACSS中的CSS規範集
-
編寫HTML和CSS要先做什麼是？
-
normalize.css
-
Reset CSS
-
設計基礎規範
-
normalize 或者reset
-
以normalize 輕微重置
-
-
第9章 SMACSS：布局規範
-
編寫區塊前的準備
-
布局規範的程式碼範例
-
應該使用id 選擇器嗎？
-
定義類似BEM形式的布局
-
有關小粒度布局的規範
-
-
第10章 SMACSS：主題規範
-
具有主題功能的網站
-
主題功能的應用
-
不同語言的樣式調整
-
依照頁面種類調整
-
主題規範與修飾符
-
-
第11章 功能類別
-
何謂功能類別
-
功能類別的使用範例
-
!important
-
功能類別的好處
-
功能類別的缺點
-
應該使用功能類別嗎？
-
-
第12章 命名空間式前綴詞
-
規範發生衝突
-
迴避規範衝突
-
何謂命名空間式：JavaScript 的情況
-
何謂命名空間式：CSS的情況
-
怎麼使用命名空間式前綴詞
-
應該使用命名空間式前綴詞嗎？
-
-
第13章 設計區塊間的留白：前篇
-
何謂留白的問題？
-
留白設計
-
留白的方向
-
決定留白的變化
-
-
第14章 區塊間的留白設計：中篇
-
上方想要設定較多留白的情況
-
表達頁面大致結構的留白設計
-
-
第15章 區塊間的留白設計：後篇
-
怎麼在區塊設定留白？
-
實作方法1：對區塊本身設定留白
-
實作方法2：製作留白專用的區塊
-
實作方法3：準備留白用的功能類別
-
專欄 不採用margin 的抵銷
-
決定實作方法的關鍵
-
不需要考慮區塊間留白的情況
-
-
第16章 在專案中應對自如
-
只要有技術就行了嗎？
-
為何不能夠單獨一人？
-
編寫HTML和CSS時的難處
-
Atomic Design
-
即便採用瀑布式開發
-
-
第17章 推薦設計指引
-
何謂設計指引？
-
設計指引的內容與意義
-
程式碼的規範
-
超簡易的元件清單
-
元件清單有什麼用處？
-
以元件清單為前提的編寫流程
-
維護元件清單
-
進階設計指引
-
-
第18章 使用建置製作CSS：不直接使用完成的CSS
-
何謂建置？
-
壓縮（minify）
-
嘗試壓縮手邊的檔案
-
各種建置處理
-
-
第19章 使用建置製作CSS：Sass
-
何謂Sass ？
-
內嵌選擇器
-
進階＆（Parent Selector）
-
變數
-
mixin
-
轉換Sass 的程式碼
-
專欄 SCSS syntax 還是Sass syntax ？
-
使用應用程式來建置
-
有助於CSS設計的Sass
-
與Sass 的交流方式
-
-
第20章 使用建置製作CSS：Autoprefixer
-
Can I use
-
Vendor Prefix
-
輪到Autoprefixer 出場
-
應該使用Autoprefixer 嗎？
-
-
第21章 使用建置製作CSS：PostCSS
-
何謂PostCSS ？
-
插件
-
常用的方式
-
應該使用PostCSS 嗎？
-
-
第22章 進階元件：通用型區塊、限定型區塊
-
該取什麼名稱呢？
-
通用型還是限定型？
-
通用型名稱的優點
-
通用型名稱的缺點
-
究竟該怎麼辦？
-
Enduring CSS
-
-
第23章 進階元件：區塊嵌套
-
何謂區塊嵌套？
-
區塊嵌套的優缺點
-
應該作成嵌套區塊嗎？
-
作不作成區塊嵌套的例子
-
-
第24章 功能優先
-
功能優先的思維
-
僅使用功能類別的範例
-
功能優先的特徵
-
HTML和CSS幾乎沒有元件
-
Tailwind CSS 中的元件
-
一定要使用React、Vue.js 嗎？
-
粒度更細微的抽象化
-
是否應該導入功能優先的設計？
-
- 結語
- 索引
- 出版地 ： 臺灣
- 語言 ： 繁體中文
評分與評論
請登入後再留言與評分
PDF
PDF
PDF
