Question

在我的网络应用程序中，我使用几个CSS类来编写更少的代码。我经常在标记中使用它们在某些情况下添加单个属性或两个属性。

以下是

.clear { float: none; clear: both; }
.fl_l{ float: left; }
.fl_r{ float: right; }
.ta_l{ text-align: left; }
.ta_r{ text-align: right; }
.no_td:hover { text-decoration: none; }

你使用什么类似的课程？你有没有在其他项目中看到这种技术？

Answer 1

很抱歉在这么老的问题上发表答案，但我认为这是一个坏主意。也许对于一组特定的问题，它符合要求。我的想法是CSS是样式信息的所在。通过做你的建议，你基本上只是在html中使用style属性，因此混合内容w /样式信息。这是一个坏主意，因为如果有一天你决定完全改变风格，你将不得不进入并通过删除大多数类来更新HTML。

例如，如果您有这样的HTML（比如在页面中多次使用的摘要）：

<p class="abstract ta_l mb10">
    Lorem ipsum dolor set.
</p>

有一天，你决定改变抽象的外观：例如，你不希望它是＆＃34;文本对齐：左＆＃34;再也没有保证金底部（大概是mb10将会是什么......我之前已经看到过这种情况），你必须进入并改变HTML。

现在将此数乘以你必须改变的10个元素。怎么样才50？如果你做了一个完整的重新设计怎么办？颤动。

CSS提供了一种通过一个简单查询选择多个元素的方法，并为它们提供了一个可以从集中位置轻松更改的合适样式。通过使用这些＆＃34;帮助＆＃34;这些课程让你对这个项目的维护成为下一个开发人员的噩梦。

相反，如果你有这样的HTML：

<p class="abstract">
    You should sign in or something!
</p>

和CSS这样：

.abstract {
   margin-bottom: 10px;
   text-align: left;
}

你可以将这一条规则更改为：

.abstract {
  text-align: right;
  margin-bottom: 0;
}

完成它！所有50个元素！

只差我2美分 - 来自刚被此烧伤的人。

Answer 2

是的，如果你不像你那样使用普通的类，那么你的CSS文件会变得非常大，每个类都变得非常具体

其他一些常见的课程......

.split { float: left; width: 50%; }
.center { text-align: center: margin: auto; display: block; }
.bold { font-weight: bold; }
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }

Answer 3

在浮动元素之后恢复流程：

.clearfix:after 
{
    clear:both;
    content:".";
    display:block;
    height:0;
    line-height:0;
    visibility:hidden;
}

Answer 4

每个人都有自己的偏好，这也取决于您的应用程序的性质。也就是说，我个人倾向于重用我从应用程序移植到应用程序作为启动器样式组件的base.css。在其中我还实现了Eric Meyers css重置语句，这使得跨浏览器的开发变得更加容易。

如果您真的有兴趣了解如何形成专业的css框架，那么在下载和审核以下内容时可能值得您这样做：

960 grid css framework

Blueprint css framework

Answer 5

我喜欢远离您所描述的常见类名，尽可能多地保留与HTML相关的风格相关信息。正如猎人所提到的，这确实意味着选择器列表有时会变长，但我发现它不是问题。

如果我使用一个通用的类名来清除浮点数（我通常可以给出的唯一一个例子），我经常使用类似.group这样的词 - 这个词组至少有一些小的附加到它的语义量（一组可能属于一起的东西）。这是由Dan Cederholm提出的。

有时候其他一些考虑可能意味着使用这样的类名是好的还是不好的。例如，如果您的布局根据视口大小通过媒体查询而更改，您可能不希望某些内容始终保持相同的样式，这意味着类名将失去其实用性，因为您必须特别针对选择器。另一个例子是，HTML是由非技术客户进行内容管理的，他们可能无法保持您的课程完整。

CSS - 常用类

5 个答案: