javascriptとcssの基本的な事についてです。

Question

以下の様なjsのコードがあります。

import React , {Component}  from "react"
import { Button } from "semantic-ui-react"
import "./Top.css"

class Top extends Component {
	render() {
		return (
			<div className="Top">
				<Button className="Top-logo">Button</Button>
			</div>
		)
	}
}

export default TopPage

またこれに対してインポートされているCSSのファイルでは以下の様になっています。

.Top {
  text-align: center;
  padding: 100px;
  height : 300px;

}

.Top-logo {
}

CSSファイルをインポートしている部分をコメントアウトするとJSで表示させているボタンが消えます。まずこのCSSファイルの方は何を行っているのでしょうか？
またJSからこの様にCSSファイルをインポートするのは一般的によく行う方法でしょうか？

Comments

[m.ts10806]

タイトルには要件を書いてください。「基本的なことについて」だけでは質問一覧から見たときに何のことかわかりません。

[maisumakun]

React.jsのコードなので、タグにその旨を入れたほうがいいと思います。

Answer 1

javascriptとcssの基本的な事についてです。

これは全く基本的な事じゃないです

JavaScriptのimport構文はECMAScript2015という2015に作られた仕様でようやく実装されたつい最近の機能です。
また、対応ブラウザもChromeやFirefox等のごく少数のモダンブラウザでしか対応していません
（しかも2017〜2018年にようやく実装された機能だったはずです）

参考サイト: ブラウザに実装されている ECMAScript modules について

|engine|version|config|setting|

|---|---|---|---|
|Firefox|54+|about:config||
|Chrome|60+|chrome:flags||
|EDGE|15+|about:flags||
|Webkit|Safari10.1 (iOS10.3)|default||
|Node|wip|-||

---

質問者さんの質問履歴から推測し、
質問文の挙動を見る限り、Python製のフレームワークに含まれているWebpackのモジュールの挙動の様に思えます。

WebpackというNode.js製のツールは、
一つのJSのファイルを起点とし、import構文を発見次第、
塊魂のようにどんどんくっつけて一つの大きなJSファイルを作るツールです。
また、WebpackはCSSやHTMLファイルもJSファイルに内包することが可能です。

当てずっぽうなのでこのくらいにしておきます。
一度フレームワークで利用されているモジュールを調べてみる事をおすすめします。

Answer 2

CSSのインポート部分をコメントアウトするとbuttonタグ自体が消えますか？

コードを見る限りReactをつかったアプリケーションだと思いますが、
angularやreact、vue.jsなどのcliをつかってバンドルファイルを作成する場合
CSSやHTMLをバンドルに含めるのは常套手段です。