当我看到网站启动代码和示例时,CSS总是在一个单独的文件中,名为"main.css"、"default.css"或"Site.css".但是,当我编写页面时,我经常想将CSS与DOM元素内联,比如在图像上设置"Float:Right".我感觉这是"糟糕的编码",因为在示例中很少这样做.

我知道,如果样式将应用于多个对象,明智的做法是遵循"不要重复自己"(Dry),并将其分配给每个元素引用的CSS类.但是,如果我不会在另一个元素上重复CSS,为什么不在编写HTML时内联CSS呢?

问题是:即使只在该元素上使用内联CSS,使用内联CSS是否被认为是不好的?若有,原因为何?

示例(这不好吗?):

<img src="myimage.gif" style="float:right" />

推荐答案

如果你想让网站看起来不一样,你必须更改100行代码.这在您的示例中可能不适用,但是如果您使用内联CSS来执行以下操作

<div style ="font-size:larger; text-align:center; font-weight:bold">

在每个页面上表示一个页眉,它将更容易维护为

<div class="pageheader">  

如果在单个样式表中定义了页眉,以便在希望更改整个站点的页眉外观时,可以在一个地方更改CSS.

然而,我将是一个异教徒,在你的例子中,我认为没有问题.您的目标是单个图像的行为,可能必须在单个页面上正确显示,因此将实际的css放入样式表可能会有点过头.

Css相关问答推荐

要创建其按钮垂直对齐而不是水平对齐的v-bTN-toggle

为什么我的CSS关键帧动画在循环之间稍微暂停?

更改MAT-FORM-FIELD的CSS,使其在有Angular 的HTML中显示为普通文本框

如何使用遮罩创建手绘SVG动画

如何为图像堆叠效果下方的图层实现与磨砂玻璃类似的视觉效果

解释 "document.styleSheets[0].cssRules[0].style;"

我如何使用 CSS 在我的应用程序中每隔 3 位用逗号分隔数字?

在变量中存储匹配 Select 器的子元素的计数

最多 2 行的 Flex 水平滚动

我在 ins 标签中有一个 img 标签,更改 ins 格式覆盖图像的视图

CSS背景位置从顶部的给定像素开始?

控制表格单元格之间的间距

在 中制作等宽的列

如何在渲染之前获取react 组件的大小(高度/宽度)?

使用边距:0 自动;在 Internet Explorer 8 中

虚拟键盘激活时的屏幕样式

使用 CSS 垂直居中旋转文本

如果容器 div 较小,如何将子 div 扩展到 100% 屏幕宽度?

使用 inline-block 换行?

在 CSS 中使用多个 @font-face 规则