@importのみ記述するコードブロックを用意する

mtane0412.icon

【…】

Google Fontsだけ何か適用されないと思ったら@importは先頭じゃないといけないのを忘れていた

自分はstyle.cssからimport.cssを@importするようにしているwho.icon

@importはimport.cssに記述する

こうするとページ内の任意の場所から@importを追加できる

同じファイル名のコードブロックが一つに結合されるため

文芸的プログラミングとScrapboxの哲学の両方に最適化するとこうなるような気がする

知見mtane0412.iconnomadoor.icon

なるほど、@importのみ記述するコードブロックを用意するということかtakker.icon

そちらの言い回しのほうがひと目で分かりやすいですね… 失礼ながら、ページ名としてお借りします…who.icon

補足説明

Cosenseの哲学では、テキストをモジュール化して再利用性を高めるべきだとされている

同じトピックの内容を一箇所にまとめて記述しておく

後で個別のページに切り出しやすくなる

切り出さずとも、一箇所にまとめておくだけで再利用性が高まる

記述の順番は、ページ全体の構成や話の順接などに合わせるべきだろう

これを@importのためだけにページの先頭に移動させるのはよろしくない

同じ名前のコードブロックが一つに結合される仕組みになっている

別名のコードブロックが入り乱れていてもそれぞれで別々に一つのファイルになる

ページの構成

1. style.cssの先頭で@import専用CSSをあらかじめ@importしておく

このファイルには@import文のみを記述する

ここではimport.cssだが、このファイル名は別に何でもよい

code:style.css

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

2. 以降、style.cssにはそのままセレクターを記述する

code:style.css

body {

/* hogehoge */

}

3. 何らかのCSSを@importするときはimport.cssに書く

style.cssに記述すると、2. のスタイリングの直後に結合されてしまい無効な@import文になる

code:import.css

@import url("../何らか/style.css");

4. 以降、2~3.の繰り返し