BEM + CSS Grid：如何创建易于维护的网站布局-JavaScript中文网-JavaScript教程资源分享门户

网站布局是前端开发中最基本的技能之一。一个好的布局可以让网站更加美观和易于使用，而一个不好的布局则会让用户感到困惑和不舒服。在本篇文章中，我们将介绍如何使用 BEM 和 CSS Grid 来创建易于维护的网站布局。

BEM 是什么？

BEM 是一种命名约定，用于将 HTML 和 CSS 代码按照块（block）、元素（element）和修饰符（modifier）进行组织。通过使用 BEM，我们可以让代码更加清晰易懂，并且能够更好地组织和维护代码。

块（block）

块是一个独立的实体，它可以包含一个或多个元素。块的命名应该是唯一的，并且应该反映出它所代表的内容。例如，一个导航栏可能被命名为 nav，一个文章列表可能被命名为 article-list。

元素（element）

元素是块的一部分，它代表了块中的一个功能或部分。元素的命名应该是唯一的，并且应该反映出它所代表的内容。例如，一个导航栏中的链接可能被命名为 nav__link，一个文章列表中的文章标题可能被命名为 article-list__title。

修饰符（modifier）

修饰符是用于修改块或元素的外观或行为的类。例如，一个导航栏中的当前页面链接可能被命名为 nav__link--current，一个文章列表中的高亮文章标题可能被命名为 article-list__title--highlight。

CSS Grid 是什么？

CSS Grid 是一种新的 CSS 布局模块，它允许我们通过定义网格来布局页面。使用 CSS Grid，我们可以更轻松地创建复杂的网站布局，并且能够更好地控制网站的外观和行为。

如何使用 BEM 和 CSS Grid 创建网站布局

使用 BEM 和 CSS Grid 创建网站布局可以让我们更轻松地组织和维护代码，并且能够更好地控制网站的外观和行为。下面是一个使用 BEM 和 CSS Grid 创建网站布局的示例。

HTML 代码

// javascriptcn.com 代码示例
<div class="container">
  <header class="header">
    <h1 class="header__title">My Website</h1>
    <nav class="nav">
      <ul class="nav__list">
        <li class="nav__item"><a href="#" class="nav__link">Home</a></li>
        <li class="nav__item"><a href="#" class="nav__link">About</a></li>
        <li class="nav__item"><a href="#" class="nav__link">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main class="main">
    <section class="section">
      <h2 class="section__title">Section 1</h2>
      <p class="section__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </section>
    <section class="section">
      <h2 class="section__title">Section 2</h2>
      <p class="section__text">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>
  </main>
  <footer class="footer">
    <p class="footer__text">Copyright © 2021</p>
  </footer>
</div>

CSS 代码

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
}

.header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #333;
  color: #fff;
}

.header__title {
  margin: 0;
  font-size: 24px;
}

.nav {
  display: flex;
  align-items: center;
}

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

.nav__item {
  margin-right: 10px;
}

.nav__link {
  color: #fff;
  text-decoration: none;
}

.nav__link:hover {
  text-decoration: underline;
}

.main {
  grid-column: 2 / -2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  padding: 20px;
}

.section {
  background-color: #f4f4f4;
  padding: 20px;
  border-radius: 5px;
}

.section__title {
  margin: 0;
  font-size: 20px;
}

.section__text {
  margin: 0;
}

.footer {
  grid-column: 1 / -1;
  padding: 20px;
  background-color: #333;
  color: #fff;
}

在上面的示例中，我们使用了 BEM 的命名约定来组织 HTML 和 CSS 代码，使用 CSS Grid 来创建网站布局。通过使用 BEM 和 CSS Grid，我们可以更轻松地组织和维护代码，并且能够更好地控制网站的外观和行为。

总结

在本篇文章中，我们介绍了 BEM 和 CSS Grid 的基本概念，并且演示了如何使用它们来创建易于维护的网站布局。通过使用 BEM 和 CSS Grid，我们可以更轻松地组织和维护代码，并且能够更好地控制网站的外观和行为。如果你还没有尝试过 BEM 和 CSS Grid，那么现在是时候开始学习了！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655c1a06d2f5e1655d62dd7a