你知道防御式CSS吗？你知道哪些防御式CSS?

约定不等于承诺〃 2023-10-12 22:04 55阅读 0赞

防御式CSS（Defensive CSS）是一种编写CSS样式的方法，旨在处理复杂的代码库或大型项目中的样式冲突和副作用。它通过采用模块化、封装和命名约定等技术，以减少样式之间的耦合性，提高代码的可维护性和可扩展性。

防御式CSS的主要原则包括：

1.  作用域限制：将样式规则限定在特定的组件或模块中，避免全局污染和命名冲突。可以使用BEM（Block Element Modifier）或其他类似的命名约定来实现作用域限制。
2.  封装和组件化：将样式封装到可重用的组件中，使其具有独立性并且易于理解和维护。每个组件只需关注自身的样式，减少对其他组件的影响。
3.  避免具体度过高的选择器：使用尽可能具体的选择器，但避免选择器的嵌套层级过深，以减少样式冲突的可能性。避免使用ID选择器，因为它们的优先级较高，容易引起冲突。
4.  显式样式重置：根据需要，明确地重置元素的默认样式，以确保在不同浏览器和环境下的一致性。可以使用Normalize.css等工具来实现显式的样式重置。
5.  弹性和容错性：即使面对意外的情况或不可预见的布局变化，样式也能够适应并保持稳定。使用弹性布局（Flexbox）或响应式设计等方法，以适应不同屏幕尺寸和设备。

通过采用防御式CSS的方法，开发人员可以更好地管理和维护CSS代码，减少样式冲突和隐式副作用，提高项目的可维护性和可扩展性。它特别适用于大型项目或多人合作开发的场景，有助于减少团队协作中的样式冲突问题。

#### 以下是一些防御式CSS的最佳实践和相应的代码示例： ####

##### 1. 建立基础样式 #####

在编写CSS代码之前，最好先定义一些基础样式，以确保页面上的所有元素都有一致的外观和感觉。使用CSS重置或规范化库可以帮助创建一组基础样式。

例如，使用Normalize.css可以为HTML元素提供一组标准样式：

/* 使用Normalize.css */
    @import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');

##### 2. 避免全局选择器 #####

全局选择器（例如 `*` 或者 `body *`）会影响页面上的所有元素，并可能导致不必要的副作用。因此，应该避免使用全局选择器，而是使用更具体的选择器。

例如，以下CSS规则会影响页面上所有元素：

