大規模なウェブサイトでも管理しやすくするcss命名規則SMACSS

2023年4月23日 02:19

SMACSS（Scalable and Modular Architecture for CSS）は、大規模なWebサイトのCSSを管理するためのアーキテクチャです。SMACSSは、CSSを機能別に分類し、管理することで、コードの保守性や再利用性を向上させることを目的としています。

SMACSSは、以下の5つのカテゴリーにCSSを分類します。

ベース（Base） ベースは、ウェブサイトの基本的なスタイルを定義するCSSです。文字色、フォント、リンク色、テキストの大きさ、背景色などが含まれます。ベースは、リセットCSSやノーマライズCSSのような一般的なスタイルシートを指します。
レイアウト（Layout） レイアウトは、ページ内のブロック要素を配置するためのCSSです。例えば、ヘッダーやフッター、ナビゲーション、サイドバーなどが含まれます。レイアウトは、グリッドシステムやFlexbox、CSS Gridなどを使って定義することができます。
モジュール（Module） モジュールは、再利用可能なコンポーネントのCSSです。モジュールは、単一の機能を持つコンポーネントで、例えば、フォームやボタン、スライダー、カルーセルなどが含まれます。モジュールは、BEM命名規則のようなパターンを使って定義することができます。
ステート（State） ステートは、ページ内の状態を表すCSSです。例えば、hover、active、disabledなどの状態が含まれます。ステートは、クラスを追加することで、状態を表現することができます。
テーマ（Theme） テーマは、ウェブサイトの外観やスタイルを変更するためのCSSです。例えば、色、テキストのサイズ、フォントなどが含まれます。テーマは、レイアウトやモジュール、ステートに適用されます。

SMACSSを使うことで、大規模なウェブサイトでも、スタイルシートを管理しやすくなります。また、再利用可能なコンポーネントを定義することで、コードの量を減らし、保守性を向上させることができます。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>SMACSS Example</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<header class="header">
		<div class="header__logo">
			<a href="#">Logo</a>
		</div>
		<nav class="header__menu">
			<ul>
				<li><a href="#">Menu 1</a></li>
				<li><a href="#">Menu 2</a></li>
				<li><a href="#">Menu 3</a></li>
			</ul>
		</nav>
	</header>

	<main class="main">
		<section class="layout">
			<article class="module">
				<h2 class="module__title">Module 1</h2>
				<p class="module__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius elit at velit convallis, eu rutrum ipsum varius.</p>
			</article>
			<article class="module">
				<h2 class="module__title">Module 2</h2>
				<p class="module__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius elit at velit convallis, eu rutrum ipsum varius.</p>
			</article>
		</section>
	</main>

	<footer class="footer">
		<p class="footer__text">&copy; 2023 SMACSS Example</p>
	</footer>
</body>
</html>

/* Base */
body {
	font-size: 16px;
}

a {
	color: #007acc ;
	text-decoration: none;
}

/* Layout */
.layout {
	display: flex;
	flex-wrap: wrap;
}

.module {
	margin: 20px;
	padding: 20px;
	background-color: #eee ;
	flex: 1 1 300px;
}

.module__title {
	margin-top: 0;
}

.module__content {
	margin-bottom: 0;
}

/* Header */
.header {
	background-color: #007acc ;
	color: #fff ;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
}

.header__logo {
	font-size: 24px;
}

.header__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.header__menu li {
	margin-right: 20px;
}

.header__menu a {
	color: #fff ;
}

/* Footer */
.footer {
	background-color: #eee ;
	padding: 20px;
	text-align: center;
}

.footer__text {
	margin: 0;
}

この例では、ベース、レイアウト、モジュール、ステート、テーマのすべてのカテゴリーが使用されています。それぞれのクラス名には、プレフィックスが付けられ、モジュールにはモジュール名が含まれています。これにより、CSSをより管理しやすく、保守性を高めることができます。

いつも記事を読んでいただき、ありがとうございます何かを感じたり、考えるきっかけになったりしたら、とても嬉しいです。