iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 26
1
Modern Web

前端新手村系列 第 26

前端新手村 @import 開心的結構化 CSS

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻

前言

網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網頁前端技術的關鍵字,成為比較有系統性的視野。

讓一開始接觸網頁前端的新手們,有一個比較友善的系統來架構你的學習,至於技術本身的深入探討,就留給其它的高手們吧。

@import 開心的結構化 CSS

在 w3.org 的文件[1]中, @import CSS Cascade 是寫在一起的。
@import 可以利用 CSS Cascade 的持性做一些讓程式碼變好的安排。所以在此特別提出來介紹一下。

第一次知道這個語法,還是一個看到一個高中生的 source code,他把雲端字型用 @import "URI" 插入到 CSS 檔中,而不是常見的,使用 <link href="URI">,不然之前都只是在 SASS 的環境中使用。(初學看不懂這一段沒關係~XD)

語法

指定路徑檔名 和 URI同名字串 都是常見的做法。

@import "cssFileName.css";
@import url(cssFileName.css);
@import url("cssFileName.css");

和 Media Query 一起使用,預設 all

@import url(color.css) screen and (color);
@import url(example.css) screen and (color), projection and (color);
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);

@import 的行為

@import 幫你把另一個 CSS 檔的內容抄過來這個檔。必須先宣告於該檔的其它 ruleset 之前,否則失效。

怎麼結構化 CSS

w3.org 有定義一份 CSSOM
不過,我們不詳細介紹,有興趣的朋友可以去看看。

只是,在學習一些前置處理器時,往往會強調一些「 CSS 原生功能」當 SASS 的功能。
反而不是提醒我們原本寫 CSS 時就可以這麼做。

在此,我們就參考幾篇 SASS 的文章,看看他們怎麼「結構化」

單一頁面的 CSS 結構

stylesheets/
|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # imports for all mixins + global project variables
|   |-- _buttons.scss     # buttons
|   |-- _figures.scss     # figures
|   |-- _grids.scss       # grids
|   |-- _typography.scss  # typography
|   |-- _reset.scss       # reset
|   ...
|
|-- vendor/               # CSS or Sass from other projects
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss            # primary Sass file

我個人不參考這篇文章作者的使用方式 (將 mixin, functions, variables 放一起),我傾向於「不管是 variables、function ... 將宣告與使用,放得愈近愈好」

以下是我個人的使用風格

  1. primary file,充滿著 @import 和想要複寫其它 SASS 檔案裡的特殊 SASS 。
  2. Partials,充滿著 @import 和放置畫面上的零件 SASS,提供同風格的多個頁面使用。
  3. Common modules,放置零件上的群組屬性 SASS,提供同風格的多個零件使用。

另外,vendor目錄,放置使用的套件 SASS 檔案。

離題了!!回來寫 CSS

CSS 有可能在 SASS 的建議架構之下應用嗎?

css/
|-- partials/           # Partials
|   |-- reset.css       # reset setting
|   |-- colors.scss     # colors
|   |-- buttons.css     # buttons
|   |-- figures.css     # figures
|   |-- grids.css       # grids
|   |-- typography.css  # typography
|   ...
|
|-- vendor/             # CSS from other projects
|   |-- animate.css
|   ...
|
|-- index.css           # primary CSS file
|-- function.css        # primary CSS file
`-- payment.css         # primary CSS file

換成 CSS 就是這樣用

  1. primary file,充滿著 @import 和想要複寫其它 CSS 檔案裡的特殊 CSS 。
  2. Partials,充滿著 @import 和放置畫面上的零件 CSS,提供同風格的多個頁面使用。

也許最後只是將 <link href=""> 換成 @import 不過,可以透過 CSS 檔擺放順序,改變 CSS Cascade 在某些後端 render 的網站,就可以獨立於後端,做前端的事。
不過,再進階的用法,可以在初學時,初步的嘗到一點點類似 OOCSS 的滋味。

參考資料

[1]: 2. Importing Style Sheets: the @import rule - w3.org
[2]: How to structure a Sass project


上一篇
前端新手村 都市傳說之body範圍
下一篇
前端新手村 Animations (前傳)
系列文
前端新手村30

尚未有邦友留言

立即登入留言