web前端开发做网页会有哪些无效率的代码

编写好的前端代码要比了解每一个HTML标签，CSS选择器或最新的前端特性和技术还要多。正如我在最近的一篇博客中提到的，编写好的代码需要很多的耐心和练习。但是，你怎么知道你是否正在编写好的代码，特别是如果你只是在学习如何编写代码呢？

使用在几个网站上找到的真实案例，让我们来看看在编写代码和评估其质量时常见的“红旗”。

复杂，超标准选择器

注意复杂的CSS选择器。例如：

.wrapper .main .post a {...}

这些是CSS中最昂贵的选择器之一，因为浏览器必须解析许多额外的元素和选择器。尽量让您的选择器尽可能精益：

.post a {...}

而不是有一个特定的选择器，通常最好为特定的元素创建一个类：

继续{...}

选择器中的限定符也应该避免，因为它们不可重用，太具体，并为浏览器创建更多的工作。的nav和p限定符在以下选择器是这样一个例子：

nav.social { 向左飘浮; } p.intro { font-weight：bold; }

如果在某个时候你需要在一个范围内使用这个.social班，.intro避免不得不挖掘你的CSS来解决你应该从一开始就应该做的正确，或者更糟糕的是，重写规则不必要的。

依靠父级选择器

父选择器降低了子元素的特殊性。有时你不能避免它们（例如锚元素），但是如果你有如下的选择器：

.sidebar { ... } .sidebar .title { ... }

更好的方法是使用名称空间作为修饰符。

.sidebar { ... } .sidebar-title { ... }

这保持sidebar-title自包含和模块化 - 它不依赖父母选择器，可以在任何地方使用。

重复CSS

避免重复相同的代码块。在整个样式表中查找重复多次的属性/值对，然后对它们进行逻辑分组，以便该代码块只出现一次。

标签{ 显示：内联块; } .button { 显示：内联块; border-radius：10px; } .field { 显示：内联块; border-radius：10px;  填充：5px; }

总是认为“干”（不要重复自己）：

。标签，.button， .field { 显示：内联块; } .button， .field { border-radius：10px; } .field {  填充：5px; }

重置和强制CSS值

留意规则，重写CSS属性或将其设置回初始值。例如：

h2 {  font-size：1.2em; font-weight：700; 填充底部：.5em; border-bottom：1px solid;  }

h2 样式然后在另一个规则下进一步重置：

.post h2 {  font-weight：500; padding-bottom：0; border-bottom：none; }

添加新组件时，不需要重新编码或撤消已经使用现有CSS解决的模式和问题。相反，更好的解决方案是创建以下规则：

h2 { font-size：1.2em; } ... .secondary-headline {  font-weight：700; 填充底部：.5em; border-bottom：1px solid;  } 。帖子标题 {  font-weight：500; }

此外，!important声明不应该用来强制CSS值 - 避免使用它们，除非绝对必要。

.last { 边界：没有！重要的; }

!important打破了级联的自然秩序，并且在被滥用时会导致维护和特殊的噩梦。很少有使用案例!important，例如：暂时测试或调试CSS的问题，压倒一切的某些内嵌样式，当你有过HTML无法控制，并帮助辅助功能-只是要小心它。

过度的标记

寻找不必要的用于布局的HTML标签：

用户体验设计</ h4> </ p>

有没有必要换块级h4的p。如果您使用的<p>是给予<h4>额外的边距或填充，则需要在CSS中解决。

ID而不是类

避免在任何可以使用课程的地方使用ID。ID在特异性上很重，不能被重复使用。下面显示的导航ID只能在页面中使用一次。

<ul id =“nav”> ... </ UL>

如果您需要添加导航组件，该怎么办？改用类：

<ul class =“main-nav nav”> ... </ UL> ... <ul class =“footer-nav nav”> ... </ UL>

.nav a { 显示：块; 白颜色; 填充：5px; } .main-nav a { border-bottom：1px solid; font-size：1.1em; } .footer-nav a { border-bottom：1px点缀灰色  font-size：.85em; }

最好使用ID作为JavaScript钩子或页面中的片段标识符。当然，避免使用一个ID作为样式，JavaScript和片段标识符。这样做会使您的架构变得脆弱，因为您正在设置CSS，JavaScript和片段标识符之间的依赖关系。

闭幕的想法

考虑不周的前端代码可能会对维护和开发产生长期的影响。编写代码时，您的目标应该是确保它是可重用，可维护和可扩展的。您的CSS也应该是可预测的，所以如果您需要更新或添加新的组件，它们不应该影响您的网站的其他部分。

请记住，在某个时候，您的站点或应用程序将需要扩展，这可能需要更多的开发人员来维护和维护代码。这就是为什么编写可以由设计人员和开发人员首次查看我们的代码很容易管理的代码的重要原因。