为什么在html中使用style-attribute不好？

I have been told, as well as read that using the style attribute in html is considered bad/sloppy/poor form. Further, that all rendering specific bits should be divorced into css and other parts as appropriate. I am trying to understand why exactly this is.

我被告知,以及读取使用html中的style属性被认为是糟糕/邋/ /差形式。此外,所有渲染特定位应该适当地分成css和其他部分。我试图理解为什么会这样。

I can see why you might want to keep the HTML a pure semantic DOM, that speaks about the structure of the document, but for practical pages, the importance is that the page looks right and functions appropriately.

我可以看到为什么你可能希望将HTML保持为纯语义DOM,它讲述了文档的结构,但对于实际页面,重要的是页面看起来正确并且功能正常。

Is there some more compelling reasons for this separation?

这种分离是否有一些更令人信服的理由?

4 个解决方案

#1

• Separation of concerns This makes it easy to replace the styles without changing the markup, or vice versa. Plus you can have one person working on CSS and another working on content

  关注点分离这样可以在不更改标记的情况下轻松替换样式,反之亦然。此外,您可以让一个人使用CSS,另一个人使用内容

• Don't Repeat Yourself You can apply a style to many elements without having to repeat it over and over. Smaller pages means quicker load times using less bandwidth. Plus it's easier to modify later, because you can change it in one place in one file, instead of many places in many files.

  不要重复自己您可以将样式应用于许多元素,而无需反复重复。较小的页面意味着使用较少的带宽可以加快加载速度。此外,以后更容易修改,因为您可以在一个文件中的一个位置更改它,而不是在许多文件中的许多位置。

• Cachability If the same style sheet is used on every page of your site, browsers can download it once and then cache it, instead of downloading the styles with the content of every single page. And they won't have to re-download it whenever the content of those pages changes.

  可分析性如果在您网站的每个页面上使用相同的样式表,浏览器可以下载一次然后缓存它,而不是下载包含每个页面内容的样式。只要这些页面的内容发生变化,他们就不必重新下载它。

• Multiple Versions It is easy to create multiple versions of the visual layout and appearance of your site since you just need to swap out the stylesheet file to change the appearance of every page. For instance, you can create a white-label version of a web application which your partners can re-skin to match their brand. See CSS Zen Garden for some great examples of how flexible this approach can be.

  多个版本您可以轻松创建多个版本的可视布局和网站外观,因为您只需更换样式表文件即可更改每个页面的外观。例如,您可以创建一个Web应用程序的白标版本,您的合作伙伴可以重新设置它以匹配其品牌。有关这种方法的灵活性的一些很好的例子,请参见CSS Zen Garden。

#2

Start with this code:

从这段代码开始:

<ul>
    <li style="color: blue;">One</li>
    <li style="color: blue;">Two</li>
    <li style="color: blue;">Three</li>
    <li style="color: blue;">Four</li>
</ul>

Let's say that today, you decide to change the link color to red. Since these styles are inline, you tediously have to walk through each element and change the style attribute. Imagine doing this for 10, maybe 20 HTML pages and you'll see why this becomes a problem.

让我们说今天,您决定将链接颜色更改为红色。由于这些样式是内联的,因此您需要遍历每个元素并更改样式属性。想象一下,为10个,也许20个HTML页面做这个,你会明白为什么这会成为一个问题。

Using a stylesheet separates the content:

使用样式表分隔内容:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

From the style:

从风格:

ul li {
    color: blue;
}

Had you used a stylesheet from the beginning, changing the color is as simple as changing blue to red in your stylesheet.

如果您从一开始就使用样式表,更改颜色就像在样式表中将蓝色更改为红色一样简单。

Aside from making the document easier to style, there's also selector specificity. Imagine that you inherited the first code chunk from a previous developer and would like to change the color again, but you (being a nice developer) prefer stylesheets:

除了使文档更容易风格之外,还有选择器特异性。想象一下,你继承了前一个开发人员的第一个代码块,并希望再次改变颜色,但你(作为一个不错的开发人员)更喜欢样式表:

ul li {
    color: red;
}

You'll soon become frustrated and resort to using !important, as your selectors can't override the inline styles.

您很快就会感到沮丧并且使用!important,因为您的选择器无法覆盖内联样式。

#3

CSS should be another file included in HTML because, if you want to change one style of an element that is included in more than one pages you will just change one style from CSS and the changes will be applied to all of the files. If you have the style in HTML, you would need to go on the pages one by one and change the styling. Its a good template building practice.

CSS应该是HTML中包含的另一个文件,因为如果要更改包含在多个页面中的元素的一种样式,您只需从CSS更改一种样式,并且更改将应用​​于所有文件。如果您使用HTML格式,则需要逐个浏览页面并更改样式。它是一个很好的模板构建实践。

#4

By separating markup and css. You can use css to change the look of everything, without affecting the markup.

通过分离标记和CSS。您可以使用css更改所有内容的外观,而不会影响标记。

Benefits include: Creating different designs for the same html. Dividing work within a team. One front-end developer can focus entirely on the css. Back-end developers, do not have to hassle with the css. Easier to change the look in the future. Easier to migrate the html-markup to a new platform or content management system in the future.

好处包括:为同一个html创建不同的设计。在团队中划分工作。一个前端开发人员可以完全专注于CSS。后端开发人员,不必麻烦与CSS。将来更容易改变外观。将来更容易将html标记迁移到新平台或内容管理系统。