使用 WebStorm 開發 Hugo (Modern CSS)
WebStorm 目前並沒有原生支援 Hugo,須另外安裝 Smart Hugo plugin,且不再使用 Prettier 與 Stylelint,直接使用 WebStorm 內建功能,打造 Zero Dependency 與 No Node.js 開發環境。
WebStorm 目前並沒有原生支援 Hugo,須另外安裝 Smart Hugo plugin,且不再使用 Prettier 與 Stylelint,直接使用 WebStorm 內建功能,打造 Zero Dependency 與 No Node.js 開發環境。
雖然 CSS 的巢狀結構沒有限制層數,但好的 BEM 配合 CSS 最好只要一層就好,可以透過 Stylelint 加以限制。
若由多人共同開發 CSS,不同的樣式排序將造成困擾,可透過 Stylelint 將樣式統一排序。
BEM 命名規則在 CSS 開發為必備,透過 Stylelint 也可加以檢查。
Stylelint 可檢查 CSS,除了安裝 Stylelint 外,還要安裝 Stylelint-config-standard。
Stylelint 可檢查 CSS,除了安裝 Stylelint 外,還要安裝其他 Plugin 與修改設定檔,才能完成 檢查 BEM、查狀結構 與 樣式排序…等需求。
實務上會想將每個 Template 或 Partial 有自己的 CSS 檔,在開發階段亦保持獨立,直到編譯階段再將所有 CSS 檔合併成單一 CSS 檔。
不同瀏覽器對 HTML Tag 都有其預設 CSS Style,為了讓個瀏覽器表現一致,建議使用 CSS Reset 將所有預設 CSS Style 清除。
若只是用來學習 HTML/CSS,可只安裝 Prettier、Stylelint、Live Server 與 Firefox Developer Edition 即可。
background 本質雖然是定義背景圖片,但也可用來取代 <img>,讓我們以 CSS 設定圖片。