纯CSS实现.active类与:hover效果的写法是否正确？

我正在为类名为nav-menu-link的链接设置样式，编写了如下CSS及HTML代码，实现了添加.active类时的链接激活效果，以及鼠标:hover时的悬停效果。请问该纯CSS写法是否符合规范？

CSS代码 #

.form-header {
    background-color: var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-out;
    position: relative;
    width: 100%;
    height: 100px;
}

.form-logo {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.image-logo-container {
    box-sizing: border-box;
    display: flex;
    width: initial;
    height: initial;
    background: none;
    opacity: 1;
    border: 0;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

.image-logo-container img {
    width: 250px;
    height: 52px;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.nav-menu {
    display: flex;
    font-size: 18px;
    width: 380px;
    align-items: center;
    justify-content: space-between;
    justify-content: center;
    height: 100%;
    margin: unset;
}

.nav-menu-item {
    display: flex;
    height: 100px;
    align-items: center;
    margin-left: 50px;
}

.nav-menu-link {
    display: flex;
    height: 100%;
    align-items: center;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid transparent;
}

.nav-menu-link.active {
    font-weight: bold;
    color: var(--white);
}

.nav-menu-link:hover {
    color: var(--white);
    border-bottom: 2px solid var(--explorer);
    transition: all .2s ease-in-out;
}


@media (min-width: 998px) {}

@media (min-width: 768px) {}

HTML代码 #

<header class="form-header">
            <div class="nav-container">
                <a class="form-logo" id="navbar-link-form-logo" href="/">
                    <div class="image-logo-container">
                        <img src="https://placekitten.com/250/52" alt="" />
                    </div>
                </a>
                <nav class="container">
                    <ul class="row nav-menu">
                        <li class="nav-menu-item">
                            <a class="nav-menu-link active" href="/">Home</a>
                        </li>
                        <li class="nav-menu-item">
                            <a class="nav-menu-link" href="/form">Form</a>
                        </li>
                        <li class="nav-menu-item">
                            <a class="nav-menu-link" href="/about">About</a>
                        </li>
                    </ul>
                </nav>
                <ul>

                </ul>
            </div>
        </header>

回答 #

整体写法符合CSS规范，你采用了语义化HTML标签（header/nav/ul/a）和BEM风格的类命名，核心的激活、悬停逻辑清晰。不过存在一些冗余和可优化的细节，调整后会更健壮易维护：

• 移除冗余代码：

  • .nav-menu中重复声明了justify-content，后写的justify-content: center会覆盖前者，保留一个即可；
  • 两个空的@media规则没有实际作用，建议删除；
  • nav-container内的空<ul>属于无效冗余代码，直接删除。

• 统一过渡动画逻辑：
  当前仅在:hover状态下添加transition，会导致鼠标离开时没有平滑过渡效果。建议把过渡属性移到.nav-menu-link基类中，让激活、悬停的状态切换都有平滑动画：

  .nav-menu-link {
      display: flex;
      height: 100%;
      align-items: center;
      color: rgba(255, 255, 255, 0.5);
      border-bottom: 2px solid transparent;
      transition: all .2s ease-in-out; /* 移到基类 */
  }
  
  .nav-menu-link:hover {
      color: var(--white);
      border-bottom: 2px solid var(--explorer);
      /* 移除这里的transition */
  }
  

• 保持视觉一致性：
  .active状态仅修改了文字颜色和粗细，没有设置底部边框，和:hover状态的视觉表现不一致，容易产生跳动感。建议给.active类补充边框样式：

  .nav-menu-link.active {
      font-weight: bold;
      color: var(--white);
      border-bottom: 2px solid var(--explorer); /* 和hover统一 */
  }
  

• 优化布局与无障碍：

  • 可以用gap属性替代.nav-menu-item的margin-left，更贴合Flex布局的现代写法：给.nav-menu添加gap: 50px，然后删除.nav-menu-item的margin-left；
  • 图片的alt属性为空，建议补充描述文本（比如alt="网站Logo"），符合无障碍访问规范。

内容的提问来源于stack exchange，提问作者Marcb7