css 结构体系_CSS体系结构：CSS文件组织

左手的ㄟ右手 2022-12-03 01:48 164阅读 0赞

css 结构体系

*The following is an extract from our book, [CSS Master][], written by Tiffany Brown. Copies are sold in stores worldwide, or you can buy it in ebook form [here][CSS Master].*

*以下是蒂芙尼·布朗(Tiffany Brown)所著《 [CSS Master》][CSS Master]一书的摘录。* *副本在世界各地的商店中都有出售，您也可以在[这里][CSS Master]以电子书的形式购买。*

### CSS文件组织 **(**CSS File Organization**)** ###

Part of a good CSS architecture is file organization. A monolithic file is fine for solo developers or very small projects. For large projects—sites with multiple layouts and content types, or multiple brands under the same design umbrella—it’s smarter to use a modular approach and split your CSS across multiple files.

良好CSS体系结构的一部分是文件组织。 整体文件适合单独的开发人员或非常小的项目。 对于大型项目-具有多种布局和内容类型的站点，或在同一设计框架下具有多个品牌-使用模块化方法并将CSS拆分为多个文件更为明智。

Splitting your CSS across files makes it easier to parcel tasks out to teams. One developer can work on typography-related styles, while another can focus on developing grid components. Teams can split work sensibly and increase overall productivity.

跨文件拆分CSS可以更轻松地将任务打包给团队。 一个开发人员可以处理与排版有关的样式，而另一个开发人员可以专注于开发网格组件。 团队可以合理地分工并提高整体生产率。

So what might a good file structure that splits the CSS across files look like? Here’s a structure similar to ones I’ve used in recent projects:

那么，将CSS分为多个文件的良好文件结构是什么样的呢？ 这是与我最近的项目中使用的结构类似的结构：

*  reset.css: reset and normalization styles; minimal color, border, or font-related declarations
    
    reset.css：重置和规范化样式； 最少的颜色，边框或字体相关的声明
 *  typography.css: font faces, weights, line heights, sizes, and styles for headings and body text
    
    typography.css：标题和正文文本的字体，粗细，行高，大小和样式
 *  layouts.css: styles that manage page layouts and segments, including grids
    
    layouts.css：管理页面布局和分段(包括网格)的样式
 *  forms.css: styles for form controls and labels
    
    forms.css：表单控件和标签的样式
 *  lists.css: list-specific styles
    
    list.css：特定于列表的样式
 *  tables.css: table-specific styles
    
    table.css：表格专用样式
 *  carousel.css: styles required for carousel components
    
    carousel.css：轮播组件所需的样式
 *  accordion.css: styles for accordion components
    
    手风琴.css：手风琴组件的样式

If you’re using a preprocessor, such as Sass or Less, you may also want to include a \_config.scss or \_config.less file that contains color variables and the like.

如果您使用的是预处理程序(例如Sass或Less)，则可能还需要包括一个包含颜色变量等的\_config.scss或\_config.less文件。

In this structure, each CSS file has a specific and narrow scope. How many files you’ll ultimately end up with depends on how many visual patterns or components are called for by your site’s design.

在这种结构中，每个CSS文件都有一个特定的狭窄范围。 您最终将拥有多少文件，取决于您网站的设计需要多少视觉图案或组件。

CSS frameworks such as [Foundation][] and [Bootstrap][] use this approach. Both become quite granular with separate files for progress bars, range inputs, close buttons, and tooltips. This allows developers to include only the components that they need for a project.

CSS框架(例如[Foundation][]和[Bootstrap)][Bootstrap]使用这种方法。 通过进度条，范围输入，关闭按钮和工具提示的单独文件，两者都变得非常精细。 这允许开发人员仅包括他们需要用于项目的组件。

#### 注意：模式库 **(**Note: Pattern Libraries**)** ####

A closely related concept to splitting CSS across files like this is the **pattern library**. A great primer on the subject is Anna Debenham’s [“Getting Started with Pattern Libraries.”][Getting Started with Pattern Libraries.]

**模式库**是与这样的跨文件拆分CSS紧密相关的概念。 安娜·德本纳姆(Anna Debenham)的[“模式库入门”][Getting Started with Pattern Libraries.]是一本很好的[入门书。][Getting Started with Pattern Libraries.]

### 多少个文件？ **(**How many files?**)** ###

Even though we’re using several CSS files for development, we’re not going to serve all of them to the browser in this form. The number of HTTP requests that we’d require would make our site take lonegr to load. Instead, we’ll *concatenate* our smaller CSS files into a few larger ones for production.

即使我们使用多个CSS文件进行开发，我们也不会以这种形式将所有文件提供给浏览器。 我们需要的HTTP请求数将使我们的站点需要lonegr来加载。 取而代之的是，我们将较小CSS文件*连接*到几个较大CSS文件中以进行生产。

**Concatenation** in this context, means combining multiple files into a single CSS payload. It eliminates the need for `@import` statements or multiple `link` elements. Current browsers have limits on how many files they can download at once. We can use concatenation to reduce the number of network requests, getting your content to users in less time.

在这种情况下， **串联**意味着将多个文件组合到单个CSS有效负载中。 它消除了`@import`语句或多个`link`元素的需要。 当前的浏览器对一次可以下载多少文件有限制。 我们可以使用串联减少网络请求的数量，从而在更少的时间内将您的内容提供给用户。

