Cor*_*art 34 css inline-styles
在我的脑海里,我总是知道在任何项目中使用内联样式的类.但是,是否有任何文章/帖子/博客定义每个的利弊？我正在讨论这个问题,我似乎无法找到很久以前我读过的关于此的博文.
tyl*_*erl 31
首先:
假设您正在处理静态内容,那么:
如果有任何方法可以重用该样式,请将其设为类并链接到样式表.
如果没有办法再重复使用样式(这是一个在其他地方没有意义的一次性事物),那么使用<style>引用元素#id的块.
如果CSS属性仅在周围HTML的上下文中有意义(例如,一些用法clear:),那么我将样式内联到元素中.
很多人称之为异端,就像很多人都谴责goto现代编程语言的任何用法一样.
然而,我认为应该根据您的情况选择最能减少整体工作量的方法,而不是订阅风格教条.样式表添加了一个间接级别,使站点级别的更改变得容易,并有助于建立一致性.但是如果你在每个页面上有几十个只在一个地方使用的类,那么你实际上是在增加你的工作量,而不是减少它.
换句话说,不要因为人们告诉你这是正确的方式而做一些愚蠢和混乱的事情.
如果有选择,我的第一选择是类/其他选择器.但是,有些情况下内联样式是唯一的方法.在其他情况下,只有一个CSS类本身需要太多的工作,而其他类型的CSS选择器在那里更有意义.
假设你必须斑马条纹给定的列表或表格.您可以简单地使用选择器来完成工作,而不是将特定类应用于每个备用元素或行.这将使代码保持简单,但它不会使用CSS类.为了说明三种方式:
.alternate {
background-color: #CCC;
}
<ul>
<li>first</li>
<li class="alternate">second</li>
<li>third</li>
<li class="alternate">fourth</li>
</ul>
.striped :nth-child(2n) {
background-color: #CCC;
}
<ul class="striped">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
<ul>
<li>first</li>
<li style="background-color: #CCC">second</li>
<li>third</li>
<li style="background-color: #CCC">fourth</li>
</ul>
第二种方式看起来最便携,并封装给我.要从任何给定的容器元素添加或删除条带,只需添加或删除striped该类.
但是,有些情况下,内联样式不仅有意义,而且是唯一的出路.当可能值的集合很大时,尝试为每个可能的状态提前创建类将是愚蠢的.例如,允许用户通过拖动动态地将某些项目放置在屏幕上的任何位置的UI.该项目必须绝对或相对于实际坐标定位,例如:
<div style="position: absolute; top: 20px; left: 49px;">..</div>
当然,我们可以为div可以采用的每个可能的位置使用类,但不建议这样做.人们很容易明白为什么:
.pos_20_49 {
top: 20px;
left: 49px;
}
.pos_20_50 {
top: 20px;
left: 50px;
}
// keep going for a million such classes if the container size is 1000x1000 px
<div class="pos_20_49">..</div>
小智 5
使用常识。
每个人都知道，在理想的世界中，演示文稿和内容应该分开。每个人都知道很多时候这种方法效果不佳。我们都知道您应该使用div而不是表格进行布局，但是我们也知道，在任何情况下，如果您无法完全控制内容，则将无法正常工作。
下载500k样式表以对一个元素进行样式设置是因为您已获取所有可能的样式并将其粘贴在样式表中将杀死您的页面，下载500个较小的样式表以对页面进行样式设置是因为您需要全部样式也会杀死您的页面。
重用概念很好，但是现实是，重用仅在某些情况下有用。这几乎同样适用于该概念存在的任何地方。如果您的项目按照您想要的去做，在每个合理的浏览器中都去做，以一种有效的方式去做，并且可靠地去做，那么您就很好了，重构CSS不会比编写代码难得多。