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

CSS 约定/代码布局模型

发布于 2024-07-09 09:54:27 字数 145 浏览 6 评论 0原文

有没有尝试过创建一种形式化的方法来组织 CSS 代码？在我制定自己的保持可读性的策略之前，我想知道还有什么。谷歌并没有多大帮助，因为我不完全确定要搜索哪些术语。

我更多地思考缩进/间距、何时使用新行、命名约定等。

有什么想法吗？

原文

分享到QQ

分享到微博

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

发布评论

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

美人如玉 2024-07-16 09:54:27

ClearLeft 成名的 Natalie Down 制作了一个非常棒的幻灯片，涵盖了这个主题以及更多内容 http:// natbat.net/2008/Sep/28/css-systems/

下载 PDF，因为它包含的信息比幻灯片多得多。我会向所有技能水平的 CSS 开发人员推荐这个。

回复收藏 0 原文

但可醉心 2024-07-16 09:54:27

根据通常的代码格式化辩论，这都是非常主观的，我不知道任何正式的约定。

我选择的方法是使用所有小写的类和 id，并用下划线分隔单词（例如 #page_container）。我首先声明所有 tag 样式（html、body、ul 等），然后是所有类和id，按字母顺序排序。此外，每个类、id 或标签中定义的所有样式也按字母顺序定义。使用这种约定可以更容易地追踪特定的风格。

对于格式化，我总是将其压缩得尽可能小，但仍然清晰。我将所有内容放在一行上，并留有适当的空白。如果您有 Visual Studio，则可以指定此格式并自动以这种方式格式化（在“工具”、“选项”、“文本编辑器”、“CSS”、“格式”下将“样式”设置为“紧凑规则”） >）。

命名约定在这里非常主观，但要记住的是根据元素的预期目的来命名元素，而不是它们的样式含义。例如，如果您想将公司口号设置为大红色字体，则将 ID 命名为 #slogan 而不是 #red_bold。

这是一个完整的例子，可以给你一个想法：

