关于HTML属性或CSS样式的最佳实践是什么


what is best practice in regards to HTML propertys or CSS styling

与CSS相比，使用html属性(例如width = ")是否有任何不利之处或优势？

示例：

1
<img alt="" src="images/img.png" width="40%">

vs

1
<img alt="" src="images/img.png" style="width: 40%;">

当验证代码W3时出现错误"'a？widtha'？ imga上的属性元素已过时。请改用CSS。\\'

我默认使用CSS，但我的同事似乎默认使用其他方式。在与他们讨论之前，我想确保我清楚地知道在html中设置宽度是从旧html版本中遗留下来的，并且为了将来校对和最佳实践，我们应该使用CSS。

其他示例是：

列表类型：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>

    <li type="none">hello
</li>


</ul>


<ul style="list-style-type: none;">
   
<li>
hello
</li>


</ul>

文本对齐方式

1
2
<p align="center">hello</p>
<p style="text-align: center;">hello</p>

*净度：
我通常使用样式表，但是在示例中，为了进行更直接的比较，我使用了内联样式。

相关讨论

这是一个历史文物。

过去，最佳做法是使用图像的height和width属性来加快DOM的渲染速度。 HTML引擎将知道为图像分配多少空间。这也是为什么如果您使用IDE和WYSIWYG编辑器插入图像，则会添加它们的原因。对于现代浏览器和CSS引擎来说，这已经不是什么问题了

需要注意的一件事。 height和width在HTML5中的图像上不是过时的，但是必须使用像素。

参考：https：//developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img和https://www.w3.org/TR/2011/WD-html-markup-20110405 /img.html

那现在的最佳实践是什么？

我认为不要使用该属性。它阻碍了响应能力，媒体查询等。

当然，出于相同的原因，请勿使用内联样式，除非绝对必要。

例外

使用HTML电子邮件的属性。电子邮件客户端中的CSS支持令人震惊且不一致。

意大利总是更好地分离责任。纯粹利用HTML进行结构设计，并使用CSS来利用相应的选择器来设计结构样式。为了获得最佳结果，请始终利用网格系统来定位元素。我建议查看Bootstrap4(https://getbootstrap.com/docs/4.0/getting-started/introduction/)，以利用现成的网格对齐类来实现响应式设计。 Bootstrap还具有许多更出色的实用程序可利用。希望这会有所帮助。

正在参考问题...

例如，这是马铃薯的原始大小(原始大小)：

1
<img src="https://images-na.ssl-images-amazon.com/images/I/811fGdwqf%2BL._SX355_.jpg">

比方说，我们将"马铃薯"的宽度设置为40％...突然我们决定将其设置为80％，而不碰到该元素。

如果我们在该属性内使用属性表示，通常可以通过编写以下普通CSS来覆盖它：

1
2
3
img {
  width : 80%;
}

1
<img src="https://images-na.ssl-images-amazon.com/images/I/811fGdwqf%2BL._SX355_.jpg" width="40%">

但是，如果我们在该属性内使用内联样式，则需要使用!important来使用CSS覆盖该属性样式。

1
2
3
img {
  width : 80% !important;
}
1
<img src="https://images-na.ssl-images-amazon.com/images/I/811fGdwqf%2BL._SX355_.jpg" style="width:40%;">

来源：
https://css-tricks.com/presentation-attributes-vs-inline-styles/

在两种情况下，都使用内联方法来更改图像的宽度，不建议这样做。建议使用外部CSS /样式表文件，并将所有与样式相关的代码放在此处。尽可能将HTML文件用于结构/布局，并避免使用样式。为什么要使用外部样式？因为您可以将样式应用于许多页面，所以只需一次编辑即可应用于所有页面，可以完全控制，减小文件大小，减少加载时间，提高页面排名等。

始终使用CSS。最佳实践也是将您的CSS外包到标头中的样式标签中，或者最好将其外包到单独的style.css文件中，并在您的元素上放置一个类。

这样，您就可以将代码分为布局和样式，从而使其更加简洁。

当您有更多经验时，请看一下SCSS。

相关讨论