CSS-公共类

发布于 2024-10-03 20:16:37 字数 335 浏览 3 评论 0原文

在我的网络应用程序中,我使用多个 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; }

您使用哪些类似的类?您在其他项目中见过这种技术吗?

In my web app I use several CSS classes to write less code. I use them quite often in the markup to add single property or two in some cases.

These are the following

.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; }

What similar classes do you use? Have you ever seen this technique in other projects?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

萝莉病 2024-10-10 20:16:37

很抱歉在这样一个老问题上发表答案,但我认为这是一个坏主意。也许对于一组特定的问题来说,它符合要求。我的想法是 CSS 是样式信息应该在的地方。通过执行您的建议,您实际上只是在 html 中使用 style 属性,因此将内容与样式信息混合在一起。这是一个坏主意,因为如果有一天您决定完全更改样式,您将必须通过删除大部分类来更新 HTML。

例如,如果您有这样的 HTML(例如在页面中多次使用的摘要):

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

有一天您决定更改该摘要的外观:例如,您不希望它是“文本-对齐:左”并且没有边距底部(这大概就是 mb10 ......我以前见过它被使用过),你将不得不进入并更改 HTML。

现在将其乘以 10 个您必须更改的元素。如果是50呢?如果您正在进行彻底的重新设计怎么办? 颤抖

CSS 提供了一种通过一个简单查询选择多个元素并为它们提供适当样式的方法,并且可以从集中位置轻松更改该样式。通过使用这些“帮助程序”类,您将使该项目的维护成为下一个开发人员的噩梦。

相反,如果您有这样的 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 美分
——来自一个刚刚被此事烧伤的人。

Sorry to post an answer on such an old question, but I think this is a bad idea. Maybe for a specific set of problems, it fits the bill. My thinking is that CSS is where the style information should be. By doing what you suggest, you are essentially just using the style attribute in html and therefore mixing content w/ style information. This is a bad idea because if one day you decide to change the style completely, you will have to go in and also update the HTML by removing most of the classes.

For example, if you have HTML like this (say for an abstract that is used many times within the page):

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

And one day you decide to change how that abstract looks: for example, you don't want it to be "text-aligned:left" anymore and no margin bottom (that's presumably what mb10 would be... i've seen this being used before), you would have to go in and change the HTML.

Now multiply this by 10 elements you have to change. What if it was 50? What if you were doing a complete redesign? shudder.

CSS provides a way to select multiple elements with one simple query and give them an appropriate style that is easily changed from a centralized location. By using these "helper" classes, you are making the maintenance of this project a nightmare for the next developer.

Instead, if you have HTML like this:

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

and CSS like this:

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

you could just change that one rule to this:

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

and be done w/ it! For all 50 elements!

just my 2 cents
-- from someone who just got burned by this.

孤千羽 2024-10-10 20:16:37

是的,如果你不像你那样使用通用类,那么你的 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; }

yeah, if you don't use common classes like you do then your CSS files get extremely large and every class becomes extremely specific

some other common classes...

.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; }
ゝ偶尔ゞ 2024-10-10 20:16:37

恢复浮动元素后的流程:

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

Restore the flow after a floating element:

.clearfix:after 
{
    clear:both;
    content:".";
    display:block;
    height:0;
    line-height:0;
    visibility:hidden;
}
单调的奢华 2024-10-10 20:16:37

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

如果您真的有兴趣了解专业的 css 框架是如何形成的,那么可能值得您下载并查看以下内容:

960 grid css 框架

Blueprint CSS 框架

Everyone has their own preferences and it also depends on the nature of your application. That said, I do personally tend to reuse a base.css that I port from application to application as a starter style component. Within it I also implement Eric Meyers css reset statements which make development across browsers much easier.

If you are genuinely interested in finding out how professional css frameworks are formed then its probably worth your while downloading and reviewing the following:

960 grid css framework

Blueprint css framework

爱的十字路口 2024-10-10 20:16:37

我喜欢远离您所描述的常见类名,尽可能多地将与样式相关的信息远离 HTML。正如猎人所提到的,这确实意味着选择器列表有时会很长,但我不认为这是一个问题。

如果我要使用一个通用的类名来清除浮动(这是我通常可能会使用的唯一一个示例),我通常会使用 .group 之类的名称 - 组这个词至少有一些少量的语义附加到它(一组可能属于在一起的事物)。这是 Dan Cederholm 提出的。

有时还有其他考虑因素可能意味着可以或不可以使用这样的类名。例如,如果您的布局根据媒体查询的视口大小而变化,您可能不希望某些东西始终具有相同的样式,这意味着类名称失去了它的用处,因为无论如何您都必须特定于您的选择器。另一个例子是,如果 HTML 内容由非技术客户管理,他们可能无法保持您的类完好无损。

I like to stay away from what you describe as common class names, keeping as much style-related information away from the HTML as possible. As mentioned by hunter, this does mean selector lists can sometimes get long, but I don't find it a problem.

If I were to use a common class name for clearing floats (the only one of the examples given that I usually might), I'd more often than not use something like .group - the word group at least has some small amount of semanticity attached to it (a group of things that likely belong together). This was suggested by Dan Cederholm.

There are sometimes other considerations that may mean it's either okay or not okay to use class names like this. For example, if your layout changes depending on viewport size via media queries, you may not want something to be styled the same at all times meaning the class name looses its usefulness as you have to be specific with your selectors anyway. Another example would be if the HTML is content-managed by a non-techie client who may not keep your classes intact.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文