正确的HTML元素样式

时间：2022-09-08 14:10:38

I know you can do this:

我知道你可以做到:

<img style="position: absolute;" src="test.png" alt="Test image" width="50" height="50" />

I don't use this first method, because I know external stylesheets are meant to seperate the CSS from the HTML code. And I like to keep it that way.

我不使用第一个方法，因为我知道外部样式表是用来将CSS从HTML代码中分离出来的。我喜欢这样。

<img id="foobar" src="test.png" alt="Test image" width="50" height="50" />

Sometimes I use this method, but when I look at some of the professional HTML coding of big sites like Facebook, Instagram or Twitter I see that they use a lot of container divs, which makes me unsure whether I'm doing it right or not.

有时我使用这种方法，但当我看到一些大型网站(如Facebook、Instagram或Twitter)的专业HTML编码时，我发现它们使用了大量的容器div，这让我不确定自己的做法是否正确。

<div id="foobar">
    <img src="test.png" alt="Test image" width="50" height="50" /> //use 'src' in place of 'sc'
</div>

I found that I mostly use this method for some reason I actually don't really know. But in this case I just add styling to the div and not directly to the img. Or when I do, I directly add styling to the img element by selecting it with #foobar img{ ... } in the CSS.

我发现我使用这个方法的原因是我真的不知道。但在本例中，我只是将样式添加到div中，而不是直接添加到img中。或者当我这样做时，我通过使用#foobar img{…在CSS }。

<div id="foo">
    <img id="bar" src="test.png" alt="Test image" width="50" height="50" />
</div>

Usually I do it this way if a container is just necessary to get the job done, where I would have some styling on the img and some on the div#foo element.

通常我是这样做的，如果需要一个容器来完成这项工作，我将在img上使用一些样式，在div#foo元素上使用一些样式。

I know there probably are more ways, but it's mainly these last two methods I'm not too sure about when to use them. I know there are other HTML elements out there but I just took a div and img for demonstration.

我知道可能有更多的方法，但主要是最后两种方法，我不太确定何时使用它们。我知道还有其他HTML元素，但我只是拿div和img做演示。

With that being said, I would like to know what are the pros and cons of each and which method should be a good practise?

说到这里，我想知道每种方法的优缺点，以及哪种方法应该是一个很好的实践?

3 个解决方案

#1

4  

Many unnecessary tags creates a problem known as "Tag Soup" (ref). This is an issue in hand-written HTML; your goal is to use CSS styling to the maximum potential and obviate the need for excess and meaningless tags.

许多不必要的标签产生了一个问题，称为“标签汤”(ref)。这是手写HTML中的一个问题;您的目标是将CSS样式化到最大的潜力，并消除多余和无意义标签的需求。

When creating a document "properly", you ought to start from a document outline perspective. Imagine the page is a report, and it will be read top-to-bottom, and is left-aligned and simple in style. You design this hierarchy with a minimum of markup, making full use of the header, section, article, and footer tags. In the "old days", you would use divs instead.

在“适当”创建文档时，应该从文档大纲的角度开始。假设页面是一个报告，它将从头到尾地读取，并且是左对齐的，样式简单。您使用最少的标记来设计这个层次结构，充分利用页眉、节、文章和页脚标记。在“旧日”，你会用divs代替。

Next, you apply style to affect the appearance, including the positioning of elements in the document relative to one another. This is where any non-semantic divs can be added, to facilitate positioning and organization within the box model. Again, you still try to keep wrapping or non-semantic tags to a minimum.

接下来，应用样式来影响外观，包括文档中元素相对于其他元素的位置。这是可以添加任何非语义div的地方，以促进box模型中的定位和组织。同样，您仍然试图将包装或非语义标记保持到最小。

Taking all that into account, often, large sites will not be composed of a clean and strictly semantic document outline. Most often, these sites are assembled by code, constructing dynamic bits of content into the overall page. In these scenarios, more non-semantic wrapping tags are often involved as a byproduct of modular, self-contained code generating fragments of HTML. Further, web applications may necessitate wrapping tags to aid in dynamic content redrawing via AJAX or other javascript actions.

考虑到所有这些，大型站点通常不会由一个干净、严格的语义文档大纲组成。通常，这些站点是通过代码进行组装的，将动态的内容片段构建到整个页面中。在这些场景中，更多的非语义包装标签通常是模块化、自包含代码生成HTML片段的副产品。此外，web应用程序可能需要包装标记，以便通过AJAX或其他javascript操作帮助动态内容重绘。