/* 全局选择器 */
    * {
        
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

替代方案是为每个元素定义单独的样式，如下所示：

/* 更具体的选择器 */
    body {
        
      margin: 0;
      padding: 0;
    }
    
    div {
        
      box-sizing: border-box;
    }

##### 3. 使用命名约定 #####

使用有意义的类和ID名称，并遵循一致的命名约定，可以使CSS代码更容易阅读和维护。例如，使用BEM（块、元素、修饰符）约定可以帮助组织CSS规则，并且每个规则都具有明确的目的。

例如，以下CSS规则使用BEM命名约定：

/* 使用BEM */
    .button {
        } /* 块 */
    .button__text {
        } /* 元素 */
    .button--primary {
        } /* 修饰符 */

##### 4. 避免使用魔法数值 #####

魔法数值是指在CSS代码中使用未定义的数字或字符串（例如 `10px` 或者 `#f00`）。这样的值可能会导致布局问题和样式不一致性。应该将这些值定义为变量或常量，并在需要时使用它们。

例如，以下CSS规则使用了魔法数值：

/* 使用魔法数值 */
    .container {
        
      width: 960px;
    }
    
    .button {
        
      font-size: 16px;
    }

替代方案是将这些值定义为变量或常量，并在需要时使用它们：

/* 使用变量或常量 */
    :root {
        
      --container-width: 960px;
      --button-font-size: 16px;
    }
    
    .container {
        
      width: var(--container-width);
    }
    
    .button {
        
      font-size: var(--button-font-size);
    }

##### 5. 使用层叠样式表（CSS）规则 #####

在编写CSS代码时，应该遵循层叠顺序。这意味着具体的样式规则应该优先于通用的样式规则，并且应该尽量避免使用 `!important`。

例如，在以下CSS规则中， `!important`会覆盖其他规则：

/* 使用 !important */
    .button {
        
      background-color: red !important;
    }
    
    .button:hover {
        
      background-color: blue;
    }

替代方案是遵循层叠顺序，并使用更具体的选择器：

/* 遵循层叠顺序 */
    .button {
        
      background-color: red;
    }
    
    .container .button:hover {
        
      background-color: blue;
    }

##### 6. 避免使用绝对定位 #####

在CSS中使用绝对定位时，元素的位置和尺寸通常会受到其父级元素和其他相邻元素的影响。这可能导致它们不在预期位置，并且难以调整。

例如，在以下CSS规则中， `position: absolute` 可能会导致布局问题：

/* 使用绝对定位 */
    .container {
        
      position: relative;
    }
    
    .sidebar {
        
      position: absolute;
      right: 0;
    }

替代方案是避免使用绝对定位，并使用更灵活的布局方法，如弹性布局或栅格布局。

##### 7. 使用盒模型 #####

CSS盒模型描述了每个HTML元素占用的空间，包括元素的内边距、边框和外边距。应该确保理解和正确使用盒模型，以便更好地控制元素的大小和位置。

例如，在以下CSS规则中， `box-sizing: border-box` 将内边距和边框包含在元素的总宽度和高度中：

/* 使用盒模型 */
    .container {
        
      width: 960px;
      padding: 20px;
      border: 1px solid black;
      box-sizing: border-box;
    }

##### 8. 避免使用浮动 #####

CSS浮动是一种将元素从其正常位置移动到容器边界的布局技术。但是，浮动可能会导致元素重叠和布局问题，并且难以控制元素的大小和位置。

例如，在以下CSS规则中， `float: left` 可能会导致布局问题：

/* 使用浮动 */
    .container {
        
      width: 960px;
    }
    
    .box {
        
      float: left;
      width: 50%;
    }

替代方案是使用更灵活的布局方法，如 flexbox 或 grid。

##### 9. 使用适当的单位 #####

在编写CSS代码时，应该使用适当的单位，以确保元素的大小和位置与页面布局一致。推荐使用相对单位（如 em、rem 和 %），特别是在响应式设计方案中。

例如，在以下CSS规则中，使用 `%` 单位可以使元素响应式布局：

/* 使用适当的单位 */
    .container {
        
      width: 80%;
      margin: 0 auto;
    }

##### 10. 避免使用 !important #####

在CSS中， `!important` 修饰符用于覆盖其他规则。但是，它可能会导致样式冲突和不必要的复杂性。应该尽量避免使用 `!important` ，而是使用更具体的选择器或优先级系统来解决样式问题。

##### 11. 使用 CSS 预处理器 #####

CSS 预处理器（如 Sass 或 Less）可以帮助提高 CSS 代码的可读性和可维护性，并且可以提供一些有用的功能，如变量、嵌套规则、mixin 和函数等。

例如，在以下 Sass 规则中，使用变量可以使 CSS 代码更容易维护和修改：

/* 使用 Sass 变量 */
    $primary-color: #007bff;
    
    .button {
      background-color: $primary-color;
    }
    
    .container {
      max-width: 960px;
    }

##### 12. 避免滥用嵌套 #####

虽然 CSS 预处理器支持嵌套规则，但应该避免滥用它们。过多的嵌套可能会导致选择器过于复杂和不必要的样式覆盖问题。

例如，在以下 Sass 规则中，滥用嵌套规则会导致选择器变得过于复杂：

/* 滥用嵌套规则 */
    .container {
      .box {
        .title {
          font-size: 24px;
        }
      }
    }

替代方案是尽可能减少嵌套规则，并使用更具体的选择器。

##### 13. 使用 CSS Modules 或其他 CSS-in-JS 方案 #####

CSS Modules 和其他 CSS-in-JS 解决方案可以帮助在组件级别上管理 CSS 样式，从而避免全局 CSS 的样式冲突问题。此外，它们还提供了其他有用的功能，如动态 CSS 样式、自动生成的类名和代码拆分等。

例如，在以下 React 组件中，使用 CSS Modules 可以使 CSS 样式局部化：

/* 使用 CSS Modules */
    import styles from './Button.module.css';
    
    function Button({ children }) {
      return <button className={styles.button}>{children}</button>;
    }

##### 14. 避免重复的样式 #####

应该尽可能避免在 CSS 代码中重复相同的样式规则。重复的样式可能会导致代码冗余和不必要的复杂性。

例如，在以下 CSS 规则中，重复的样式可能会导致冗余代码：

/* 重复的样式 */
    .container {
        
      padding: 20px;
    }
    
    .box {
        
      padding: 20px;
    }

替代方案是使用类或共享样式规则来避免重复的样式。

##### 15. 使用 CSS Grid 或 Flexbox #####

CSS Grid 和 Flexbox 是现代 CSS 布局的标准解决方案。它们提供了一种灵活的方式来组织和排列页面元素，并可以自适应不同的屏幕大小。

例如，在以下 CSS 规则中，使用 Flexbox 可以使元素在水平和垂直方向上居中：

/* 使用 Flexbox */
    .container {
        
      display: flex;
      justify-content: center;
      align-items: center;
    }

##### 16. 避免使用表格布局 #####

虽然 HTML 表格是一种布局技术，但它通常不应该用于页面布局。这是因为表格布局可能会导致样式冲突和可访问性问题。

例如，在以下 HTML 和 CSS 规则中，使用表格布局可能会导致样式冲突和意外的行为：

<table>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
      </tr>
    </table>
    
    table {
      width: 100%;
    }
    
    td {
      width: 50%;
    }

替代方案是使用 CSS Grid 或 Flexbox 进行页面布局。

##### 17. 遵循 Web Content Accessibility Guidelines (WCAG) #####

遵循 WCAG 可以确保网站的可访问性，从而使所有人都能方便地使用和理解页面内容。这包括为所有用户提供足够的对比度、使用适当的标记和标题等。

例如，在以下 CSS 规则中，使用合适的颜色和对比度可以提高可访问性：

/* 遵循 WCAG */
    .button {
        
      background-color: #007bff;
      color: #fff;
    }
    
    /* 根据 WCAG 提供足够的对比度 */
    a:focus,
    button:focus {
        
      outline: 2px solid #007bff;
      outline-offset: 2px;
    }

##### 18. 使用代码格式化工具 #####

使用代码格式化工具（如 Prettier 或 ESLint）可以使 CSS 代码具有一致的格式，从而更容易阅读和维护。

例如，在以下 CSS 代码中，使用 Prettier 可以自动格式化代码并添加必要的缩进和换行符：

/* 使用 Prettier 格式化 */
    .container {
        
      width: 960px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .button {
        
      font-size: 16px;
      background-color: #007bff;
      color: #fff;
    }

##### 19. 避免使用媒体查询过多 #####

虽然CSS中的媒体查询可以帮助我们实现响应式设计，但是过多的媒体查询可能会导致样式冗余和开销增加。应该尽可能避免在CSS中使用太多的媒体查询，并考虑使用其他解决方案，如弹性布局或 CSS Grid。

例如，在以下CSS规则中，过多的媒体查询可能会导致样式冗余：

/* 过多的媒体查询 */
    .container {
        
      width: 960px;
    }
    
    @media (max-width: 768px) {
        
      .container {
        
        width: 100%;
      }
    }
    
    @media (max-width: 576px) {
        
      .container {
        
        padding: 20px;
      }
    }

替代方案是使用更灵活的布局方法和不需要太多媒体查询的响应式设计解决方案。

##### 20. 测试CSS代码 #####

测试CSS代码可以帮助检测潜在的问题和错误，确保样式表在不同浏览器、设备和屏幕尺寸下正常工作。可以使用工具和框架，如BrowserStack、Selenium或Jest等来编写和运行CSS单元测试。

例如，在以下CSS单元测试中，使用Jest模拟了CSS规则并确保它们的行为符合预期：

/* CSS单元测试 */
    const css = `
    .container {
      width: 960px;
    }
    
    .button {
      background-color: #007bff;
      color: #fff;
    }
    `;
    
    test('CSS rules are applied correctly', () => {
        
      const container = document.createElement('div');
      container.classList.add('container');
    
      const button = document.createElement('button');
      button.classList.add('button');
      button.innerHTML = 'Click me!';
    
      document.body.appendChild(container);
      document.body.appendChild(button);
    
      expect(getComputedStyle(container).width).toBe('960px');
      expect(getComputedStyle(button).backgroundColor).toBe('rgb(0, 123, 255)');
      expect(getComputedStyle(button).color).toBe('rgb(255, 255, 255)');
    });

通过编写和运行CSS单元测试，可以确保CSS代码正确应用并且在不同浏览器、设备和屏幕尺寸下工作正常。

##### 21. 使用 CSS Variables #####

使用 CSS Variables 可以提高 CSS 代码的可维护性和可重用性。CSS Variables 允许我们定义一些特定的变量并在整个样式表中使用它们。

例如，在以下 CSS 规则中，使用 CSS Variables 可以使颜色定义更加灵活：

/* 使用 CSS Variables */
    :root {
        
      --primary-color: #007bff;
    }
    
    .button {
        
      background-color: var(--primary-color);
    }
    
    .container {
        
      --max-width: 960px;
      max-width: var(--max-width);
    }

这可以使颜色更容易修改，而不需要更改每一个样式规则。同时，也使得对于相同的属性值进行多次使用时，可以通过变量来省略冗余的代码。

##### 22. 避免全局样式 #####

应该尽可能避免使用全局样式，因为全局样式可能会导致样式污染和意外的样式覆盖问题。相反，应该使用类或 ID 这样的选择器来将样式应用于特定的元素。

例如，在以下 CSS 规则中，使用类选择器可以使样式更具体和可控：

/* 使用类选择器 */
    .container {
        
      width: 960px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .box {
        
      border: 1px solid #ccc;
    }

##### 23. 避免使用嵌入样式 #####

应该尽可能避免使用嵌入样式，因为嵌入样式可能会导致样式污染和不必要的复杂性。相反，应该在外部样式表中定义样式，并使用类或 ID 这样的选择器来将样式应用于特定的元素。

例如，在以下 HTML 代码中，应该避免使用嵌入样式：

<div style="width: 960px; margin: 0 auto; padding: 20px;">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>

替代方案是将样式定义在外部样式表中，并使用类选择器将样式应用于元素：

/* 外部样式表 */
    .container {
        
      width: 960px;
      margin: 0 auto;
      padding: 20px;
    }

<div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>

##### 24. 考虑性能问题 #####

CSS 代码也应该考虑性能问题，尤其是在处理大量数据时。应该尽可能减少 DOM 访问次数、使用 CSS 合并和压缩工具、避免使浏览器重绘和重新渲染等。此外，应该尝试最小化 CSS 规则数量，并仅在需要时使用动画和过渡效果。

##### 25. 使用CSS模块化 #####

CSS模块化是一种将样式表分割为小的、可重用的部分的方法。这使得CSS代码更加可维护和可扩展，并减少了样式冲突和代码重复。

例如，在以下CSS代码中，使用CSS模块化可以将样式表分割为不同的部分，并在需要时进行组合：

/* CSS 模块化 */
    /* _header.css */
    .header {
        
      background-color: #007bff;
      color: #fff;
    }
    
    /* _navigation.css */
    .navigation {
        
      list-style: none;
    }
    
    .navigation__item {
        
      display: inline-block;
      padding: 10px;
    }
    
    /* main.css */
    @import "header.css";
    @import "navigation.css";
    
    .container {
        
      width: 960px;
      margin: 0 auto;
      padding: 20px;
    }

##### 26. 对齐代码缩进 #####

应该对齐CSS代码缩进以提高代码可读性和可维护性。通常建议使用2或4个空格作为缩进标准，并且在选择器、属性和值之间留有适当的空格。

例如，在以下CSS规则中，使用适当的缩进和空格可以使样式更加易于理解和调整：

/* 使用适当的缩进和空格 */
    .container {
        
      width: 960px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .button {
        
      background-color: #007bff;
      color: #fff;
      padding: 10px 20px;
    }