前端练习：CSS和SCSS-DEV365 开发者社区

让我们通过一些CSS最佳实践，其中示例：

在CSS中

使用外部样式表：

而不是内联样式或内部样式，而是使用外部样式表。创建一个单独的CSS文件并将其链接到您的HTML文档。这促进了代码可重复性和可维护性。

示例： styles.css

 /* styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Your content here -->
</body>
</html>

遵循CSS方法论：使用CSS方法论（例如BEM（块，元素，修饰符））组织您的CSS类并使它们更易于管理。

示例：

<div class="header">
  <h1 class="header__title">Welcome to our website</h1>
</div>

styles.css

.header {
  background-color: #007bff;
  padding: 20px;
}

.header__title {
  color: #fff;
  font-size: 24px;
}

避免使用ID进行样式： ID具有比类更高的特异性，这可能会导致压倒式样式的问题。为JavaScript交互的保留ID，并使用类进行样式。

html：

<div class="header" id="main-header">
  <h1 class="header-title">Welcome to our Website</h1>
</div>

CSS（避免用于样式的ID）：

/* styles.css */
.header {
  /* Common styles for all headers */
  font-size: 24px;
  color: #333;
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
}

/* Specific styles for the main header */
#main-header {
  /* Avoid styling directly using the ID */
  border-bottom: 2px solid #007bff;
}

保持选择器的特异性低：使用简单的选择器，避免对类的深层嵌套。这使您的样式更加可维护，并降低了意外风格的风险。

html：

<div class="container">
  <h2 class="section-title">Section Title</h2>
  <p class="section-text">This is some text in the section.</p>
</div>

CSS（保持选择器特异性低）：

/* styles.css */
.container {
  /* Specificity kept low for container class */
  background-color: #f0f0f0;
  padding: 20px;
}

.container .section-title {
  /* Specificity kept low for section title */
  font-size: 24px;
  color: #007bff;
}

.container .section-text {
  /* Specificity kept low for section text */
  font-size: 16px;
  color: #333;
}

在此示例中，我们通过使用类选择器将选择器的特异性保持较低。我们避免使用ID或元素选择器，这将增加特异性并使覆盖样式更难。通过利用类选择器进行样式，我们保持了更模块化和灵活的方法，从而使样式更改和更好的关注点分开。

限制！重要的是：避免使用!important覆盖样式。相反，重构CSS具有更好的特异性或使用更特定的选择器。

html：
```
<button class="btn btn-primary">Click Me</button>
```
CSS（避免！重要）：
```
/* styles.css */
.btn {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

/* Avoid using !important, and instead, use proper class specificity */
```
在此示例中，我们避免使用!important。我们依靠类选择器来进行样式，这有助于保持适当的特异性。通过使用适当的类选择器，我们确保.btn-primary样式将优先于基本.btn样式。使用适当的类命名和特异性而不是求助于!important来维护干净可维护的代码库至关重要。

使用Flexbox或网格进行布局：拥抱CSS Flexbox或网格，以创建响应式和灵活的页面布局，因为它们提供了强大的布局功能。

示例：

/* styles.css */
.container {
  display: flex;
  justify-content: space-between;
}

.sidebar {
  flex-basis: 30%;
}

.main-content {
  flex-basis: 70%;
}

html：

<div class="container">
  <div class="sidebar">
    <!-- Sidebar content -->
  </div>
  <div class="main-content">
    <!-- Main content -->
  </div>
</div>

使用CSS变量（自定义属性）：利用CSS变量在整个样式表中存储和重复使用值。它们促进一致性并使更新全局风格变得更加容易。

示例：
```
/* styles.css */
:root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
}
```
通过删除不必要的空格和评论来优化和缩小CSS：最大程度地减少CSS文件。您可以使用各种工具和插件在构建或部署期间自动化此过程。

通过遵循这些CSS最佳实践，您可以编写更清洁，可维护和性能的样式表，从而使您的前端开发过程更加有效。

在SCSS中

使用嵌套的选择器明智地：SCS可以让您嵌套选择器，但是嵌套太深会导致过度特定的CSS输出并增加CSS特异性冲突的风险。尽可能避免筑巢超过三个层次。


.header {
  .nav {
    ul {
      li {
        a {
          color: blue;
        }
      }
    }
  }
}

// Better practice: Limit nesting
.header {
  .nav {
    li {
      a {
        color: blue;
      }
    }
  }
}

使用变量：利用变量来存储可重复使用的值，例如颜色，字体大小或间距。这使维护和修改样式变得更容易。


$primary-color: #007bff;
$font-size-base: 16px;

// Usage
.header {
  background-color: $primary-color;
  font-size: $font-size-base;
}

避免使用ID选择器：优先使用类选择器而不是ID选择器。 ID选择器具有更高的特异性，使其更难覆盖并导致僵化的CSS。

// Bad practice: Using ID selector
#main-container {
  // styles...
}

// Better practice: Using class selector
.main-container {
  // styles...
}

与部分模块化：将您的SCSS代码分为较小的部分文件。这有助于组织您的样式并使它们更易于管理。
```
styles/
|-- _variables.scss
|-- _header.scss
|-- _footer.scss
|-- main.scss
```

使用@Extend少：@extend对于重复使用样式很有用，谨慎，因为它可能导致肿胀的CSS。仅当您需要在选择器之间共享大量样式时使用它。

// Bad practice: Overuse of @extend
.button {
  border: 1px solid #ccc;
  padding: 10px;
}

.submit-button {
  @extend .button;
  background-color: #007bff;
}

.cancel-button {
  @extend .button;
  background-color: #dc3545;
}

// Better practice: Use classes instead of @extend
.button {
  border: 1px solid #ccc;
  padding: 10px;
}

.submit-button {
  @extend .button;
  background-color: #007bff;
}

.cancel-button {
  @extend .button;
  background-color: #dc3545;
}

使用Mixins作为可重复使用的样式：Mixins允许您定义可重复使用的样式块，这些样式可以包含在多个选择器中。

// Mixin
@mixin button-styles {
  border: 1px solid #ccc;
  padding: 10px;
}

// Usage
.button {
  @include button-styles;
}

.submit-button {
  @include button-styles;
  background-color: #007bff;
}

.cancel-button {
  @include button-styles;
  background-color: #dc3545;
}

使用％占位符选择器扩展：当您需要扩展样式但不想创建其他CSS类时，请使用%使用占位持有人选择器来防止生成额外的CSS。

// Placeholder selector
%button-styles {
  border: 1px solid #ccc;
  padding: 10px;
}

// Usage
.button {
  @extend %button-styles;
}

.submit-button {
  @extend %button-styles;
  background-color: #007bff;
}

.cancel-button {
  @extend %button-styles;
  background-color: #dc3545;
}

使用parent selector &：&符号允许您参考父级选择器，使您能够创建更具体的样式。

// Nested selector
.button {
  &:hover {
    background-color: #ddd;
  }
}

// Output
.button:hover {
  background-color: #ddd;
}

这些最佳实践应该帮助您编写更清洁，更可维护的SCSS代码。请记住，良好SCSS的关键是组织，可重复使用和避免过度特定的CSS输出。

特色文章