Where CSS comes in to play is also a factor in adding non-semantic wrapping tags. Because of CSS specificity (magic!), it is occasionally desired to have some extra "handles" you can use to get really, really specific on a particular tag combination.

CSS在其中发挥作用也是添加非语义包装标签的一个因素。由于CSS的特殊性(魔法!)，它偶尔需要一些额外的“句柄”，您可以使用它来获得真正的，非常具体的特定的标签组合。

The take-away is to write the cleanest, most semantic code you can manage in your project. Beyond being minimal and semantic, there isn't a "proper way", per se.

所需要做的就是编写最干净、最有语义的代码。除了最基本的和语义上的，根本就没有“正确的方法”。

Further Reading

进一步的阅读

#2

0  

In my opinion there is no absolute answer.It depends on your design.

在我看来，没有绝对的答案。这取决于你的设计。

If you have a lot of similar sections in your site that you want to style the same, you should use the div container (or other elements such as <nav>, <header> etc...).

如果您的站点中有许多相似的部分，您希望样式相同，那么应该使用div容器(或者其他元素，如

The advantage of this method is that you can style other elements inside the section without giving each one a class attribute or id, thus, making you code cleaner and easier to maintain.

这种方法的优点是，您可以在不给每个元素一个类属性或id的情况下对节中的其他元素进行样式化，从而使您的代码更清晰、更易于维护。

If you want to style a unique element I thing it's best to use the id attribute and add the CSS to this id.

如果您想要样式化一个唯一的元素，最好使用id属性并将CSS添加到这个id中。

Remember that id is unique, so, if you have two elements in the same page that will have the same CSS you'll have to duplicate your CSS code and it's never a good idea.

记住id是唯一的，所以，如果你在同一个页面中有两个元素相同的CSS，你必须复制你的CSS代码，这不是一个好主意。

#3

0  

Main Reason for using style sheets is the ability to cache it in websites thus making load time faster once initially loaded. The reason why you see some elements with styling on the html itself maybe because its injected via server side code or by client side script. Where that part of code is literally invisible to FB developers and they would instead be seeing only a few lines of server code, so on their side it might not mean much as to how styling is done whether each element is addressed on style sheet or on html itself.

使用样式表的主要原因是能够将其缓存到网站中，从而使加载时间在最初加载时更快。您之所以在html上看到一些具有样式的元素，可能是因为它是通过服务器端代码或客户端脚本注入的。在这部分的代码就是无形的facebook开发者,取而代之的应该是看到只有几行服务器代码,所以在他们一边也许并不意味着什么样式如何完成每个元素是否解决在样式表或html本身。

Another Reason might be when there is too much styling done with many classes on top of each other (nested classes) the final option may be to use it on the html element itself as it takes highest precedence and overrides any styles done by classes or any other form.

另一个原因可能是，当在每个其他的(嵌套类)上有太多的类时，最终的选择可能是在html元素本身上使用它，因为它的优先级最高，并且覆盖了类或其他形式所做的任何样式。

Many Reasons to use styles that way but generally its easier for developers to keep clean html/css/script and if possible separation but when things get complicated there comes a time when breaking the normal practice actually makes it easier...

这样使用样式有很多原因，但一般来说，开发人员更容易保持干净的html/css/脚本，如果可能的话，还可以进行分离。

#1

4  

Many unnecessary tags creates a problem known as "Tag Soup" (ref). This is an issue in hand-written HTML; your goal is to use CSS styling to the maximum potential and obviate the need for excess and meaningless tags.

许多不必要的标签产生了一个问题，称为“标签汤”(ref)。这是手写HTML中的一个问题;您的目标是将CSS样式化到最大的潜力，并消除多余和无意义标签的需求。

When creating a document "properly", you ought to start from a document outline perspective. Imagine the page is a report, and it will be read top-to-bottom, and is left-aligned and simple in style. You design this hierarchy with a minimum of markup, making full use of the header, section, article, and footer tags. In the "old days", you would use divs instead.

在“适当”创建文档时，应该从文档大纲的角度开始。假设页面是一个报告，它将从头到尾地读取，并且是左对齐的，样式简单。您使用最少的标记来设计这个层次结构，充分利用页眉、节、文章和页脚标记。在“旧日”，你会用divs代替。

Next, you apply style to affect the appearance, including the positioning of elements in the document relative to one another. This is where any non-semantic divs can be added, to facilitate positioning and organization within the box model. Again, you still try to keep wrapping or non-semantic tags to a minimum.

接下来，应用样式来影响外观，包括文档中元素相对于其他元素的位置。这是可以添加任何非语义div的地方，以促进box模型中的定位和组织。同样，您仍然试图将包装或非语义标记保持到最小。

Taking all that into account, often, large sites will not be composed of a clean and strictly semantic document outline. Most often, these sites are assembled by code, constructing dynamic bits of content into the overall page. In these scenarios, more non-semantic wrapping tags are often involved as a byproduct of modular, self-contained code generating fragments of HTML. Further, web applications may necessitate wrapping tags to aid in dynamic content redrawing via AJAX or other javascript actions.

考虑到所有这些，大型站点通常不会由一个干净、严格的语义文档大纲组成。通常，这些站点是通过代码进行组装的，将动态的内容片段构建到整个页面中。在这些场景中，更多的非语义包装标签通常是模块化、自包含代码生成HTML片段的副产品。此外，web应用程序可能需要包装标记，以便通过AJAX或其他javascript操作帮助动态内容重绘。

Where CSS comes in to play is also a factor in adding non-semantic wrapping tags. Because of CSS specificity (magic!), it is occasionally desired to have some extra "handles" you can use to get really, really specific on a particular tag combination.

CSS在其中发挥作用也是添加非语义包装标签的一个因素。由于CSS的特殊性(魔法!)，它偶尔需要一些额外的“句柄”，您可以使用它来获得真正的，非常具体的特定的标签组合。

The take-away is to write the cleanest, most semantic code you can manage in your project. Beyond being minimal and semantic, there isn't a "proper way", per se.

所需要做的就是编写最干净、最有语义的代码。除了最基本的和语义上的，根本就没有“正确的方法”。

Further Reading

进一步的阅读

#2

0  

In my opinion there is no absolute answer.It depends on your design.

在我看来，没有绝对的答案。这取决于你的设计。

If you have a lot of similar sections in your site that you want to style the same, you should use the div container (or other elements such as <nav>, <header> etc...).

如果您的站点中有许多相似的部分，您希望样式相同，那么应该使用div容器(或者其他元素，如

The advantage of this method is that you can style other elements inside the section without giving each one a class attribute or id, thus, making you code cleaner and easier to maintain.

这种方法的优点是，您可以在不给每个元素一个类属性或id的情况下对节中的其他元素进行样式化，从而使您的代码更清晰、更易于维护。

If you want to style a unique element I thing it's best to use the id attribute and add the CSS to this id.

如果您想要样式化一个唯一的元素，最好使用id属性并将CSS添加到这个id中。

Remember that id is unique, so, if you have two elements in the same page that will have the same CSS you'll have to duplicate your CSS code and it's never a good idea.

记住id是唯一的，所以，如果你在同一个页面中有两个元素相同的CSS，你必须复制你的CSS代码，这不是一个好主意。

#3

0  

Main Reason for using style sheets is the ability to cache it in websites thus making load time faster once initially loaded. The reason why you see some elements with styling on the html itself maybe because its injected via server side code or by client side script. Where that part of code is literally invisible to FB developers and they would instead be seeing only a few lines of server code, so on their side it might not mean much as to how styling is done whether each element is addressed on style sheet or on html itself.

使用样式表的主要原因是能够将其缓存到网站中，从而使加载时间在最初加载时更快。您之所以在html上看到一些具有样式的元素，可能是因为它是通过服务器端代码或客户端脚本注入的。在这部分的代码就是无形的facebook开发者,取而代之的应该是看到只有几行服务器代码,所以在他们一边也许并不意味着什么样式如何完成每个元素是否解决在样式表或html本身。

Another Reason might be when there is too much styling done with many classes on top of each other (nested classes) the final option may be to use it on the html element itself as it takes highest precedence and overrides any styles done by classes or any other form.

另一个原因可能是，当在每个其他的(嵌套类)上有太多的类时，最终的选择可能是在html元素本身上使用它，因为它的优先级最高，并且覆盖了类或其他形式所做的任何样式。

Many Reasons to use styles that way but generally its easier for developers to keep clean html/css/script and if possible separation but when things get complicated there comes a time when breaking the normal practice actually makes it easier...

这样使用样式有很多原因，但一般来说，开发人员更容易保持干净的html/css/脚本，如果可能的话，还可以进行分离。

标签：

相关文章