グローバルナなスコープとは

Question

CSSは現状グローバルなスコープですとCSS設計の教科書にあったのですが、
グローバルナなスコープとは、ほかの要素から、影響を受けてしまう、要素ということでしょうか？

初心者にもわかるように教えていただければ幸いです。

下記のグローバル変数 ローカル変数のグローバル変数のことでしょうか？
http://tacamy.hatenablog.com/entry/2012/12/30/191125

Answer 1

グローバルなスコープというのは、大まかに下記のようなことです。
同じファイル内で書き換わるのはもちろんのこと、別ファイルに記述されている場合でも書き換わってしまいます。

// 最初に定義しても
var sample1 = '最初の設定';

// 同じ名前で再定義して設定すると内容が書き換わる
var sample1 = '変更後の設定';

別のファイルに下記があり、

1. 上の設定
2. 下の設定

の順に読み込むと、 sample1は「2つ目のファイルの設定」になります。

var sample1 = '2つ目のファイルの設定';

CSSも同様で、最初に読み込むファイルが下記だとします。

/* 最初に読み込むファイル */

.sample {
 margin-top: 10px;
}

次に読み込むファイルが下記だとすると、実際に適用されるのはmargin-top:20pxの方です。

/* 次に読み込むファイル */
.sample {
 margin-top: 20px;
}

このような上書きされる関係をCSS単体では防止する手立てがない（書き方によって工夫することしかできない）ので、「グローバルなスコープ」と言われます。
全部グローバル変数だ、ということですね。

Comments

[退会済みユーザー]

ありがとうございます。
下記のようにまとめましたがあっていますでしょうか？

・
スコープとは大雑把に言って、定義されたものを参照できる範囲のこと

・グローバルスコープ

かぶっているクラス名があると、影響を受けてしまうのがグローバルスコープ、
逆にカプセル化ができて、完全に独立されてほかのかぶっているクラス名があっても絶対に影響されないものが、ローカルスコープ

グローバルスコープは同じファイル内で書き換わるのはもちろんのこと、別ファイルに記述されている場合でも書き換わってしまいます。

// 最初に定義しても
var sample1 = '最初の設定';

// 同じ名前で再定義して設定すると内容が書き換わる
var sample1 = '変更後の設定';

別のファイルに下記があり、

上の設定
下の設定
の順に読み込むと、 sample1は「2つ目のファイルの設定」になります。

var sample1 = '2つ目のファイルの設定';

CSSも同様で、最初に読み込むファイルが下記だとします。

/* 最初に読み込むファイル */

.sample {
margin-top: 10px;
}

次に読み込むファイルが下記だとすると、実際に適用されるのはmargin-top:20pxの方です。

/* 次に読み込むファイル */
.sample {
margin-top: 20px;
}

このような上書きされる関係をCSS単体では防止する手立てがない（書き方によって工夫することしかできない）ので、「グローバルなスコープ」と言われます。
全部グローバル変数だ、ということですね。

・CSSの問題点

また、スコープ内で名前がかぶった場合、解決する方法が必要なのですが、
CSSでは基本的に読み込み順になります

実務ですとこれが問題になる場面が多々あります。
例えばAさんが

#id1 {}

というCSSを、

Bさんが

#id1 {}

というCSSをかいた場合、

どちらが適用されるかは 読み込み順依存 です。
例えばAさんのCSSが適用されてBさんが困り、Bさんが!importantを追加したりして、
今度はAさんが困って……という残念なことが起こります。

・かぶっているクラス名があると、影響を受けてしまうのがグローバルスコープ、
逆にカプセル化ができて、完全に独立されてほかのかぶっているクラス名があっても絶対に影響されないものが、ローカルスコープ

[yamato_hikawa]

そんな感じです。なので、グローバルスコープを使わないアプローチが出来るなら、それに越したことはないです。

Answer 2

スコープとは大雑把に言って、定義されたものを参照できる範囲のことです。
例えば、

#id1 {}

というCSSがあったとしましょう。これはCSSの読み込んだHTMLの どこからでも 参照できます。

<span id="id1"></span>

これがグローバルスコープ、という意味です。

また、スコープ内で名前がかぶった場合、解決する方法が必要なのですが、
CSSでは基本的に読み込み順になります。後ろのCSSは見えなくなります。

実務ですとこれが問題になる場面が多々あります。
例えばAさんが

#id1 {}

というCSSを、

Bさんが

#id1 {}

というCSSをかいた場合、

どちらが適用されるかは 読み込み順依存 です。
例えばAさんのCSSが適用されてBさんが困り、Bさんが!importantを追加したりして、
今度はAさんが困って……という残念なことが起こります。

解決策は色々ありますので、気になったら調べてみてください。

Comments

[退会済みユーザー]

ありがとうございます。
下記のようにまとめましたがあっていますでしょうか？

・
スコープとは大雑把に言って、定義されたものを参照できる範囲のこと

・グローバルスコープ

かぶっているクラス名があると、影響を受けてしまうのがグローバルスコープ、
逆にカプセル化ができて、完全に独立されてほかのかぶっているクラス名があっても絶対に影響されないものが、ローカルスコープ

グローバルスコープは同じファイル内で書き換わるのはもちろんのこと、別ファイルに記述されている場合でも書き換わってしまいます。

// 最初に定義しても
var sample1 = '最初の設定';

// 同じ名前で再定義して設定すると内容が書き換わる
var sample1 = '変更後の設定';

別のファイルに下記があり、

上の設定
下の設定
の順に読み込むと、 sample1は「2つ目のファイルの設定」になります。

var sample1 = '2つ目のファイルの設定';

CSSも同様で、最初に読み込むファイルが下記だとします。

/* 最初に読み込むファイル */

.sample {
margin-top: 10px;
}

次に読み込むファイルが下記だとすると、実際に適用されるのはmargin-top:20pxの方です。

/* 次に読み込むファイル */
.sample {
margin-top: 20px;
}

このような上書きされる関係をCSS単体では防止する手立てがない（書き方によって工夫することしかできない）ので、「グローバルなスコープ」と言われます。
全部グローバル変数だ、ということですね。

・CSSの問題点

また、スコープ内で名前がかぶった場合、解決する方法が必要なのですが、
CSSでは基本的に読み込み順になります

実務ですとこれが問題になる場面が多々あります。
例えばAさんが

#id1 {}

というCSSを、

Bさんが

#id1 {}

というCSSをかいた場合、

どちらが適用されるかは 読み込み順依存 です。
例えばAさんのCSSが適用されてBさんが困り、Bさんが!importantを追加したりして、
今度はAさんが困って……という残念なことが起こります。

・かぶっているクラス名があると、影響を受けてしまうのがグローバルスコープ、
逆にカプセル化ができて、完全に独立されてほかのかぶっているクラス名があっても絶対に影響されないものが、ローカルスコープ