使用HTML/CSS实现登录页时表单与现有CSS样式冲突如何解决

• 给登录模块添加专属命名空间
  所有登录相关的类名统一添加专属前缀（比如login-），避免使用container、form-container这类全局通用命名，从根源上避免类名重复冲突。示例修改如下：

  <!-- 原通用类名替换为带前缀的专属类名 -->
  <div class="login-container" id="custom-login-module">
      <div class="login-form-container login-log-in-container">
          <form action="#">
              <h1 class="login-title">Login</h1>
              <div class="login-social-container">
                  <a href="#" class="login-social"><i class="fa fa-facebook fa-2x"></i></a>
                  <a href="#" class="login-social"><i class="fab fa fa-twitter fa-2x"></i></a>
              </div>
              <span class="login-tip">or use your account</span>
              <input type="email" class="login-email-input" placeholder="Email" />
              <input type="password" class="login-pwd-input" placeholder="Password" />
              <a href="#" class="login-forget-link">Forgot your password?</a>
              <button class="login-submit-btn">Log In</button>
          </form>
      </div>
      <div class="login-overlay-container">
          <div class="login-overlay">
              <div class="login-overlay-panel login-overlay-right">
                  <h1 class="login-overlay-title">HTML CSS Login Form</h1>
                  <p class="login-overlay-desc">This login form is created using pure HTML and CSS. For social icons, FontAwesome is used.</p>
              </div>
          </div>
      </div>
  </div>
  

  对应CSS选择器也要同步修改为带前缀的专属选择器。
• 提升登录模块样式优先级
  给登录模块最外层容器添加唯一ID，所有登录相关的CSS选择器前都拼接该ID选择器，利用ID选择器的高优先级覆盖全局通用样式：

  /* 示例：所有登录相关样式前都加外层ID */
  #custom-login-module .login-form-container {
      /* 原有样式保留 */
  }
  #custom-login-module .login-email-input {
      /* 原有样式保留 */
  }
  

• 局部样式重置
  在登录模块的CSS开头添加局部重置规则，清除全局样式继承带来的影响：

  #custom-login-module * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      border: unset;
      outline: unset;
      font-family: "你需要的字体", sans-serif;
  }
  

  如果全局样式有强制继承的属性，可以使用all: unset先完全重置所有继承属性，再单独定义登录模块的基础样式。
• 避免通用标签选择器
  不要直接使用h1、input、button这类标签选择器定义登录模块的样式，全部替换为带前缀的类选择器，防止影响全局同标签元素的同时，也避免全局标签样式覆盖登录模块的样式。
• 特殊场景兜底
  如果全局样式中存在!important修饰的属性，仅能在登录模块对应需要覆盖的属性后也添加!important修饰，建议只作为最终兜底方案使用，优先通过选择器优先级解决冲突。

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