我一直在努力寻找组织CSS代码的最佳方法,特别是在大型网站上.我对编写风格以及人们如何构建和管理代码的兴趣不大.
我一直在关注这种结构,我觉得它的可维护性很好,但我想对此有所了解并听取其他方法：
/*=======================================
1. =reset
=======================================*/
/**
Anything but * reset
**/
/*=======================================
2. =base
=======================================*/
/**
Base rules so naked HTML has basic style and displays consistently x-browser
**/
/*=======================================
3. =base forms
=======================================*/
/**
Base form framework
**/
/*=======================================
4. =base site
=======================================*/
/**
Rules common across the majority of pages
e.g. header,footer,main columns,navigation,search bar etc.
**/
/*=======================================
5. =recurring styles
=======================================*/
/**
Re-useable snippets -- not to include positioning / structure etc.
e.g. buttons,icons etc.
**/
/*=======================================
6. =recurring modules
=======================================*/
/**
Re-usable modules common to multiple pages/views but not majority
e.g. a product carousel could be on the homepage as well as the product page and maybe even the checkout page etc.
**/
/*=======================================
7. =homepage
=======================================*/
/**
contains rules only applicable to homepage
**/
/*=======================================
8. =about page
=======================================*/
/**
contains rules only applicable to about page
**/
/*=======================================
9. =contact page
=======================================*/
/**
contains rules only applicable to contact page
**/
...and so on
任何想法将不胜感激.
丰富
最佳答案
我的基本格式是顶部的块注释,并带有标题注释(与您的类似)潜入主要区域.
原文链接：https://www.f2er.com/css/427039.html/*
* Title of the site
* Author
* Date created
* Last updated
*
* 1-2 line description of what the style sheet is for.
*
*/
/* Reset (probably imported)
-------------------------------------------------------------------------------- */
...
/* A Framework (probably imported)
-------------------------------------------------------------------------------- */
I like YUI Grids
/* Global
-------------------------------------------------------------------------------- */
Styles for basic elements like: body,h1-h6,p,ul,li,...,and often a wrapper.
/* Header
-------------------------------------------------------------------------------- */
Any styles specifically for the header block (this is usually short)
/* Body
-------------------------------------------------------------------------------- */
Basic layout for the main body block
/* Footer
-------------------------------------------------------------------------------- */
Similar to header
/* Utility Classes
-------------------------------------------------------------------------------- */
Things like
.align-center { text-align: center; };
.hide { display: none !important; }
...
/* Specific Pages
-------------------------------------------------------------------------------- */
Those are my usual subsections (separated by 2 line breaks). Beyond that,short
rules that only apply to a certain page or subset of pages will get a section like
this.
还有一些提示：
缩进特定小节的后代.*
div#left-col { ... }
* html #left-col { ... }
#left-col p { ... }
#left-col ul { ... }
* html #left-col ul { ... }
#left-col li { ... }
*但是keep rules efficient与选择器中包含的后代数量.通常,我会写：
div#left-col li span { font-weight: bold; }
代替：
div#left-col ul li a span { font-weight: bold; }
请记住,这正在改变规则选择的内容,但只要它适用于您的页面并且可维护,就可以了.
字母表属性.
body {
color: #ccc;
font-family: Helvetica,Arial,sans-serif;
padding: 2em;
-webkit-something: some value;
}
将短规则折叠为1行(如果它不会损害可维护性).
div#left { float: left; margin-top: 30px; width: 300px; }
