这是如何你的CSS样式表结构？ [英] Is this how you would structure your CSS stylesheet?
问题描述
抛开一个问题：你应该提供单个还是多个样式表，假设你只发送一个，你认为这是一个基本结构？
/ *结构* /
任何模板布局都应该放在这里，因此页眉，页脚，正文等。
/ *结构结束* /
/ *公共组件* /
作为注册表单，列表等。
/ *公共组件结束* /
* /
某些网页可能有特定的样式，会在这里。
* /
/ *具体Page 2 * /
如上
/ *具体页面Page 2结束* /
/ *特定页面etc * /
等等。
/ *具体页面结束* /
这与我的结构类似，但是，我发现使用子标题是最好的方法，所以我使用这个结构：
*************************
* GLOBAL *
************** *********** /
/ *所有常见的东西都在这里，在相应的子标题下* /
/ *标题格式* /
/ *文本格式* /
/ *表单格式化* /
/ *表格式格式化* /
/ * etc * /
/ *************************
*布局*
* ************************ /
/ *所有的布局都在这里sub -headings * /
/ *标题* /
/ *左侧栏* /
/ *右侧栏* /
/ *页脚* /
/ *************************
* NAVIGATION *
************ ************* /
/ *我把导航分开到布局，因为它们的子目录下可以有多个导航点-headings * /
/ *主导航（水平）导航* /
/ p>
/ *右导航* /
/ *导航导航* /
/ *************************
*表格*
******* ****************** /
/ *任何与通用格式不同的表单格式，如果有多个不同格式的表单，然后使用子标题* /
/ ********************* **
* TABLES *
************************* /
/ *与表单相同的交易* /
/ ********************** ***
* LISTS *
************************* /
/ *与表单和表格相同的交易* /
/ ***************** ******
* CONTENT *
************************* /
/ *特定页面的任何特定格式，按照与表单，表格和列表相同的方式按页面的子标题分组* /
/ *************************
* CSS支持*
*********** ************** /
/ *这是适用于任何网页上任何元素的任何特殊格式，它将覆盖该项目的常规格式。例如，这可能有以下的东西：* /
.float-right {float：right; }
.float-left {float：left; }
.float-center {margin-left：auto; margin-right：auto; }
.clear {clear：both}
.clear-block {display：block}
.text-left {text-align：left}
.text-right {text -align：right}
.text-center {text-align：center}
.text-justify {text-align：justify}
.bold {font-weight：bold}
.italic {font-style：italic}
.underline {border-bottom：1px solid}
.nopadding {padding：0}
.nobullet {list-style：none; list-style-image：none}
/ * etc * /
希望有帮助。
我一般不建议在这样的单行写字，或者像链接Adam建议的，如果他们长时间，他们很难跳过。对于上面的例子，它只是更快地键入它们这样的方式，所以我不必缩进每一行。
对于格式化我会推荐这种结构： p>
.class {
width：200px;
height：200px;
border：1px solid＃000000;
}
等等，我把类或ID的结构放在顶部，然后是任何其他格式，如下面的字体等。让它非常快速，清楚地跳过。
Leaving aside the question of whether you should serve single or multiple stylesheets, assuming you're sending just one, what do you think of this as a basic structure?
/* Structure */
Any template layout stuff should be put into here, so header, footer, body etc.
/* Structure End */
/* Common Components*/
Repeated elements, such as signup forms, lists, etc.
/* Common Components End*/
/* Specific Page 1 */
Some pages might have specific styles, that would go here.
/* Specific Page 1 End */
/* Specific Page 2 */
As above
/* Specific Page 2 End */
/* Specific Page etc */
And so on.
/* Specific Page etc End */
That's similar to how I structure mine, however, I find that using sub-headings is the best way to do it, so I use this structure:
/************************* * GLOBAL * *************************/
/* All of the common stuff goes here under the appropriate sub headings */
/* Heading formatting */
/* Text formatting */
/* Form formatting */
/* Table formatting */
/* etc */
/************************* * LAYOUT * *************************/
/* All the layout things go here under sub-headings */
/* Header */
/* Left Sidebar */
/* Right Sidebar */
/* Footer */
/************************* * NAVIGATION * *************************/
/* I put navigation separate to the layout as there can be a number of navigation points under their sub-headings */
/* Main (horizontal) Navigation */
/* Left Navigation */
/* Right Navigation */
/* Breadcrumb Navigation */
/************************* * FORMS * *************************/
/* Any form formatting that varies from the common formatting, if there are multiple differently formatted forms, then use sub-headings */
/************************* * TABLES * *************************/
/* Same deal as forms */
/************************* * LISTS * *************************/
/* Same deal as forms and tables */
/************************* * CONTENT * *************************/
/* Any specific formatting for particular pages, grouped by sub-headings for the page the same way as forms, tables and lists */
/************************* * CSS SUPPORT * *************************/
/* This is for any special formatting that can be applied to any element on any page and have it override the regular formatting for that item. For example, this might have things like: */
.float-right { float: right; }
.float-left { float: left; }
.float-center { margin-left: auto; margin-right: auto; }
.clear { clear: both }
.clear-block { display: block }
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.bold { font-weight: bold }
.italic { font-style: italic }
.underline { border-bottom: 1px solid }
.nopadding { padding: 0 }
.nobullet { list-style: none; list-style-image: none }
/* etc */
Hope that helps.
I generally don't recommend writing on a single line like that though, or like suggested in the link Adam posted, they get very difficult to skim over if they get long. For the examples above, it was just quicker to type them that way so I didn't have to indent every line.
For formatting I would recommend this structure:
.class {
width: 200px;
height: 200px;
border: 1px solid #000000;
}
And so on, I put the structure of the class or ID at the top, then any other formatting, like the font etc below that. Makes it very quick and clear to skim over.
这篇关于这是如何你的CSS样式表结构？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