body { background-color: #fff; color: #999; font-family: verdana, arial, helvetica, sans-serif; font-size: 76%; padding: 0; margin: 0; }
a { color: #2c5eb4; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: #f70; font-family: helvetica, verdana, arial, serif; font-weight: bold; margin: 1.2em 0; }
h1 { font-size: 2.4em; line-height: 1.2em;  margin-bottom: 0em; margin-top: 0em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; font-weight: bold; }
h5 { font-size: 1.0em; font-weight: bold; }
h6 { font-size: 0.8em; font-weight: bold; }
img { border: 0; }
li, ol, ul { font-size: 1.0em; line-height: 1.8em; list-style-position: inside; margin-bottom: 0.1em; margin-left: 0; margin-top: 0.2em; }
#content { clear: both; margin: 0; margin-top: -4em; }
#columns { height: 36em; }
#column1, #column2, #column3, #column4 { border-right: 1px solid #dbdbdb; float: left; width: 18%; margin: 0 0.5em; padding: 0 1em; height: 100%; }
#column1 { width: 28%; }
#column1 input { float: right; }
#column1 label { color: #999; float: left; }
#column2 a, #column3 a { font-weight: bold; }
#column4 { border-right: 0; }
#form { margin: 0 2em; }
.help_button { float: right; text-align: right; width: 30px; }

This is all very subjective as per the usual code formatting debates and I do not know of any formalized conventions.

The method I've chosen is to use all lowercase classes and ids with underscores separating words (#page_container for example). I declare all my tag styles first (html, body, ul, etc.), then all classes and ids, sorted alphabetically. Additionally, all the styles defined in each class, id, or tag are defined alphabetically as well. Using this convention makes it easier to track down a particular style.

For formatting, I always compress it as small as possible, but still legible. I put everything on one line with appropriate white space. If you have Visual Studio, you can specify this format and have it automatically formatted this way for you (Set Style to Compact rules under Tools, Options, Text Editor, CSS, Format).

Naming conventions are extremely subjective here, but the thing to keep in mind is to name your elements as their intended purpose, not their styled meaning. For example, if you have a company slogan you want to style in a large, red font name the id #slogan instead of #red_bold.

Here's a full example to give you an idea:

body { background-color: #fff; color: #999; font-family: verdana, arial, helvetica, sans-serif; font-size: 76%; padding: 0; margin: 0; }
a { color: #2c5eb4; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: #f70; font-family: helvetica, verdana, arial, serif; font-weight: bold; margin: 1.2em 0; }
h1 { font-size: 2.4em; line-height: 1.2em;  margin-bottom: 0em; margin-top: 0em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; font-weight: bold; }
h5 { font-size: 1.0em; font-weight: bold; }
h6 { font-size: 0.8em; font-weight: bold; }
img { border: 0; }
li, ol, ul { font-size: 1.0em; line-height: 1.8em; list-style-position: inside; margin-bottom: 0.1em; margin-left: 0; margin-top: 0.2em; }
#content { clear: both; margin: 0; margin-top: -4em; }
#columns { height: 36em; }
#column1, #column2, #column3, #column4 { border-right: 1px solid #dbdbdb; float: left; width: 18%; margin: 0 0.5em; padding: 0 1em; height: 100%; }
#column1 { width: 28%; }
#column1 input { float: right; }
#column1 label { color: #999; float: left; }
#column2 a, #column3 a { font-weight: bold; }
#column4 { border-right: 0; }
#form { margin: 0 2em; }
.help_button { float: right; text-align: right; width: 30px; }

回复收藏 0 原文

鲜肉鲜肉永远不皱 2024-07-16 09:54:27

这是我如何排序 css 属性的草稿。它大致遵循先进行定位和布局，然后是排版，然后是背景和其他小事情的指导方针。我尝试尽可能合理地根据属性对盒模型的影响来对属性进行排序。然而，我的顺序往往会发生一些变化。如果对此有任何评论，我将不胜感激。

el {
    display:;
    float:;
    clear:;
    visibility:;
    position:;
    top:;
    right:;
    bottom:;
    left:;
    z-index:;
    width:;
    min-width:;
    height:;
    min-height:;
    overflow:;
    margin:;
    padding:;
    border:;
    border-top:;
    border-right:;
    border-bottom:;
    border-left:;
    border-width:;
    border-top-width:;
    border-right-width:;
    border-bottom-width:;
    border-left-width:;
    border-color:;
    border-top-color:;
    border-right-color:;
    border-bottom-color:;
    border-left-color:;
    border-style:;
    border-top-style:;
    border-right-style:;
    border-bottom-style:;
    border-left-style:;
    border-collapse:;
    border-spacing:;
    outline:;
    list-style:;
    font:;
    font-family:;
    font-size:;
    line-height:;
    font-weight:;
    text-align:;
    text-indent:;
    text-transform:;
    text-decoration:;
    white-space:;
    vertical-align:;
    color:;
    opacity:;
    background:;
    background-color:;
    background-image:;
    background-position:;
    background-repeat:;
    cursor:;
    }

就我个人而言，我更喜欢将每行一个属性缩进一个制表符，并将右大括号缩进一个制表符。对我来说，这种方式更清晰，但这绝对是一个意见/偏好的问题。

我曾经使用 Tab 缩进 css 声明来尽可能匹配我的 html 父/子关系，但我不再这样做。 CSSEdit 的分组功能有助于大大减少这样做的诱惑。

CSS 实际上并没有任何规定的代码结构约定。所以这取决于什么最适合你。

Here's a draft of how I order my css properties. It roughly follows the guideline of doing positioning and layout first, then typography, then backgrounds and other minor things. I try to order my properties by how they affect the box model as much as is reasonably possible. However, my ordering tends to shift around a bit. I'd appreciate any comments on this.

el {
    display:;
    float:;
    clear:;
    visibility:;
    position:;
    top:;
    right:;
    bottom:;
    left:;
    z-index:;
    width:;
    min-width:;
    height:;
    min-height:;
    overflow:;
    margin:;
    padding:;
    border:;
    border-top:;
    border-right:;
    border-bottom:;
    border-left:;
    border-width:;
    border-top-width:;
    border-right-width:;
    border-bottom-width:;
    border-left-width:;
    border-color:;
    border-top-color:;
    border-right-color:;
    border-bottom-color:;
    border-left-color:;
    border-style:;
    border-top-style:;
    border-right-style:;
    border-bottom-style:;
    border-left-style:;
    border-collapse:;
    border-spacing:;
    outline:;
    list-style:;
    font:;
    font-family:;
    font-size:;
    line-height:;
    font-weight:;
    text-align:;
    text-indent:;
    text-transform:;
    text-decoration:;
    white-space:;
    vertical-align:;
    color:;
    opacity:;
    background:;
    background-color:;
    background-image:;
    background-position:;
    background-repeat:;
    cursor:;
    }

Personally I prefer to keep one property per line indented one tab, with the closing curly brace indented one tab. To me it's more legible this way, but that's definitely a matter of opinion/preference.

I used to tab indent css declarations to match my html parent/child relationships as much as possible, but I no longer do that. The grouping feature ofCSSEdit helps greatly reduce the temptation to do so.

CSS doesn't really have any prescribed convention for code structure. So it comes down to what works best for you.

回复收藏 0 原文

等数载，海棠开 2024-07-16 09:54:27

好吧，我个人并不知道任何约定本身，但我知道有很多建议是值得遵循的好主意，但基本上取决于你想要如何实现你的 CSS，以便你选择一个最适合你。

回复收藏 0 原文

删除会话 2024-07-16 09:54:27

文件应该模块化，因此您可以使用@import。我通常有一个用于基类（例如版式和颜色）的 base.css 文件。根据您的站点结构，还拥有其他 CSS“部分”以便在面向用户的样式表中重用可能会更有利。这些后代样式表可以根据需要以更细粒度扩展基本样式（例如，.warn {color:red;} 可能会通过 p.warn {font-style:italic;} 进行扩展code> 或 h1.warn {border:5px Solid red;})，这是实现所谓的面向对象的 CSS。

在文件本身中，我喜欢按字母顺序排列我的选择器和属性列表。我尝试为不同类型的选择器维护单独的列表（首先是 id 列表，然后是类列表，然后是元素选择器列表），但我发现这不必要地困难，所以我将所有选择器都放在同一个字母顺序中列表。这样我就可以快速找到所有复杂选择器的根或赋予简单选择器的任何样式。

在复杂的选择器中，我按字母顺序列出每个选择器。

如果由于某种原因我无法使用 Sass，我可能会模仿它的嵌套模式（我我仍然不确定这是否有效），就像这样：

@import url('/css/base.css');

a {
  color:#369;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: underscore; }
  a img {
    border: 0; }

blockquote, .nav, p {
  margin-bottom: 10px; }
blockquote {
  background: #eee;
  padding: 10px; }

h1, h2, h3, h4 {
  font-family: Georgia, serif; }
h1.warning {
  border: 5px solid red; }

.nav a {
  font-size: 150%;
  padding: 10px; }
.nav li {
  display: inline-block; }

p.warning {
  font-style: italic; }
  p.warning a {
    background: #fff;
    border-bottom: 2px solid #000;
    padding: 5px; }
  p.warning .keyword {
    text-decoration: underline; }

不幸的是，您可能会寻找 p 的边距，但没有意识到它是 blockquote、.nav、p 的一部分。这也不是非常“面向对象”的设计，但可以说它比将类字符串放在几乎每个需要样式的元素上要好。

因此，这种方法并不完美，也不能完全让您不必有时在文件中查找，但当我由于无法控制的原因而无法使用 CSS 模板工具时，这是我开发的最佳方法。我很想听到有关改进此方法的任何建议:)

Files should be modularized, so you can make use of @imports. I typically have a base.css file for base classes (such as typography and colors). Depending on your site structure, it may be advantageous to also have other CSS "partials" to reuse throughout user-facing stylesheets. These descendant stylesheets can extend base styles with more granularity as needed (E.g., .warn {color:red;} might get extended by p.warn {font-style:italic;}, or h1.warn {border:5px solid red;}), which is a great design pattern for implementing so-called object-oriented CSS.

Within the files themselves, I like to alphabetize my selectors and property lists. I have tried maintaining separate lists for different types of selectors (an id list first, then my list of classes, and then my list of element selectors), but I've found this unnecessarily difficult, so I have all selectors in the same alphabetical list. That way I can quickly find the root of all complex selectors or any styles given to a simple selector.

Within complex selectors, I list each selector alphabetically.

If I can't use Sass for some reason, I might imitate its nesting pattern (I'm still unsure if this is working out or not), like so:

@import url('/css/base.css');

a {
  color:#369;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: underscore; }
  a img {
    border: 0; }

blockquote, .nav, p {
  margin-bottom: 10px; }
blockquote {
  background: #eee;
  padding: 10px; }

h1, h2, h3, h4 {
  font-family: Georgia, serif; }
h1.warning {
  border: 5px solid red; }

.nav a {
  font-size: 150%;
  padding: 10px; }
.nav li {
  display: inline-block; }

p.warning {
  font-style: italic; }
  p.warning a {
    background: #fff;
    border-bottom: 2px solid #000;
    padding: 5px; }
  p.warning .keyword {
    text-decoration: underline; }

Unfortunately, you may look for the margin for p and not realize that it's part of the blockquote, .nav, p. This also isn't very "object-oriented" design, but it's arguably better than putting strings of classes on virtually every element that requires styling.

So, this approach isn't perfect and doesn't completely free you from sometimes having to find-in-file, but it's the best approach I have developed when I cannot use CSS templating tools for reasons beyond my control. I would love to hear any suggestions on improving this method :)

回复收藏 0 原文

~没有更多了~