Web 应用程序有 CSS 类命名标准吗？

发布于 2024-08-04 04:05:34 字数 631 浏览 2 评论 0原文

有很多关于 intertube 的信息，涉及一些基本的 css 命名约定。然而，这些惯例大多数都是从设计师的角度出发的。

我将从 Web 应用程序开发人员的角度遵循约定。随着 Web 应用程序的发展，以及 UJS（不显眼的 javascript）在整个代码库中的使用，围绕您的 css 类的命名标准也在不断发展。这有点尴尬的原因是 css 类在使用时有些超载。

一方面，CSS 类被使用样式表来帮助展示您的内容很好。
另一方面，CSS 类由 UJS 库使用（如 jQuery）帮助绑定 javascript 对给定的某些元素进行编码页。

从 Rails 应用程序的角度想到的一个惯例是类似的

.controller-action 
  { /*styles */ }

其他想法是用匈牙利概念为你的类添加前缀：

.js-controller-action
  { /* styles */ }

js，前缀，将用附加的 ujs 代码来描述这些元素。

就个人而言，我从 Rails 应用程序的角度对此感兴趣，但是，我可以看到这如何应用于任何 Web 应用程序框架和 UJS javascript 库。

原文

There is quite a bit of information on the intertubes going over some fundamental css naming conventions. However, most of these conventions are from designer's point of view.

I'm going after conventions from a web application developer's point of view. As a web application grows, and UJS (unobtrusive javascript) is used throughout the codebase, what naming standards have grown around your css classes. The reason this is a little awkward is that css classes are somewhat overloaded in their use.

On one hand, css classes are used by
stylesheets to help present your
content well.
On the other hand, css
classes are used by UJS libraries
(like jQuery) to help tie javascript
code to certain elements on a given
page.

A covention that comes to mind from a rails application perspective is something like

.controller-action 
  { /*styles */ }

Other thoughts are prefixing your classes with hungarian-notion:

.js-controller-action
  { /* styles */ }

the js, prefix, would delineate those elements with ujs code attached to them.

Personally, I'm interested in this from a rails application perspective, however, I can see how this could apply to any web application framework and UJS javascript library.

分享到QQ

分享到微博