最好的结构CSS样式表的方法 [英] Best way to structure a CSS stylesheet

问题描述

我对CSS比较陌生，但我似乎已经有一个新手的语言。但是，虽然我阅读的许多教程经常警告正确地组织和结构化你的样式表（我可以肯定地看到为什么现在我已经创建了一些相当长的样式表）我不能在我的生活中找到任何有关的信息

I am relatively new to CSS and yet I seem to have got the language reasonably well for a newbie. However, whilst many of the tutorials I have read often warn about "organising and structuring your stylesheet properly" (and I can certainly see why now I have created some rather long stylesheets myself) I cant for the life of me find any info about a standardised format for a styleheet or a logical pattern for layout that makes later human reading easy.

例如，我为每个地理部分创建一个注释括号的部分我的页面（标题，row1，row2，article1等），并保留那个部分的所有样式在这些注释边界内？问题似乎是当我有样式在其他部分重复使用 - 并将它们放在一个页面范围的样式部分，然后否定的目的，按节分组他们。同样，通过基于文本样式，布局样式等的分组来构造我的样式表似乎更加混乱。

For example, do I create a comment-bracketed section for each "geographical" section of my page (header, row1, row2, article1 etc) and keep all styles for that section within those comment borders? The problem seems when I have styles that get re-used in other sections - and putting them under a section for page-wide styles then negates the purpose of grouping them by section at all. Likewise, structuring my stylesheet by grouping based on text styles, layout styles etc seems even more confusing.

有没有好的做法？我知道这听起来很蠢，但似乎无论你使用HTML和CSS做什么，有人准备告诉你它的错误，坏的做法或无意识，我离开困惑。

Is there a "good practice"? I know this sounds dumb but it seems no matter what you do with HTML and CSS somebody is ready to tell you its wrong, bad practice or unsemantic and I'm left confused. I want my code to be a good example of my work in case an employer wants to check it in future.

推荐答案

我希望我的代码能够成为我工作的一个很好的例子。 ve从来没有实际教过，但我可以让你知道我如何组织我的CSS文档。正如你所说，我喜欢将它分成地理区域，即适用于标题，侧边栏，主要内容，页脚等的规则。然后，在这些下面，我添加非常具体的规则，说如果我需要在特定页面上设置表单或表格。最后，我在底部添加一个General Gubbins部分，当我添加可能适用于所有的通用规则。

I've never been actually taught, however I can let you know how I organise my CSS documents. As you say, I like to divide it up into "geographical" areas... i.e. the rules that apply to the header, the side bars, the main content, the footer, etc. And then, below these I add very specific rules, say if I need to style a form or a table on a particular page. Finally I add a "General Gubbins" section at the bottom when I add generic rules that may apply across the board.

哦，我也喜欢添加设计师的调色板

Oh yes, I also like to add the designer's palette to the top for quick reference.

例如...

/*
PALETTE:
dark grey : #555555;
pink      : #d93575;
*/

/* HEADER */
#header {...}
#header ul {...}

/* SIDE BAR */
#side {...}
#side ul {....}

/* CONTENT */
#content{...}
#content p {....}

/* FOOTER */
#footer{...}
#footer div {....}

/* FORMS */
form {...}
input {...}

/* GENERAL GUBBINS */
.center {...}
strong {...}
floatleft {...}

这篇关于最好的结构CSS样式表的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！