As someone who is beginning to make a transition from table based design to full CSS I'm wondering if using the style attribute to make adjustments to elements is considered "cheating" and if absolutely ALL presentation should be strictly in the style sheet?
作为一个开始从基于表格的设计过渡到完整CSS的人我想知道是否使用style属性来调整元素被认为是“作弊”,如果绝对所有的演示应该严格地在样式表中?
See also:
A question of style - approaches to styling and stylesheets
风格问题 - 样式和样式表的方法
12 个解决方案
#1
There are cases where you know for sure that all you want to do is tweak the style of this one specific element, and nothing else.
在某些情况下,您确实知道您要做的就是调整这个特定元素的样式,而不是其他任何东西。
In those cases you can happily use an inline style attribute. But then, at some point in the future, you'll realise that in fact you need to apply the same style to something else, and you'll realise you were wrong.
在这些情况下,您可以愉快地使用内联样式属性。但是,在未来的某个时刻,你会意识到事实上你需要将相同的风格应用于其他东西,你会发现自己错了。
Been there, done that. 8-)
去过也做过。 8-)
#2
I feel there's an aspect that has not been touched upon here: the distinction between hand-edited HTML snippets and generated HTML snippets.
我觉得这里有一个方面没有涉及:手工编辑的HTML片段和生成的HTML片段之间的区别。
For human editing, it's probably better and easier to maintain to have the styles in a file.
对于人工编辑,将样式保存在文件中可能更好,更容易维护。
However
As soon as you start generating HTML elements, with server-side scripts or with some kind of JavaScript, be sure to make all styles required for basic functionality inline!
一旦开始生成HTML元素,使用服务器端脚本或某种JavaScript,请确保内联基本功能所需的所有样式!
For example, you wrote some kind of JavaScript library that generates tooltips. Now, you will inject DIVs into your page, that will need some styles. For example, position: absolute and, initially, display:none. You may be tempted to give these elements the class .popup and require that this class has the correct definitions in some CSS file. After all, styles should be specified in the CSS file, right?
例如,您编写了某种生成工具提示的JavaScript库。现在,您将DIV注入您的页面,这将需要一些样式。例如,position:absolute,最初显示:none。您可能想要将这些元素赋予类.popup并要求此类在某些CSS文件中具有正确的定义。毕竟,应该在CSS文件中指定样式,对吧?
You will make your JavaScript library very annoying to reuse, because you can no longer simply copy and invoke one .js file and be done with it. Instead, you will have to copy the .js file, but also have to make sure that all styles required by the script are defined in your CSS file, and you have to go hunting for those, and make sure their names don't conflict with classes you already have.
您将使您的JavaScript库非常烦人地重用,因为您不能再简单地复制和调用一个.js文件并完成它。相反,您必须复制.js文件,但还必须确保脚本所需的所有样式都在CSS文件中定义,并且您必须去寻找那些,并确保它们的名称不冲突你已经上过课。
For maximum ease of use, just go ahead and set the required styles directly on the element as you create it. For styles that are purely for aesthetical purposes, such as background-color, font-size and such, you can still attach a class, to give the consumer of your script an easy way to change the appearance of your script elements, but don't require it!
为了最大限度地方便使用,只需在创建元素时直接在元素上设置所需的样式。对于纯粹出于美学目的的样式,例如背景颜色,字体大小等,您仍然可以附加一个类,以便为脚本的使用者提供一种简单的方法来更改脚本元素的外观,但不要需要它!
#3
You can use the style attribute, but the point of using CSS is that you make a change in a single file, and it affects the entire site. Try to avoid it as much as possible (old habits die hard)
您可以使用style属性,但使用CSS的关键是您在单个文件中进行更改,它会影响整个站点。尽量避免它(*惯很难)
#4
It's not maintainable. All of us have done it. What you're best to do is put every adjustment into a style. Let me teach you something most developers do not know about CSS ... you can use N styles at a time.
这是不可维护的。我们所有人都做到了。你最擅长的是把每一个调整都放在一个风格中。让我教你一些大多数开发人员不了解的CSS ...你可以一次使用N个样式。
For example, imagine you have a great style for colorized divs called someDIVStyle:
例如,假设你有一个很好的颜色化div的样式叫做someDIVStyle:
.someDIVStlye
{
background-color: yellow;
...
}
You want to use it, but just want to adjust the background-color to blue. Many people would copy/paste it and then make a new style with the change. However, simple create a style like this:
您想要使用它,但只想将背景颜色调整为蓝色。许多人会复制/粘贴它,然后通过更改创建一个新的样式。但是,简单创建一个这样的样式:
.blueBackground
{
background-color: blue;
}
Apply it as such:
如此应用:
<div class="someDIVStyle blueBackground">...
The style furthest to the right always overrides the properties of the styles preceding it. You can use a number of styles at once to meet your needs.
最右边的样式始终会覆盖前面样式的属性。您可以一次使用多种样式来满足您的需求。
#5
I agree with some other posters that it is best to keep the style information in the stylesheet. CSS tends to get complicated quickly, and it is nice to have that information in one place (rather than having to jump back and forth from HTML to stylesheet to see what styles are being used).
我同意其他一些海报,最好将样式信息保存在样式表中。 CSS往往会很快变得复杂,将信息放在一个地方很好(而不是必须在HTML中来回跳转到样式表以查看正在使用的样式)。
A little off-topic tip: Pressing F12 in IE8 brings up a great tool that lets you inspect the styles of elements in web pages you're browsing. In Firefox, FireBug does the same thing. Those kinds of tools are lifesavers if you want to know how a style change will affect an element.
一个偏离主题的提示:在IE8中按F12会显示一个很棒的工具,可以让您检查您正在浏览的网页中的元素样式。在Firefox中,FireBug也做同样的事情。如果您想知道样式更改将如何影响元素,那么这些工具就是救生员。
#6
It's a very "personal" question, to me the word "ALL" is a very strong word. You should do your best to have most of the styling in your css. but you can use style occetionally if it makes your life easier.
这是一个非常“个人化”的问题,对我来说,“ALL”这个词是一个非常强烈的词。你应该尽力在你的CSS中拥有大部分样式。但是,如果它让你的生活更轻松,你可以使用风格。
#7
Generally it is best to have styles on the style sheet especially if it will be used multiple times, but using the style attribute is definitely not "cheating". A quick look through the * source shows many examples of this.
通常最好在样式表上使用样式,特别是如果它将被多次使用,但使用style属性绝对不是“作弊”。快速浏览*源会显示许多这样的示例。
#8
Yes, it's kind of cheating, but it's up to you if you want to cheat a little. :)
是的,这是一种作弊,但如果你想作弊,这取决于你。 :)
The fundamental idea of having the styles in a style sheet is to separate the content from the layout. If you use the style attribute you are still mixing layout within the content.
在样式表中使用样式的基本思想是将内容与布局分开。如果使用style属性,则仍在内容中混合布局。
However It's not that terrible, as you can quite easily move the style into a class. It's quite handy during development to be able to set a style on a specific element so easily without having to make up a class name and worry how the style will cascade.
然而,这并不是那么糟糕,因为你可以很容易地把风格变成一个类。在开发过程中非常方便,能够轻松地在特定元素上设置样式,而无需编写类名称并担心样式将如何级联。
I sometimes let the style attribute go through in the production code, if it's something that is specific for just one page, and if it's doubtful that it will be there for long. Occationally just because I am pressed for time, and it can be cleaned up later on...
我有时会让style属性在生产代码中通过,如果它只是一个页面的特定内容,并且它是否会存在很长时间。我只是因为时间紧迫而且可以在以后清理......
So, even if you use a style attribute sometimes, you should still have the ambition that all the styles should be in a style sheet. In the long run it makes the code easier to maintain.
因此,即使您有时使用样式属性,您仍然应该拥有所有样式应该在样式表中的野心。从长远来看,它使代码更易于维护。
#9
As others have said, in general, no.
正如其他人所说,总的来说,没有。
However, there are cases where it makes perfect sense. For example, today I had to load an random background image into a div, from a directory with an unknown # of files. Basically, the client can drop files into that folder and they'll show up in the random background image rotation.
但是,有些情况下它非常有意义。例如,今天我不得不从一个包含未知文件数的目录中将随机背景图像加载到div中。基本上,客户端可以将文件放入该文件夹,它们将显示在随机背景图像轮换中。
To me, this was a clear reason to dynamically build up the style tag on the div.
对我来说,这是在div上动态构建样式标记的明确原因。
In addition, if you're using, for example, the .net framework with webforms and built-in controls then you'll see inline styles used anyway!
此外,如果您正在使用带有webforms和内置控件的.net框架,那么您将看到使用的内联样式!
#10
There can be very good reasons to put style information in a specific page.
将样式信息放在特定页面中可能有很好的理由。
For example, if you want to have a different header background on every page (travel agencies...), it is far easier to put that style information in that specific element (better, in the head of the document...) than to give that element a different class on every page and define all those classes in an external style-sheet.
例如,如果您希望在每个页面(旅行社......)上都有不同的标题背景,那么将该样式信息放在该特定元素(更好地,在文档的头部......)中要容易得多。在每个页面上为该元素赋予一个不同的类,并在外部样式表中定义所有这些类。
#11
The style attribute does have one important use: setting style programmatically. While the DOM includes methods to manipulate style sheets, support for them is still spotty and they're a bit heavyweight for many tasks, such as hiding and showing elements.
style属性确实有一个重要用途:以编程方式设置样式。虽然DOM包含操作样式表的方法,但对它们的支持仍然不稳定,并且它们对于许多任务(例如隐藏和显示元素)来说有点重量级。
#12
Yes, the style attribute is frowned upon in general. Since you're moving to the CSS method from table-based, I'd strongly recommend that you avoid inline styles. As a previous poster pointed out: bad habits are hard to break and getting into the habit of using inline styles for their temporary convenience is a mistake. You might as well go back to using the font tag. There's really no difference.
是的,一般来说,style属性是不受欢迎的。由于您从基于表的方法转向CSS方法,我强烈建议您避免使用内联样式。正如之前的一张海报所指出的那样:坏习惯难以打破,并且养成使用内联样式以获得临时便利的习惯是一个错误。您可以回到使用字体标记。真的没什么区别。
Having said that, there are occasions where it makes sense to use a simple inline style, but first develop the habit of using stylesheets. Only when you're comfortable with putting everything in a stylesheet should you start looking at shortcuts.
话虽如此,有时候使用简单的内联样式是有道理的,但首先要养成使用样式表的习惯。只有当你习惯将所有内容都放在样式表中时,才应该开始查看快捷方式。
I think that's the general consensus of everyone who posted an answer
我认为这是所有发布答案的人的普遍共识
#1
There are cases where you know for sure that all you want to do is tweak the style of this one specific element, and nothing else.
在某些情况下,您确实知道您要做的就是调整这个特定元素的样式,而不是其他任何东西。
In those cases you can happily use an inline style attribute. But then, at some point in the future, you'll realise that in fact you need to apply the same style to something else, and you'll realise you were wrong.
在这些情况下,您可以愉快地使用内联样式属性。但是,在未来的某个时刻,你会意识到事实上你需要将相同的风格应用于其他东西,你会发现自己错了。
Been there, done that. 8-)
去过也做过。 8-)
#2
I feel there's an aspect that has not been touched upon here: the distinction between hand-edited HTML snippets and generated HTML snippets.
我觉得这里有一个方面没有涉及:手工编辑的HTML片段和生成的HTML片段之间的区别。
For human editing, it's probably better and easier to maintain to have the styles in a file.
对于人工编辑,将样式保存在文件中可能更好,更容易维护。
However
As soon as you start generating HTML elements, with server-side scripts or with some kind of JavaScript, be sure to make all styles required for basic functionality inline!
一旦开始生成HTML元素,使用服务器端脚本或某种JavaScript,请确保内联基本功能所需的所有样式!
For example, you wrote some kind of JavaScript library that generates tooltips. Now, you will inject DIVs into your page, that will need some styles. For example, position: absolute and, initially, display:none. You may be tempted to give these elements the class .popup and require that this class has the correct definitions in some CSS file. After all, styles should be specified in the CSS file, right?
例如,您编写了某种生成工具提示的JavaScript库。现在,您将DIV注入您的页面,这将需要一些样式。例如,position:absolute,最初显示:none。您可能想要将这些元素赋予类.popup并要求此类在某些CSS文件中具有正确的定义。毕竟,应该在CSS文件中指定样式,对吧?
You will make your JavaScript library very annoying to reuse, because you can no longer simply copy and invoke one .js file and be done with it. Instead, you will have to copy the .js file, but also have to make sure that all styles required by the script are defined in your CSS file, and you have to go hunting for those, and make sure their names don't conflict with classes you already have.
您将使您的JavaScript库非常烦人地重用,因为您不能再简单地复制和调用一个.js文件并完成它。相反,您必须复制.js文件,但还必须确保脚本所需的所有样式都在CSS文件中定义,并且您必须去寻找那些,并确保它们的名称不冲突你已经上过课。
For maximum ease of use, just go ahead and set the required styles directly on the element as you create it. For styles that are purely for aesthetical purposes, such as background-color, font-size and such, you can still attach a class, to give the consumer of your script an easy way to change the appearance of your script elements, but don't require it!
为了最大限度地方便使用,只需在创建元素时直接在元素上设置所需的样式。对于纯粹出于美学目的的样式,例如背景颜色,字体大小等,您仍然可以附加一个类,以便为脚本的使用者提供一种简单的方法来更改脚本元素的外观,但不要需要它!
#3
You can use the style attribute, but the point of using CSS is that you make a change in a single file, and it affects the entire site. Try to avoid it as much as possible (old habits die hard)
您可以使用style属性,但使用CSS的关键是您在单个文件中进行更改,它会影响整个站点。尽量避免它(*惯很难)
#4
It's not maintainable. All of us have done it. What you're best to do is put every adjustment into a style. Let me teach you something most developers do not know about CSS ... you can use N styles at a time.
这是不可维护的。我们所有人都做到了。你最擅长的是把每一个调整都放在一个风格中。让我教你一些大多数开发人员不了解的CSS ...你可以一次使用N个样式。
For example, imagine you have a great style for colorized divs called someDIVStyle:
例如,假设你有一个很好的颜色化div的样式叫做someDIVStyle:
.someDIVStlye
{
background-color: yellow;
...
}
You want to use it, but just want to adjust the background-color to blue. Many people would copy/paste it and then make a new style with the change. However, simple create a style like this:
您想要使用它,但只想将背景颜色调整为蓝色。许多人会复制/粘贴它,然后通过更改创建一个新的样式。但是,简单创建一个这样的样式:
.blueBackground
{
background-color: blue;
}
Apply it as such:
如此应用:
<div class="someDIVStyle blueBackground">...
The style furthest to the right always overrides the properties of the styles preceding it. You can use a number of styles at once to meet your needs.
最右边的样式始终会覆盖前面样式的属性。您可以一次使用多种样式来满足您的需求。
#5
I agree with some other posters that it is best to keep the style information in the stylesheet. CSS tends to get complicated quickly, and it is nice to have that information in one place (rather than having to jump back and forth from HTML to stylesheet to see what styles are being used).
我同意其他一些海报,最好将样式信息保存在样式表中。 CSS往往会很快变得复杂,将信息放在一个地方很好(而不是必须在HTML中来回跳转到样式表以查看正在使用的样式)。
A little off-topic tip: Pressing F12 in IE8 brings up a great tool that lets you inspect the styles of elements in web pages you're browsing. In Firefox, FireBug does the same thing. Those kinds of tools are lifesavers if you want to know how a style change will affect an element.
一个偏离主题的提示:在IE8中按F12会显示一个很棒的工具,可以让您检查您正在浏览的网页中的元素样式。在Firefox中,FireBug也做同样的事情。如果您想知道样式更改将如何影响元素,那么这些工具就是救生员。
#6
It's a very "personal" question, to me the word "ALL" is a very strong word. You should do your best to have most of the styling in your css. but you can use style occetionally if it makes your life easier.
这是一个非常“个人化”的问题,对我来说,“ALL”这个词是一个非常强烈的词。你应该尽力在你的CSS中拥有大部分样式。但是,如果它让你的生活更轻松,你可以使用风格。
#7
Generally it is best to have styles on the style sheet especially if it will be used multiple times, but using the style attribute is definitely not "cheating". A quick look through the * source shows many examples of this.
通常最好在样式表上使用样式,特别是如果它将被多次使用,但使用style属性绝对不是“作弊”。快速浏览*源会显示许多这样的示例。
#8
Yes, it's kind of cheating, but it's up to you if you want to cheat a little. :)
是的,这是一种作弊,但如果你想作弊,这取决于你。 :)
The fundamental idea of having the styles in a style sheet is to separate the content from the layout. If you use the style attribute you are still mixing layout within the content.
在样式表中使用样式的基本思想是将内容与布局分开。如果使用style属性,则仍在内容中混合布局。
However It's not that terrible, as you can quite easily move the style into a class. It's quite handy during development to be able to set a style on a specific element so easily without having to make up a class name and worry how the style will cascade.
然而,这并不是那么糟糕,因为你可以很容易地把风格变成一个类。在开发过程中非常方便,能够轻松地在特定元素上设置样式,而无需编写类名称并担心样式将如何级联。
I sometimes let the style attribute go through in the production code, if it's something that is specific for just one page, and if it's doubtful that it will be there for long. Occationally just because I am pressed for time, and it can be cleaned up later on...
我有时会让style属性在生产代码中通过,如果它只是一个页面的特定内容,并且它是否会存在很长时间。我只是因为时间紧迫而且可以在以后清理......
So, even if you use a style attribute sometimes, you should still have the ambition that all the styles should be in a style sheet. In the long run it makes the code easier to maintain.
因此,即使您有时使用样式属性,您仍然应该拥有所有样式应该在样式表中的野心。从长远来看,它使代码更易于维护。
#9
As others have said, in general, no.
正如其他人所说,总的来说,没有。
However, there are cases where it makes perfect sense. For example, today I had to load an random background image into a div, from a directory with an unknown # of files. Basically, the client can drop files into that folder and they'll show up in the random background image rotation.
但是,有些情况下它非常有意义。例如,今天我不得不从一个包含未知文件数的目录中将随机背景图像加载到div中。基本上,客户端可以将文件放入该文件夹,它们将显示在随机背景图像轮换中。
To me, this was a clear reason to dynamically build up the style tag on the div.
对我来说,这是在div上动态构建样式标记的明确原因。
In addition, if you're using, for example, the .net framework with webforms and built-in controls then you'll see inline styles used anyway!
此外,如果您正在使用带有webforms和内置控件的.net框架,那么您将看到使用的内联样式!
#10
There can be very good reasons to put style information in a specific page.
将样式信息放在特定页面中可能有很好的理由。
For example, if you want to have a different header background on every page (travel agencies...), it is far easier to put that style information in that specific element (better, in the head of the document...) than to give that element a different class on every page and define all those classes in an external style-sheet.
例如,如果您希望在每个页面(旅行社......)上都有不同的标题背景,那么将该样式信息放在该特定元素(更好地,在文档的头部......)中要容易得多。在每个页面上为该元素赋予一个不同的类,并在外部样式表中定义所有这些类。
#11
The style attribute does have one important use: setting style programmatically. While the DOM includes methods to manipulate style sheets, support for them is still spotty and they're a bit heavyweight for many tasks, such as hiding and showing elements.
style属性确实有一个重要用途:以编程方式设置样式。虽然DOM包含操作样式表的方法,但对它们的支持仍然不稳定,并且它们对于许多任务(例如隐藏和显示元素)来说有点重量级。
#12
Yes, the style attribute is frowned upon in general. Since you're moving to the CSS method from table-based, I'd strongly recommend that you avoid inline styles. As a previous poster pointed out: bad habits are hard to break and getting into the habit of using inline styles for their temporary convenience is a mistake. You might as well go back to using the font tag. There's really no difference.
是的,一般来说,style属性是不受欢迎的。由于您从基于表的方法转向CSS方法,我强烈建议您避免使用内联样式。正如之前的一张海报所指出的那样:坏习惯难以打破,并且养成使用内联样式以获得临时便利的习惯是一个错误。您可以回到使用字体标记。真的没什么区别。
Having said that, there are occasions where it makes sense to use a simple inline style, but first develop the habit of using stylesheets. Only when you're comfortable with putting everything in a stylesheet should you start looking at shortcuts.
话虽如此,有时候使用简单的内联样式是有道理的,但首先要养成使用样式表的习惯。只有当你习惯将所有内容都放在样式表中时,才应该开始查看快捷方式。
I think that's the general consensus of everyone who posted an answer
我认为这是所有发布答案的人的普遍共识