CSS 中的命名空间/作用域

发布于 2024-08-05 08:03:23 字数 232 浏览 2 评论 0原文

我想将 CSS 文件中的规则应用于某个 div/类,因此,例如 events.css 的内容仅应用于名为 .events 的类的内容,而不是在此范围之外,无需添加class .events 添加到每个 css 规则的开头。

我认为这是不可能的——但你永远不知道。

如果不是,我正在考虑通过在上传/编辑后将 .events 添加到 CSS 规则中来实现相同的效果。我认为这应该是相当没有问题的,但是有人预见到任何问题吗?

I want to apply the rules in a CSS file to a certain div/class so, for example, the contents of events.css is only applied to the contents of a class called .events and not outside this scope without the need to add the class .events to the start of each css rule.

I am thinking this is not possible though - but you never know.

If not I am thinking of achieving the same effect by prefixing the .events to the CSS rules after they have been uploaded/edited. I am thinking this should be fairly trouble-free, but does anyone forsee any problems?

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

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

发布评论

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

评论(5

岁月无声 2024-08-12 08:03:23

我认为这是不可能的

确实是不可能的。除非您将相关内容放入 iframe 中。然后,您将获得一个完整的独立文档,以不同的方式进行样式设置。

我正在考虑通过在上传/编辑后将 .events 添加到 CSS 规则中来实现相同的效果。我认为这应该是相当顺利的,但是有人预见到任何问题吗?

以自动化的方式?您需要能够解析 CSS 输入以确定选择器的开头位置。

这并不像您想象的那样简单:这

/* This is my grate CSS
.sausage { color: red; } adds a class rule
/*/ .eggs, .bacon { color: red; }
.potato:before { content: "; }
.beans { content: "; }

是一个很难解析 CSS 的示例。 .eggs.bacon.potato 开始选择器,并且需要 .events 前缀。 .sausage.beans 不是。

I am thinking this is not possible though

Indeed. Unless you put the content in question in an iframe. Then you get a whole separate document to style differently.

I am thinking of achieving the same effect by prefixing the .events to the CSS rules after they have been uploaded/edited. I am thinking this should be fairly trouble-free, but does anyone forsee any problems?

In an automated fashion? You would need to be able to parse the CSS input to determine where the beginnings of the selectors were.

This is not as trivial as you might think to do correctly:

/* This is my grate CSS
.sausage { color: red; } adds a class rule
/*/ .eggs, .bacon { color: red; }
.potato:before { content: "; }
.beans { content: "; }

is an example of tricky-to-parse CSS. .eggs, .bacon and .potato begin selectors and would want a .events prefix. .sausage and .beans are not.

倾听心声的旋律 2024-08-12 08:03:23

如果不是,我正在考虑实现
通过添加 .events 前缀可以达到相同的效果
修改后的 CSS 规则
已上传/编辑。我在想这个
应该是相当顺利的,但是
有人预见到任何问题吗?

这是唯一的方法,而且应该没问题。

If not I am thinking of achieving the
same effect by prefixing the .events
to the CSS rules after they have been
uploaded/edited. I am thinking this
should be fairly trouble-free, but
does anyone forsee any problems?

That's the only way to do it and should be fine.

草莓味的萝莉 2024-08-12 08:03:23

从维护的角度来看,在 CSS 规则中简单地包含“.event”会更安全。几个月后,您可能已经忘记了在这里为节省一点打字而玩过的技巧。

It is safer from a maintenance standpoint to simply include ".event" in your CSS rules. Several months down the road, you may have forgotten the tricks you played here to save a little bit of typing.

歌入人心 2024-08-12 08:03:23

简而言之,唯一的方法是为每个规则添加 .events 前缀。

但我会避免自动执行此操作,因为很容易犯错误,例如手动将 .events 添加到规则中,这会使错误加倍。如果您想跨页面共享某些样式,例如 .events.special.aboutus.special,那么您需要将它们放在其他地方。

通常最好使用一个样式表,而不是每个部分使用一个样式表,这样用户在转到后续页面时就会将其缓存。 (您可以在生产环境中对其进行压缩和压缩,以减少初始下载时间。)

In short, the only way is to prefix each rule with .events.

But I would steer away from doing that automatically, because it's easy to make mistakes, like adding .events to a rule manually, which would double it up. And if you wanted to share some styles across pages, like .events.special and .aboutus.special then you'd need to put them somewhere else.

It's generally better to use one stylesheet instead of one per section, so the user will have it cached when they go to subsequent pages. (You can minify and gzip it in the production environment to reduce initial download time.)

我不是你的备胎 2024-08-12 08:03:23

我会将“.events”类添加到选择器中。作为手动过程执行此操作存在人为错误的风险。这是一种部分自动化向所有 CSS 类添加选择器的过程的方法。

或者,您可以使用这个 自动前缀,但它似乎不能很好地处理选择器之间的空格。

I would add the class '.events' to the selectors. There is the risk of human error doing this as a manual process. Here is a way of partially automating the process of adding a selector to all CSS classes.

Alternatively you could use this automatic prefixer, but it doesn't seem to handle spaces between your selectors well.

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