CSS约定/代码布局模型

Question

是否有任何尝试和创建用于组织CSS代码的形式化方法？在我开始制定自己的保持可读性的策略之前，我想知道还有其他什么。谷歌并没有太大的帮助，因为我不完全确定要搜索什么条款。

我一起缩进/间距的线条更加的思维，当使用新的生产线，命名约定，等

任何想法？

Answer 1

的ClearLeft成名娜塔莉下产生一个真正伟大的幻灯片放映覆盖这一主题，更http://natbat.net/2008/Sep/28/css-systems/

下载PDF因为它包含了比幻灯片更大量的信息。我会推荐给所有技能水平的CSS开发人员。

Answer 2

嗯，我本人并不认识任何约定的本身，但我知道有很多的建议，在那里，都遵循真正的好主意，但基本上取决于你想如何实现你的CSS为你选择一个最适合你的人。

Answer 3

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

我选择的方法是使用所有小写类和IDS用下划线分隔单词（#page_container例如）。我宣布我所有的标签风格第一（html，body，ul等），那么所有的class和id，按字母顺序排序。此外，每个类，ID或标签中定义的所有样式也都按字母顺序定义。使用此约定可以更轻松地追踪特定样式。

对于格式化，我总是压缩尽可能小，但仍然清晰。我把所有东西放在一个适当的空白区域上。如果你有Visual Studio中，您可以指定此格式，并将它自动格式化这样你（设置样式为契约规则下工具，选项，文本编辑器，CSS格式）。

命名约定是非常主观的在这里，但要记住的事情是命名的元素作为其使用目的，不是他们的风格的意思。例如，如果您有一个公司标语，您希望使用大号，红色字体名称编号为#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; } 

Answer 4

这里是如何订购我的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:; 
    } 

就我个人而言，我更喜欢每行保留一个属性缩进一个选项卡，并使用大括号缩进一个选项卡。对我来说，这样更清晰，但这绝对是一个意见/偏好的问题。

我用来缩进缩进css声明以尽可能匹配我的html父/子关系，但我不再那样做。CSSEdit的分组功能有助于大大降低诱惑力。

CSS实际上没有任何规定的代码结构约定。所以这归结于最适合你的东西。

Answer 5

文件应该模块化，所以你可以使用@import s。我通常有一个基类的base.css文件（例如排版和颜色）。根据您的网站结构，在其他面向用户的样式表中重复使用其他CSS“部分”也许是有利的。这些后代样式表可以根据需要以更细化的方式扩展基本样式（例如，.warn {color:red;}可能会扩展p.warn {font-style:italic;}或h1.warn {border:5px solid red;}），这对于实现所谓的object-oriented CSS是一个很好的设计模式。

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

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

如果我不能使用萨斯出于某种原因，我可能会模仿其nesting模式（我仍然不能确定这是否是工作或不被），像这样：不幸的是

@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模板工具时所开发的最佳方法。我很想听听任何关于改善这种方法的建议:)