如何避免一些常见的CSS错误 - 北京传诚信

      如何避免一些常见的CSS错误

如今，CSS在网站设计和开发过程中被广泛使用。但是有许多人习惯于使用CSS的旧内联CSS方法。除此之外，还有许多人没有正确实现CSS或正确定义类。有几个基本提示，每个人都应该知道，以使其正确。

全世界大多数网站设计师都使用CSS来增强网站的功能和呈现。但是，参与网站设计的人和其他任何地方的人都做得对吗？为了确保你这么做，这里有一些你应该避免的CSS错误。

1、使用id：

特殊层次之一是你构建的选择器类型：ids与类和标签。举个例子：

#my-link {color：red; } 

.my-link {color：green;} 

a {color：blue; }

使用第一个是三个中最具体的（id）。由于每个页面只能使用一次ID，因此它会获胜。检查以下示例：

假设没有其他风格，文字的颜色是什么？因此，该文本将在网站上显示为红色。遵循CSS特异性，它是下一个最具体的风格是类。在代码中使用id的问题是我们很少看到上面的示例，在给定项目上有一个id或类或标记选择器。ID通常用于上下文中：

#header a {border：2px dashed＃000; }

2、长选择器：

#header #title .left-side img.logo（不透明度：0.5）

这个选择器不仅使用id，而且它也很长。就像ids一样，如果你使用长选择器（深度超过三级），你就会增加特异性。因此，随着定期维护和更新的发生，您将随着时间的推移而复杂化问题。解决方案？不要写长选择器！对于我们之前的例子，有没有理由单独使用.logo是不够的？可能不是。通常，您的选择器应该只有两个级别，或者最多三个。

3、内联样式：

内联样式是特异性错误，也违反了我们使用CSS的主要原因; 风格与结构分离。众所周知，网站设计师停止使用表格进行布局并在外部样式表中使用CSS，他们也停止将我们的样式与我们的结构元素混合，并停止使用结构元素来生成样式。

从特异性的角度来看，内联样式只能被重要标志覆盖。通常，这意味着如果有人在该元素上编写样式并使用重要标记，则他们这样做是作为被动而非主动的行为。

4、自上而下的CSS：

现在我们正在走出特异性，更多地讨论可能已经进入工作流程的坏习惯。让我们想象一下，一旦我们在HTML中编写了基本结构，我们就收到了一个设计补偿，并开始为它添加样式。一些CSS的问题在于你可以告诉它是以自上而下的方式编写的。这模仿HTML布局，而不是抽象设计元素，通常使用上下文的id，例如#header，＃content。这通常导致长选择器并且代码将非常粗略地进行调试和维护。可以通过从页面中抽象设计组件来修复此CSS。这也有助于消除代码中的冗余。

5、冗余/ DRY违规：

冗余意味着你倾向于重复你所做的事情（就CSS而言）。通常在网络编程和各种编程中都会理解，如果你重复自己，你就是在浪费时间，因此就是格言，DRY（不要重复自己）。这同样适用于CSS。举个例子：

-有的标题{字体重量：粗体;}

-有些-其他标题{字体：重量：粗体; 红色}

我们可以将这些组合在一起

.some-title，some-other-title {font-weight：bold;}

。有些-其他标题{颜色：红;}

另一方面，你也可以使用它们的通用名称，并添加一个修饰符类来与标题一起显示它是不同的颜色：

标题

因此，如果我们做对了，就会有很多这样的小滴头，可以真正增强网站并优化性能。