Web 开发人员最常见的 CSS 错误

级联样式表 (CSS) 是一种样式表语言，用于在 HTML 标记上应用样式。大多数人认为 CSS 很容易学习，但事实上 CSS 很容易学习，但很难掌握。掌握 CSS 需要大量练习。每个 Web 开发人员在使用 CSS 时都会犯一些常见错误。犯错没什么大不了的，但是当你在做一个大型项目时，小错误可能会让你头疼。所以，你应该知道你的错误，你应该从中吸取教训。在本文中，我们将了解Web 开发人员最常犯的 5 个 CSS 错误。

1. 不使用一致的命名：在您的项目中使用单一的命名约定是一种很好的做法，因为如果您在一个团队中工作，那么保持一致性很重要，否则一切都会变得一团糟。我们还应该为 class 和 id 使用有意义的名称，以便我们更容易调试我们的代码，它也使我们的代码更具可读性。

例子：

HTML

  

    

  

    

        Welcome To GFG
    
      
    

        Top 5 CSS mistakes that 
        web developer makes
    

  

在上面的例子中，使用的类名是“spiderMan”和“black-widow”。这种做法使我们的代码难以阅读，并且如果我们使用不适当的类和 id 名称，它也会显得不专业。在这里，使用了两种命名约定（即驼峰式和烤肉式）。它使我们的代码看起来不一致和丑陋。因此，最好为您的项目使用单一命名约定并使用适当的类和 id 名称。

我们可以通过以下方式使用单一的命名约定（在本例中我们使用 camelCase）和适当的名称：

HTML

  

    

  

    

        Welcome To GFG
    
      
    

        Top 5 CSS mistakes that 
        web developer makes
    

  

上面的代码看起来比前面的代码更好，更一致。这种做法还可以节省您的时间，因为现在您不必考虑花哨的变量名称，如“spiderman”和“blackwidow”。

2.使用内联CSS：内联CSS是一种将CSS链接到HTML的方法。我们可以使用这种方法来链接 CSS，它没有任何问题，但我们应该知道什么时候应该使用内联链接 CSS，什么时候不应该。作为程序员，我们应该始终遵循 DRY（Don't Repeat Yourself）原则。内联 CSS 阻止了重用我们代码的可能性，因为其中的 CSS 属性只针对一个元素，因此使用 CSS 类是一种更好的做法，因为它们是为了重用。

例子：

HTML

  

    

  

    
RAY
    
SHYAM
    
RIDHIMA
    
MAYANK
    
ARJUN

  

在上面的例子中，我们有五个 h2 元素，它们都具有相同的样式属性，我们在这里使用了内联 CSS，这违反了 DRY 原则。因此，我们可以定义一个类来代替内联 CSS，这样可以节省您的时间，并使您免于内联 CSS 可能造成的混乱。

我们可以通过以下方式更好地重写上面的代码：

HTML

  

    
      
    

  

    
RAY
    
SHYAM
    
RIDHIMA
    
MAYANK
    
ARJUN

  

建议使用内部或外部 CSS 而不是内联 CSS，因为这可能会导致代码混乱，并且更新内联 CSS 也很困难。

3. 使用绝对单位而不是相对单位：在某些情况下使用绝对单位很好，但如果你只使用绝对单位，那就大错特错了。在当今世界，我们希望我们的网站具有响应性，以便我们可以在不同的设备上使用它们，因此元素有必要相对于窗口大小进行缩放。当窗口大小发生变化时，绝对单位不会缩放，因此它们对我们的响应式网站不太有利。因此强烈建议使用相对单位而不是绝对单位。一些相对单位是 vh、%、em、rem 等。

例子：

h1 {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 8px;
}

在上面的代码中，使用了对我们的响应式网站不太有利的绝对单位，因此我们可以通过以下方式使用相对单位来代替绝对单位：-

h1 {
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: 0.5em;
}

4. 不在代码中添加注释：作为开发人员，我们多次听说在代码中添加注释是一种很好的做法。注释可以使您免于数小时的调试。如果你在一个团队中工作，或者如果你在做一些大型的工作，那么你的代码中一定要添加注释，这样你的队友就可以很容易的快速理解你的 CSS，也可以让你调试也变得容易.对您的 CSS 代码进行注释是必要的，因为即使是单个 HTML 页面也可能有很多与之链接的 CSS，因此强烈建议使用注释。请注意，您不应该使用长而不恰当的评论，评论应该简短而恰当。

5. 只使用一个样式表：如果你在做一些小项目，使用一个样式表是可以的。但是如果你正在做一些大型项目，那么强烈建议将样式表拆分成不同的样式表，因为这样会变得易于维护并且提供更好的模块化。我们可以为不同的修复提供不同的 CSS 文件。

例子：

在上面的示例中，有两个样式表。一种用于深色主题，一种用于浅色主题。