Often your web development framework will handle concatenation as part of its asset management features, such as Ruby on Rails. Some content management systems do the same, whether as a core feature or an add-on. Preprocessors—introduced in Chapter 9 also make concatenation easy. If neither preprocessors nor development frameworks are part of your workflow, chances are that your operating system has a concatenation utility that you can use instead.

通常，您的Web开发框架会将处理串联作为其资产管理功能的一部分，例如Ruby on Rails。 某些内容管理系统会执行相同的操作，无论是作为核心功能还是附加功能。 第9章介绍的预处理器也使串联变得容易。 如果预处理器和开发框架都不在您的工作流中，则您的操作系统很可能会使用串联工具。

For Mac OS X or Linux, concatenate files using the `cat` utility:

对于Mac OS X或Linux，使用`cat`实用程序连接文件：

cat file1.css file2.css > combined-output-file.css

Using Windows? Try the `type` utility:

使用Windows？ 尝试使用`type`实用程序：

type file1.css file2.css > combined-output-file.css

You can also write your own concatenation script using Bash, PHP, Python, or another scripting language of your choice.

您还可以使用Bash，PHP，Python或您选择的其他脚本语言编写自己的串联脚本。

#### 注意：CSS优化 **(**Note: CSS Optimization**)** ####

Concatenation is one aspect of CSS optimization. It’s just as important to minify your files to remove excess characters and whitespace. Minification tools are covered in Chapter 3.

串联是CSS优化的一个方面。 缩小文件以删除多余的字符和空格也同样重要。 缩小工具在第3章中介绍。

So how many files should you use? That’s where it gets tricky. The current best practice is to identify your **critical path** CSS—the minimum amount of CSS your page needs to render—and embed it in your pages using the `style` element. Additional CSS files should be loaded using JavaScript. Addy Osmani’s presentation [“CSS Performance Tooling”][CSS Performance Tooling] provides an excellent overview of this technique and some tools you can use to implement it. Also see the Filament Group’s [loadCSS.][]

那么您应该使用多少个文件？ 那就是棘手的地方。 当前的最佳做法是识别**关键路径** CSS(即页面需要呈现的最少CSS数量)，然后使用`style`元素将其嵌入到页面中。 其他CSS文件应使用JavaScript加载。 Addy Osmani的演讲[“ CSS Performance Tooling”][CSS Performance Tooling]很好地概述了此技术以及可用于实现该技术的一些工具。 另请参见细丝组的[loadCSS。][loadCSS.]

If your content will be served using the SPDY or HTTP/2 protocols, concatenation may be unnecessary. With HTTP/1.1, browsers download assets sequentially; the next request begins when the previous one ends. Under that model, reducing the number of network requests improves site performance; however, SPDY and HTTP/2, can download multiple assets at once. As a result, there is no real benefit to reducing the number of requests. There is, however, a cost to sending more bytes than necessary to render the page. William Chan’s [“HTTP/2 Considerations and Tradeoffs”][HTTP_2 Considerations and Tradeoffs] explains this in greater detail. The best approach would be to identify if your server is serving HTTP/2 and, if so, check whether more of you users will benefit from actually splitting your assets down and only loading that which the page needs, or continuing to work in the old way. If you’re interested in learning more about performance optimization methods, the SitePoint book [*Lean Websites*][Lean Websites] is a useful resource.

如果将使用SPDY或HTTP / 2协议提供您的内容，则可能不需要串联。 使用HTTP / 1.1，浏览器可以按顺序下载资产。 下一个请求在上一个请求结束时开始。 在这种模式下，减少网络请求数量可以提高站点性能。 但是，SPDY和HTTP / 2可以一次下载多个资产。 结果，减少请求数量没有真正的好处。 但是，发送比渲染页面所需的更多字节的开销很大。 William Chan的[“ HTTP / 2注意事项和折衷”][HTTP_2 Considerations and Tradeoffs]对此进行了更详细的说明。 最好的方法是确定您的服务器是否正在提供HTTP / 2，如果是，请检查是否有更多的用户将从实际拆分资产，仅加载页面所需的资产或继续使用旧资产中受益。方式。 如果您想了解有关性能优化方法的更多信息，请参阅SitePoint [*精益网站*][Lean Websites]一书。

> 翻译自: [https://www.sitepoint.com/css-architecture-css-file-organization/][https_www.sitepoint.com_css-architecture-css-file-organization]

css 结构体系

[CSS Master]: https://www.sitepoint.com/premium/books/css-master
[Foundation]: http://foundation.zurb.com
[Bootstrap]: http://getbootstrap.com/
[Getting Started with Pattern Libraries.]: http://alistapart.com/blog/post/getting-started-with-pattern-libraries/
[CSS Performance Tooling]: https://www.youtube.com/watch?v=FEs2jgZBaQA
[loadCSS.]: https://github.com/filamentgroup/loadCSS
[HTTP_2 Considerations and Tradeoffs]: https://insouciant.org/tech/http-slash-2-considerations-and-tradeoffs/
[Lean Websites]: https://www.sitepoint.com/premium/books/lean-websites
[https_www.sitepoint.com_css-architecture-css-file-organization]: https://www.sitepoint.com/css-architecture-css-file-organization/