大規模なウェブサイトでも管理しやすくするcss命名規則SMACSS
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">© 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をより管理しやすく、保守性を高めることができます。
いいなと思ったら応援しよう！
