当前位置：文江博客话题详情

html/css 的命名约定 + MVC？

发布于 2024-09-10 03:08:13 字数 195 浏览 8 评论 0原文

有没有关于命名综合命名约定的好文章？

我正在寻找清理一些代码......从资产到模型（Codeigniter）到 HTML 和 CSS 的所有内容。

我也很好奇如何构建CSS......是给所有东西一个独特的类（即search-bar-icon）更好，还是重复像.search span.icon {这样的类更好？

谢谢，沃克

原文

分享到QQ

分享到微博

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

发布评论

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

笛声青案梦长安 2024-09-17 03:08:13

在 HTML/CSS 中，id 和 class 选择器并不等同。 id 的权重更大，因此应谨慎使用。将其用于页面中具有后代选择器的部分，这些选择器的类名与其他部分相同，但您希望它们的样式不同。可以将 id 想象为穷人的页面区域命名空间。

回复收藏 0 原文

泼猴你往哪里跑 2024-09-17 03:08:13

为每个事物赋予唯一的 id 可以使您的选择器速度最快，但会使您的标记变得臃肿，并且可能会变得难以使用。使用独特的类是没有意义的（类用于对象组）。

您的第二个选择是更清晰的代码，但选择器通常要慢得多。

回复收藏 0 原文

森罗 2024-09-17 03:08:13

在 CSS 中为所有内容赋予一个独特的类违背了“级联”样式表的目的。有效的 CSS 利用级联，以便您重复尽可能少的样式工作。

请记住，大多数 HTML 元素都可以直接设置样式。我不需要使用 ... 因为我可以在不使用 span 的情况下设置标签本身的样式。大多数人使用的 div 和 span 远多于他们真正需要的。

您还可以通过推理来设计样式。例如，我可能有一个

接下来是搜索结果的 UL，我希望其样式与页面上的其他 UL 不同。我可以使用以下规则，而不是给 UL 一个特定的类（例如“searchResultsList”）：

H3.searchResults + ul {some style...;}
或者
H3.searchResults + div > > * {一些样式...;}

至于CSS组织，我发现按元素类别组织我的文件很有帮助，从最简单和最普遍的情况开始，例如a，p等，然后处理稍后会出现更复杂的元素，例如表格。我按特殊性对所有内容进行分组，因为这是级联规则的一部分。首先按照元素在文件中出现的顺序处理元素，然后按照影响它的规则的具体程度进行处理。我将所有单实例和实用程序类放在最后（.iconWhichAppearsOnceEver、.noBordersTable 等）


body{}
a {}
p {}
h1,h2,h3,h4,h5,h6 {}
h3.searchResults {}
...
table {}
thead {}
thead th {}
thead th a {}
thead th.noFill a {}
...

Giving literally everything a unique class in your CSS defeats the purpose of "Cascading" style sheets. Effective CSS leverages the cascade so that you're repeating as little styling effort as possible.

Bear in mind that most HTML elements can be styled directly. I don't need to use <span class="something"><label>... because I can style the label itself without using a span. Most people use far more divs and spans than they really need to.

You can also style by inference. For example, I might have an <H3 class="searchResults"> followed by a UL of search results that I want to style uniquely from other ULs on the page. Instead of giving the UL a specific class (of, say, "searchResultsList") I could just use the following rule:

H3.searchResults + ul {some styling...;}
or
H3.searchResults + div > * {some styling...;}

As for CSS organization, I find it helpful to organize my files by categories of elements, starting with the simplest and most ubiquitous cases, like a, p, etc. and then handle more complex elements like tables later. I group everything by specificity, because that's part of the cascade rules. An element is handled first in its order of appearance in the file, and then by how specific a rule affecting it is. I place all my one-instance and utility classes last (.iconWhichAppearsOnceEver, .noBordersTable, etc.)


body{}
a {}
p {}
h1,h2,h3,h4,h5,h6 {}
h3.searchResults {}
...
table {}
thead {}
thead th {}
thead th a {}
thead th.noFill a {}
...

回复收藏 0 原文

总以为 2024-09-17 03:08:13

这完全取决于您认为最好的。惯例不是规则，而是可以让您的生活更轻松的指南。由于 Codeigniter 加载所有必需类的方式，它具有相对严格的命名约定。

例如，控制器的文件名是小写的，但类名是大写的，并且应该与文件名匹配。例如，test.php 将生成一个名为 Test 的类。

HTML 类/ID 的命名并不是标准化的，完全取决于您认为最好的命名方式。我通常尝试给我的 ID 和类起一个有意义的名称。例如，包含徽标的 DIV 将被命名为“site_logo”。包含博客文章的 DIV 将被命名为“文章”，依此类推。

另外，不要让整个“ID/类速度较慢”的事情欺骗您，因为速度增加非常小。如果您想优化您的网站，最好优化您的 PHP 或 CSS 代码，而不是删除 HTML ID 或类。

回复收藏 0 原文

沉鱼一梦 2024-09-17 03:08:13

请记住，您可以堆叠和继承 CSS 类，如下所示：

.icon { background: left center no-repeat; padding-left: 20px; /* leave space for icon */
#SearchBar .icon { background-image: url(../images/icons/search.png); }

我之前使用过的一个很好的技术是设置多个 CSS 类（在本例中，用于显示审核日志）：

/* the icon is displayed by each entry; if it has no other class,
   it will show a "generic" icon */
.log .entry {
    padding-left: 20px; /* leave space for icon */
    background: url(../images/icons/log-generic.png) top left no-repeat;
}

/* slot a generic delete icon in */
.log .icon.delete {
    color: red;
    background-image: url(../images/icons/log-delete.png);
}

.log .icon.delete.person {
    background-image: url(../images/icons/log-delete-person.png);
}

这是定义一系列通用样式的好方法（对于带有图标、工具栏按钮、头像等的链接），然后您可以在特定实例中覆盖它们（将其视为类继承）。

我对 CSS 中的命名有点奇怪，但我坚持使用 UpperCase 表示 ID，lowerCamel 表示类的约定。它只是帮助我区分。

我遵循的 CSS 命名禅宗是：

ID 越少，
为主布局部分保留的 ID 就
越好...并识别 DOM/AJAX 操作的元素
使用通用类名称（日志、图标、人物、按钮等） )
...然后将它们与 ID 或父类组合以形成细节，例如 #Header a.icon.person 用于标题中的个人资料链接

最重要的是，保持简洁。 CSS 越少越好 - 使用通用、可重用的样式，您将受益于 a) UI 的一致性，以及 b) 更少的页面膨胀。

