CSSの発展過程

CSS

CSS HTMLを修飾するためのスタイルシート言語

の欠点は、どのCSSが適用されるかを予測することが難しく、コードの再利用が難しいことです.

SCSS

@import

// import theme.scss, button.scss 
@import 'theme', 'button';

@import構文を使用して、他のsassファイルを読み込むことができます.

の利点は、cssファイルを容易にモジュール化およびスライス作業できることである.

Variable

$base-color: #c6538c; 
$border-dark: rgba($base-color, 0.88);  
.alert {   
    border: 1px solid $border-dark; 
}

は、複数回使用される値を変数として記憶することができる.

SCSSの欠点

// theme.scss 
.button {  font-size: 20px; }
// button.scss 
.button {  font-size: 30px; }
// style.scss 
@import 'theme', 'button';

ファイルは分離されていますが、重複宣言がある場合は、最初にどれを適用するかは判断できません.

BEM

CSSにおけるCSS IDとクラスの命名方法体系

BEMネーミング方式

Block

ブロックは、再利用可能な機能的に独立した要素を指す.

<div class="logo">
    <img src='logo.svg'> 
</div>

Element

ユニットとは、構成ユニットの一部を指す.

ブロックの後ろに別名を付けるべきです.

<ul class="menu">     
    <li class="menu__item">피자</li>     
</ul>

Modifier

街区または団地に変化をもたらす価格は、顔が異なる場合や異なる行動を取る必要がある場合に使用することができる.

要素またはblockの後に--.

<ul class="menu">     
  <li class="menu__item--disabled">피자</li>     
</ul>

BEMのメリットとデメリット

の利点は、コンポーネント単位でCSSを管理できることである.欠点は、すべての開発者がそれを理解しなければならない簡単なコード命名規則です.

CSS Modules

は、ファイルに動的に宣言するCSSセレクタに一意のハッシュ文字列を追加することによって、CSS属性を重複させない方法

である.

ReactでCSSモジュールを使用する

ファイル名は

CSSモジュールに使用されます.module.css形式でファイルを作成する必要があります.

/* index.module.css */
#button {
	color: red;
	font-size: 10px;
}

#container {
	margin: 20px;
}

// app.js
import styles from "./styles.module.css";

function App() {
	return (
		<div id={styles.container}>
			<button className={styles.button}>버튼</button>
		</div>
	);
}

export default App;

クラスにhash値を加えてクラスを生成します.

の欠点は、多くのCSSファイルを個別に管理する必要があることです.

CSS in JS(Styled Components)

大量のCSSファイルを管理する必要がある問題を解決する

個のコンポーネントを作成するたびに、各コンポーネントで使用するCSS

が同時に作成されます.

Reactでのスタイル化コンポーネントの使用

import styled from "styled-components";

const Button = styled.button`
	color: red;
	font-size: 10px;
`;

const Container = styled.div`
	margin: 20px;
`;

function App() {
	return (
		<Container>
			<Button>버튼</Button>
		</Container>
	);
}

export default App;

の欠点は,インタラクション遅延であり,JSにおけるビームが大きくなることである.

ソース

https://blog.toycrane.xyz/css%EC%9D%98-%EC%A7%84%ED%99%94-%EA%B3%BC%EC%A0%95-f7c9b4310ff7