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

 2021-04-27 

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引擎来说,这已经不是什么问题了

需要注意的一件事。 heightwidth在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。