结构命名约定-本质上-只是意味着通过描述来命名(通过为它们分配class和/或id属性)元素它们是什么,而不是他们在哪里或如何看．它的对应物叫做呈现命名，它描述了位置和/或外观的网页元素。
本CSS技巧讨论的是结构命名约定的概念,使用此约定的好处,股票一些指导方针结构命名约定的实际应用。
让我们从一个表示命名示例开始
要通过示例来说明，请看示例1，它使用了表示命名约定。示例1:一种演示布局。
布局有什么问题吗?
有两个中所示的命名约定的主要基本缺陷示例1．首先，它让人很难移动的东西不影响您的标记的准确性。
虽然# top-div而且# bottom-div将最有可能留在原地，设计决定把次要内容(# right-col)在主要内容区右侧(#对应)完全无效文档的模型。其次，这些名字并不能帮助描述元素是什么——什么他们为而且他们所做的事情作为整个文档的一部分。例如，与类的链接.red-link在示例1描述链接的颜色，但不说明它的用途。
一个现实的例子
假设我在我的哈里斯堡的网页设计团队-我们打电话给他吧戴夫新手．我给了戴夫更新一个网站的任务表象的命名约定而不是结构命名约定。网站的CSS很像示例1，但它不是只有13行声明，而是500行(单行距、单行、速记符号)。
除了更新页面和为元素分配适当的类或id之外，我没有给Dave任何其他指示(我没有注释我的代码，因为记住——我喜欢做事情强硬的方式)．在Dave负责更新的网页中，他遇到了一类带有此名称的特殊链接.red-link(如示例1所示)。
现在他在想为什么这些人有一门课.red-link…如果而不是的.red-link，我给它起了个名字.external-link？
戴夫会知道立即(如果他没有——那么我就不得不重新考虑他的工作)任何指向另一个网站的链接都会被分配一个链接.red-link．这就是实践理性用于选择结构命名约定而不是表示命名约定——如果不是语义和最佳实践-为了帮助Dave Newbie了解特定的类和id的含义，而不是他们长什么样，在哪里(他已经看到了不管怎样——前提是他没有阅读障碍或特殊形式的色盲)。让我们返工示例1反映一种(某种)结构命名约定。
示例2:结构化命名约定。
在示例2，我已经将类和id重命名为structurally-descriptive的名字。# top-div已经成为#头，#对应(左栏的简称)已更名为#主要内容，等等。
这样更好，也更直观。
等一下!
看完这个例子，你们中的一些人可能会说等一下雅各,不是#头而且#页脚表象的描述符?”——有些人甚至会用一个简短的显式和感叹号来修改这个问题，比如“……WTF!，有些人甚至会说“WTF n00b!!”。是的事实上，你(大部分时候)正确的．
但现在我问你:没有任何额外的信息#头而且#页脚对你意味着？一些回应可能是:
#头是为…
- 标志/品牌
- 你的主要导航在哪里
- 你网站的标语在哪里，等等。
#页脚是为…
- 版权信息
- 重要页面链接的重复
- 辅助信息或附加的网站功能
没有告诉你(或者Dave Newbie)，他们是什么意思对我来说你已经知道它们是干什么用的了可能的意思。那是因为名字像#头，#页脚,#侧边栏是完善的．在对一些网络专业人士的网站的调查中，安迪·克拉克列出了这些网站结构的命名惯例，点击这里查看．
你可以在安迪·克拉克的调查中看到#头而且#页脚是主食，大部分时间都在使用。所以他们立即辨认。我们可以遵循结构命名约定盲目地而不是使用#品牌为#头而且# siteinfo为#页脚-但最终，我选择为实用性的目的．
#头而且#页脚还描述的目的而且结构在文件中的这些特定元素中，完全就像#品牌和# siteinfo。简而言之，戴夫·纽比不会在凌晨3点敲我的门问我什么#品牌意思是他要赶在最后期限前完成工作(戴夫，请下次给我打电话或发短信，不要直接出现在我家前门的台阶上)。但对于那些不愿妥协的人，让我们重新来过示例2到一个严格structurally-named例子。
示例3:真正使用结构命名约定。示例3在命名约定上是完全结构化的。它描述div和其他元素的用途，而不是它们的位置或外观。
我在很久以前安迪·克拉克写的一篇文章中引用了他的建议。
一些指导方针
这里有一些指导原则，可以帮助您命名元素在结构上,这些只是那- - - - - -的指导方针．最后，您必须使用对您和手头项目最有利的方法。
1.在分配类或id时，问自己“这个元素是干什么用的?”
例如，如果您有一个用于标题的span类，您可以调用它.caption或.figure-caption而不是.smaller-text．如果一组特定的图像是横幅广告，您可能需要调用该类.banner或.ad-banner而不是.sidebar-images(因为他们可能会改变地点)。
2.避免使用依赖于特定元素的位置或视觉方面的名称
在示例1,我们使用.red-link对于以下链接红色的,#对应对于左边这一列。后来,在示例2而且示例3我们把它们改为。external-link和。main-content。这样做的实际原因是，它可以保持HTML标记的准确性，即使—比如说—您更改了.red-link类绿色或棕色（的）．
当然你可以做批量查找和替换如果你有一个静态网站，追捕.red-link而且替换它们与.blue-link在所有受影响的HTML文档中，但是为什么要依赖它当你可以从一开始就避免它稍作考虑。它还保存您的代码(代码使用字面上的这里，并不是说CSS或HTML是编程——其实它们不是)语义的。你不需要改变.red-link即使您更改了样式表中颜色属性的值，但它也会更改语义不准确在描述特定元素时。
例如，即使它被称为.red-link你把你的样式声明改成:
A.red-link{颜色:蓝色;｝
一个类中的元素.red-link将呈现为蓝色的不管它们的类名如何(至少在大多数浏览器中)。但那不是令人恼火的？我知道我晚上就睡不着觉了知道我的.red-link的被渲染成蓝色。
那岂不是让人困惑戴夫·纽比，我开发团队的新成员?如果不是.red-link或.blue-link,我用.external-link，那么不管它是红、绿、蓝还是黑——只要我这样做，它就会准确事实上使用它们外部链接．
3.使用对你来说直观的名字
早些时候,在示例2,我用#头而不是#品牌．原因是我感觉到了#头是更多的可辨认的比#品牌．注意，尽管它可以被解释为一个位置描述-我仍然在使用它．
我决定做最好的事对我来说和我认为最好的选择对于可能在同一项目中工作的人．我打破了“规则”(注意规则都加了引号，因为这些更像的指导方针而不是国家的法律)——可以这么说——是为了实用性和一般的直觉性。这里有一个命名类和id的好指南直观地．
问问自己,“如果我问戴夫新手这个类(或id)是用来干什么的，他会自动知道吗?“给变量命名是编程的第101课直观地这其他程序员将知道变量包含什么(总美元而不是$ t)——这个教训就是适用于CSS命名约定．
进一步的阅读
结构命名的概念不是新的这一概念引起了广泛的讨论。在这里，我想分享一些关于这个主题的资源，以帮助您进一步探索这个概念。
结构命名
在一篇短文中，Eric Meyer讨论了他对类和id命名约定的观点，提到安迪·克拉克的观点对此事。
标准化CSS类和id名
Michael Meadhra讨论了表示命名约定和结构命名约定。
为未来而建:弯曲，不要折断
garrett Dimon讨论了创建一个灵活和适应性强的网站的基础，总是为未来的变化做好准备。他还提到了HTML标记是如何成为一个网站的基础，并引用了诸如left_bar在设计变更中很快就会过时。
关于CSS Tips系列
的CSS技巧系列是关于Six revision的一组文章，重点关注特定的CSS技巧、概念或最佳实践。在每一篇文章中，我将解构一个特定的技巧/标准/最佳实践，并提供每个技巧/标准/最佳实践的背景、优点和缺点。这些应该有助于澄清有关的问题网页设计．
这些建议不是特定行业的，所以它们应该帮助网页设计师为客户建立网站房地产经纪人到学校。我相信两者都要学习理论而且实践，以及在两者之间取得平衡严格的，不妥协的标准而且实用性这样你就有机会了解人们的生活方式通常这样做，为什么你不应该盲目跟随他们．我会尽可能全面地介绍每一个CSS技巧，但是我依靠你来如果我说错了，请纠正我，详述我略读过的东西，澄清可能使我们的新手开发人员感到困惑的东西,就这个话题提供你自己的看法-所以我非常鼓励你来在评论中发表意见．
要查看到目前为止所有的CSS技巧文章，您可以转到CSS类别．