华泰

Remember that you can stack and inherit CSS classes, as follows:

.icon { background: left center no-repeat; padding-left: 20px; /* leave space for icon */
#SearchBar .icon { background-image: url(../images/icons/search.png); }

A nice technique I've used before is setting multiple CSS classes (in this case, for displaying an audit log):

/* the icon is displayed by each entry; if it has no other class,
   it will show a "generic" icon */
.log .entry {
    padding-left: 20px; /* leave space for icon */
    background: url(../images/icons/log-generic.png) top left no-repeat;
}

/* slot a generic delete icon in */
.log .icon.delete {
    color: red;
    background-image: url(../images/icons/log-delete.png);
}

.log .icon.delete.person {
    background-image: url(../images/icons/log-delete-person.png);
}

This is a great way to define a series of generic styles (for links with icons, toolbar buttons, avatars, etc), which you can then override in specific instances (think of it as class inheritance).

I'm a bit weird about naming in CSS, but I stick to the convention that UpperCase is for IDs, and lowerCamel for classes. It just helps me to differentiate.

The zen of CSS naming that I follow is:

The fewer IDs, the better
IDs should be reserved for main layout sections
...and to identify elements for DOM/AJAX operations
Use generic class names (log, icon, person, button, etc)
...then combine them with IDs or parent classes to form specifics, e.g. #Header a.icon.person for a profile link in the header

Most importantly, keep it lean. The less CSS, the better - use generic, re-usable styles, and you will benefit from a) consistency in your UI, and b) less page bloat.

HTH

回复收藏 0 原文