将 css 中的样式添加到 HTML 5 的语义元素是否正确? [英] Is it right to add style in css to semantic elements of HTML 5?

问题描述

将样式添加到 html 5 语义(导航、页眉、页脚等...)，就像我们将它们添加到 div 一样，对吗?使用它们而不是常规 div?

有一次我从我尊敬的人那里听说，我们不应该向 html 5 语义元素添加任何样式 - 仅在确实需要添加一点时才添加，但不要向该元素添加太多样式.他说得对吗?

例如

<ul>…………………………………………………………………………………………………………………………………………<ul></nav>导航{背景颜色: .....宽度: ....高度: ......利润: .....颜色: ......填充:......}

代替

<div id="导航"><ul>…………………………………………………………………………………………………………………………………………<ul>

</nav>#导航{背景颜色: .....宽度: ....高度: ......利润: .....颜色: ......填充:......}

我们应该怎么做才对?编码这个的正确方法是什么?什么是完美的处理方式?

解决方案

我同意.避免向语义元素添加样式.这是因为当我们谈论事物的外观"时，这些元素没有添加任何新内容.

请记住，您要避免冗余.如果您需要一个块元素，您正在考虑外观"，因此请使用 div 和样式.然后立即在该 div 中，根据需要添加您的语义元素.尽可能将语义元素从您的 css 中隐藏，甚至从您的选择器中隐藏，无论是在 css 中还是在 javascript 中.但是，添加一个标记这些语义元素的自定义类有利于清晰.所以，而不是:

div >* h1，

你会这样写:

div >.semanticElement h1.

为了清楚起见，这应该更好，同时避免引用语义元素.

如果上面的一些原因不清楚，可以这样想.一个元素的语义发生了变化，现在突然我也不得不在css和javascript中进行更改，这很荒谬.

Is it right, to add styles to html 5 semantics (nav, header, footer, etc...) like we add them to divs? To use them instead of regular divs?

One time I heard frome someone I respect, that we should not add any style to html 5 semantic elements - just only if it is really necessary add a bit, but no many styles to this elements. Is he right?

for example

<nav>
    <ul>
        ................
    <ul>
</nav>



nav {
    background-color: .....
    width: ....
    height: ......
    margin: .....
    color: ......
    padding: ......
}

instead of

<nav>
    <div id="nav">
        <ul>
            ................
        <ul>
    </div>
</nav>



#nav {
    background-color: .....
    width: ....
    height: ......
    margin: .....
    color: ......
    padding: ......
}

How we should do it right? What is the proper way of coding this? What is perfect way of handling it?

解决方案

I agree. Avoid adding styles to semantic elements. This is because these elements add nothing new when we are speaking about how things 'look'.

Remember that you want to avoid redundancy. If you need a block element, you are thinking about the 'look', and so use a div and style that. Then immediately inside that div, add your semantic element if you wish. Leave the semantic elements as hidden as possible from your css, and even from your selectors, whether in the css, or the javascript. However, adding a custom class that marks these semantic elements is good for clarity. And so, instead of:

div > * h1,

you would write like this:

div > .semanticElement h1. 

This should be better for clarity, while avoiding referencing the semantic element.

If the reason for some of the above is not clear, think of it this way. The semantic changes for one element, and now suddenly I also have to make a change in the css and javascript, which is absurd.

这篇关于将 css 中的样式添加到 HTML 5 的语义元素是否正确?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！