Categorizing CSS Rules
Every project needs some organization. Throwing every new style you create onto the end of a single file would make finding things more difficult and would be very confusing for anybody else working on the project. Of course, you likely have some organization in place already. Hopefully, what you read among these pages will highlight what works with your existing process and, if Irsquo;m lucky, you will see new ways in which you can improve your process.
How do you decide whether to use ID selectors, or class selectors, or any number of selectors that are at your disposal? How do you decide which elements should get the styling magic you wish to bestow upon it? How do you make it easy to understand how your site and your styles are organized?
At the very core of SMACSS is categorization. By categorizing CSS rules, we begin to see patterns and can define better practices around each of these patterns.
There are five types of categories:
1. Base
2. Layout
3. Module
4. State
5. Theme
We often find ourselves mixing styles across each of these categories. If we are more aware of what we are trying to style, we can avoid the complexity that comes from intertwining these rules.
Each category has certain guidelines that apply to it. This somewhat succinct separation allows us to ask ourselves questions during the development process. How are we going to code things and
why are we going to code them that way?
Much of the purpose of categorizing things is to codify patterns things that repeat themselves within our design. Repetition results in less code, easier maintenance, and greater consistency in
the user experience. These are all wins. Exceptions to the rule can be advantageous but they should be justified.
Base rules are the defaults. They are almost exclusively single element selectors but it could include attribute selectors, pseudo-class selectors, child selectors or sibling selectors. Essentially, a base
style says that wherever this element is on the page, it should look like this.
Examples of Base Styles
html, body, form { margin: 0; padding: 0; }
input[type=text] { border: 1px solid #999; }
a { color: #039; }
a:hover { color: #03C; }
Layout rules divide the page into sections. Layouts hold one or more modules together.
Modules are the reusable, modular parts of our design. They are the callouts, the sidebar sections, the product lists and so on.
State rules are ways to describe how our modules or layouts will look when in a particular state. Is it hidden or expanded? Is it active or inactive? They are about describing how a module or layout
looks on screens that are smaller or bigger. They are also about describing how a module might look in different views like the home page or the inside page.
Finally, Theme rules are similar to state rules in that they describe how modules or layouts might look. Most sites donrsquo;t require a layer of theming but it is good to be aware of it.
Naming Rules
BBy separating rules into the five categories, naming convention is beneficial for immediately understanding which category a particular style belongs to and its role within the overall scope of the page. On large projects, it is more likely to have styles broken up across multiple files. In these cases, naming convention also makes it easier to find which file a style belongs to.
I like to use a prefix to differentiate between Layout, State, and Module rules. For Layout, I use l- but layout- would work just as well. Using prefixes like grid- also provide enough clarity to separate
layout styles from other styles. For State rules, I like is- as in is-hidden or is-collapsed. This helps describe things in a very readable way.
Modules are going to be the bulk of any project. As a result, having every module start with a prefix like .module- would be needlessly verbose. Modules just use the name of the module itself.
Example classes
/* Example Module */
.example { }
/* Callout Module */
.callout { }
/* Callout Module with State */
.callout.is-collapsed { }
/* Form field module */
.field { }
/* Inline layout */
.l-inline { }
Related elements within a module use the base name as a prefix.On this site, code examples use .exm and the captions use .exmcaption.I can instantly look at the caption class and understandthat it is related to the code examples and where I can find the styles for that.
Modules that are a variation on another module should also use the base module name as a prefix. Sub-classing is covered in more detail in the Module Rules chapter.
This naming convention will be used throughout these pages. Like most other things that I have outlined here, donrsquo;t feel like you have to stick to these guidelines rigidly. Have a convention, document it, and stick to it
Base Rules
A Base rule is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudoclasses. It doesnrsquo;t include any class or ID selectors. It is defining the default styling for how that element should look in all occurrences on the page.
Example Base Styles
body, form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
a:hover {
color: #03F;
}
Base styles include setting heading sizes, default link styles, default font styles, and body backgrounds. There should be no need to use !important in a Base style.
I highly recommended that you specify a body background. Some users may define their own background as something other than white. If you work off the expectation that the background will be white, your design may look brok
剩余内容已隐藏，支付完成后下载完整资料
《Scalable and Modular Architecture for CSS》
css代码的分类
每个项目都需要管理。当你需要为元素写新的css样式时，在单独的css文件的末尾添加这些样式是不明智的，这会使其他的样式和你新写的样式混淆。希望你在阅读这篇文章的时候，能找到提高书写css代码效率的方法。
在你书写css代码的时候，如何选用id选择器、类选择器和其他选择器呢？你怎么确定哪些元素需要添加样式呢？你怎么让代码变得容易理解并且条理清晰呢？
这本书的核心就是分类。通过分类整理css规则，我们可以让代码更加整洁。
下面是五种分类：
- 基本规则
- 布局规则
- 模块规则
- 状态规则
- 主题规则
我们经常分不清这五个种类的区别。如果我们在写代码的时候多加注意，就可以避免代码混乱。每个分类都有自己的准则。有效的分类可以让我们理解我们要怎么写代码，以及为什么要这样写。
分类代码的大部分目的是为了方便我们重用代码。代码重用可以减少代码量，更容易维护和在用户体验方面更好的一致性。这都是有利的地方。当然有例外的情况也是合理的。
基本规则就是默认样式。基本规则通常由元素选择器、属性选择器、伪类选择器和兄弟选择器构成。从本质上看，基本规则规定了页面上所有此类元素的样式。例如：
Examples of Base Styles
html, body, form { margin: 0; padding: 0; }
input[type=text] { border: 1px solid #999; }
a { color: #039; }
a:hover { color: #03C; }
布局规则把页面分为几个部分，每个布局中包含一个或者多个模块规则。
模块规则应该是可重用的、模块化的部分。例如侧边栏，标注，列表等都可以被称为模块。
状态规则中确定了模块规则或者布局规则在特定状态下的样式，例如隐藏、显示、激活、未激活等状态。响应式布局的代码应该也被包含在状态规则中。
主题规则和状态规则类似，其中规定了模块和布局的样式。大多数网站不会用到它，但是了解它也是好的。
命名规则
通过区分五种规则，命名规则有助于在整体页面范围内理解某一特定样式属于什么模块以及它起什么作用。在大型项目中，样式代码更容易被写在多个文件中。这种情况下，命名规则可以更容易找到代码所属的规则。
我喜欢使用前缀来区分布局规则，状态规则和模块规则。对于布局规则，我使用L-，Layout-也可以。使用前缀例如grid-也可以将布局规则从其他规则中区分出来。对于状态规则，我喜欢使用is-作为前缀，例如is-hidden和is-collapsed。遵循命名规则可以让代码易于理解。
模块规则占了规则的大部分。因此在每个模块使用前缀比如module-会引起不必要的代码冗余，所以模块命名只需要模块本身就可以。
类名样例：
/* Example Module */
.example { }
/* Callout Module */
.callout { }
/* Callout Module with State */
.callout.is-collapsed { }
/* Form field module */
.field { }
/* Inline layout */
.l-inline { }
在一个模块中，有关的元素类名应该使用一个相同的前缀，在这个例子中使用.exm作为基本前缀，标题使用.exm-caption作为类名。我可以立即找到标题类名和样式，并且知道它属于.exm模块。
如果在一个模块中使用了另外一个模块的规则，那么也应该使用这个模块的前缀。更详细的内容在模块章节中。
命名规则应该在整个页面中运用。就像我强调的，你不用严格的遵循它，你可以自己制定一个标准，然后遵循它。
基本规则
一个基本规则通过元素选择器、后代选择器、子元素选择器或者伪类选择器作用于一个元素。其中不包含id选择器。他定义了元素在页面显示的默认样式。
基本样式包括设置标题大小、默认链接样式、默认字体样式和页面背景。在基本样式模块中不需要使用!important样式
我强烈建议给body元素设置一个背景属性。一些人可能会定义他们自己的背景而不是使用白色。如果背景颜色被换成白色，你的设计可能会看起来很糟糕。更糟的是，字体颜色的选择可能会和背景颜色冲突，导致网站无法使用。
CSS 重置
CSS重置是去除元素的默认样式，例如内边距、外边距等。它的目标是让元素在所有浏览器中都有一致的表现。
许多CSS重置框架过于”强烈“，以至于引起的问题比他们解决的问题还要多。先去除元素的内外边距再给这些属性赋值降低了开发效率，又增加了发送到客户端的代码量。
许多人发现重置样式对于网站开发有帮助，只要你清楚的认识到你是用的框架的优点和不足。
开发一套你自己在项目中常用默认样式也是有利的。
布局规则
CSS由于本身的性质是用来放置页面元素。但是主要布局规则和页面组件规则有区别。组件例如插图编号、登陆表单或者导航栏，被包含在主要布局中，例如header或者footer。我认为页面的小组件应该被放在模块规则中，而大组件被放在布局规则中。
布局样式也可以按照用途分为主要和次要样式。主要布局样式例如header和footer一般都是使用id选择器，但是在适当的地方应该使用类选择器。
一些网站可能需要更通用的布局框架，这些小一些的布局样式使用类名选择器而不是id选择器，这样在这个页面中都可以重用这些样式。
总体上说，一个布局样式只有一个id选择器或者类名。但是有时候一个布局样式需要对不同的因素有不同的样式。例如对于不同用户的喜好就可能有不同的布局。这种需求应该任然是布局规则，并且和其他布局规则联合使用。
一个更高级的布局样式举例
#article {
float: left;
}
#sidebar {
float: right;
}
.l-flipped #article {
float: right;
}
.l-flipped #sidebar {
float: left;
}
在这个布局例子中，.l-flipped类被用于更高级的元素例如body元素并且可以让文章和侧边栏的内容被包含其中，把侧边栏从右边移到左边，文章与其相反。
使用两种布局规则从浮动元素到固定布局的例子：
#article {
width: 80%;
float: left;
}
#sidebar {
width: 20%;
float: right;
}
.l-fixed #article {
width: 600px;
}
.l-fixed #sidebar {
width: 200px;
}
在这个例子中，.l-fixed类修改了元素的float属性。
在布局规则例子中还有一点需要注意，就是我使用的命名规定。使用ID选择器的声明命名准确而且没有特定的命名空间。但是类名选择器需要使用l-作为前缀。这有助于确定这些样式的目的，并将它们从模块规则或状态规则中区分出来。布局样式主要优先使用id选择器。你可以给你的ID选择器一个命名空间，但是没有必要这样做。
id选择器的使用
在某些有明确需求的情况下，在html页面中使用id属性可能是一件好事。例如id为js寻找元素提供了有效的方法。对于css，id选择器不是必要的，因为id选择器和类名选择器几乎没有差别而且会让代码更加复杂。
布局举例
理论是一回事，但是应用是另外一回事。让我们看看实际的网站并且考虑一下什么部分使用了布局规则，哪部分使用了模块规则。
在上面的举例网站图片中，和大部分的网站布局相仿。例如，有顶部栏、主要内容区域，侧边栏和底部。
在你的脑海中想像一下，这个页面的html结构是什么样的，可能是一个个div组合成的。也许你正使用html5并且有header和footer元素。不管什么情况，你都可能会给它们每个元素一个id。
我们的css结构可能是这样：
#header { hellip; }
#sidebar { hellip; }
#maincontent { hellip; }
lt;div id='header'gt;lt;/divgt;
lt;div id='sidebar'gt;lt;/divgt;
lt;div id='maincontent'gt;lt;/divgt;
这是很直观的，你肯定在想”真的嘛？你给我看这个？“让我们再看看网页的另外一部分。
看看这个部分，我们看到一个个栅格。网站内容由一个个块状元素填充而来。一个无需列表可能会很有用，我们将会用这个作为例子。
Html代码示例：
lt;divgt;
lt;h2gt;Featureslt;/h2gt;
lt;ulgt;
lt;ligt;lt;a href='hellip;'gt;hellip;lt;/agt;lt;/ligt;
lt;ligt;lt;a href='hellip;'gt;hellip;lt;/agt;lt;/ligt;
hellip;
lt;/ulgt;
lt;/divgt;
不考虑本书中所讲的，我们可能会倾向于给div元素添加id ”features“，然后开始写内容部分的样式。
一种可能的解决方法：
div#featured ul {
margin: 0;
padding: 0;
list-style-type: none;
}
div#featured li {
float: left;
height: 100px;
margin-left: 10px;
}
如果我们使用这种方法，再提出一些假设：
- 在页面上只出现栅格布局
- 列表元素是向左浮动
- 列表元素有100像素的高度
这些都是合理的假设。这是一个小例子，一些小型网站可能会采取这种结构，但是这种结构满足不了更加复杂的需求。大型网站很有可能需要重构组件并且这些样式全部需要重写。
在看看这个代码示例，肯定有些地方可以优化。Id选择器不需要具备标签选择器因为列表是div元素的子元素，而且子选择器（gt;）还没有被使用。
让我们想想怎么做能让代码变得更加灵活。
从布局的角度来看，我们关心的是一个元素是怎么和另外一个元素联系的。我们不必关心模块本身的设计，也不必担心这个布局在内部的上下文。
用有序列表或者无需列表来实现栅格模块：
.l-grid {
margin: 0;
padding: 0;
list-style-type: none;
}
.l-grid gt; li {
display: inline-block;
margin: 0 0 10px 10px;
/* IE7 hack to mimic inline-block on block
elements */
*display: inline;
*zoom: 1;
}
我们用这种方法解决了什么问题呢？（很少有方法可以100%解决问题。）
- 栅格布局现在可以应用到任何容器来创建一个浮动式布局
- 通过1我们减少了适用性的范围（在适用性一章可以了解更多）
- 我们减少了特殊选择器的使用
- 不再要求元素的高度固定。一个行的高度取决于该行中最高的元素。
另一方面，我们这么做有什么坏处呢？
- 使用子类选择器，ie6无法兼容（我们可以不实用子类选择器解决这个问题）
- CSS的代码量和复杂度增大
代码的增加是肯定的，但这是个小问题。现在我们可以重用这个模块了，我们可以再整个页面重用这个样式。复杂度的增加也是一个小问题。我们真的应该抛弃过时的浏览器，或者为它们写hack。但是选择器变得简单了，这允许我们容易的扩展布局规则。
剩余内容已隐藏，支付完成后下载完整资料
资料编号：[30393]，资料为PDF文档或Word文档，PDF文档可免费转换为Word
以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。
