import 无web选项_使用@import划分并征服Web开发-CSDN博客

import 无web选项

As a site’s CSS grows in size and complexity with more vendor prefixes, transitions and media queries, it becomes harder to track and maintain all the declarations that make up the code. At a certain point, it makes sense to divide a site’s CSS up into structured components, rather than scrolling up and down a single long stylesheet to find and make changes.

随着站点的CSS规模和复杂性的增加，以及更多的供应商前缀，过渡和媒体查询，跟踪和维护组成代码的所有声明变得越来越困难。在某个时候，将站点CSS分成结构化的组件是有意义的，而不是上下滚动单个长样式表来查找和进行更改。

划分大型样式表以进行开发 (Dividing Large Stylesheets For Development)

There are a few ways of dividing your CSS. The obvious method is to create declarations for various components and then link them as separate stylesheets. Typically, these components would include a reset stylesheet, a base CSS file that sizes page elements, typography, a set of media queries, and a print stylesheet:

有几种划分CSS的方法。一种明显的方法是为各种组件创建声明，然后将它们链接为单独的样式表。通常，这些组件将包括一个重置样式表，一个用于调整页面元素大小的基本CSS文件，版式，一组媒体查询以及一个打印样式表：

<head>
	<title>Page Title</title>
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="base.css">
	<link rel="stylesheet" href="typography.css">
	<link rel="stylesheet" href="tablet.css" media="screen and (max-width:720px)">
	<link rel="stylesheet" href="print.css" media="print">
</head>

The downside of this approach is that it adds quite a bit of code to the <head> of each page and forces new components to be added to each page separately. Alternatively, you can use @import rules in the code of a single .css file. The only requirement is that the @import code must be at the very start of the CSS page. In this case, I will add the following to the top of the base.css code:

这种方法的缺点是，它向每个页面的<head>添加了很多代码，并迫使新组件分别添加到每个页面。或者，您可以在单个 .css文件的代码中使用@import规则。唯一的要求是@import代码必须位于CSS页面的最开始。在这种情况下，我将以下内容添加到base.css代码的顶部：

@import url(reset.css)
@import url(typography.css)
@import url(tablet.css) screen and (max-width:720px)
@import url(print.css) print
body { color: #ccc; … }

This means that we need to link only the base.css file from each HTML page:

这意味着我们只需要链接每个HTML页面中的base.css文件：

<head>
	<title>Page Title</title>
	<link rel="stylesheet" href="base.css">
</head>

The other stylesheets will be imported from base.css, much like server-side includes in PHP.

其他样式表将从base.css导入，就像PHP中的服务器端包含项一样。

This technique works in all modern browsers, although it should be noted that historically IE 7 and earlier have struggled with the method. Modern CSS pre-processors such as Sass use a similar method to divide stylesheet code into logical structures that can be dealt with separately.

尽管应注意，从历史上讲IE 7和更早版本一直在使用该方法，但该技术在所有现代浏览器中均有效。 Sass等现代CSS预处理器使用类似的方法将样式表代码划分为可以单独处理的逻辑结构。

不用于生产 (Not For Production)

It’s important to understand that this technique is designed to optimize workflow during development of larger sites: it is not intended for production. On a live public site, the ideal solution is the opposite: to deliver as few CSS files as possible. I’ll discuss how to achieve that in the context of migrating development CSS to production code in an upcoming article.

重要的是要了解，该技术旨在在大型站点开发期间优化工作流：它不适用于生产。在实时的公共站点上，理想的解决方案是相反的：传递尽可能少的 CSS文件。在下一篇文章中，我将讨论如何在将开发CSS迁移到生产代码的背景下实现这一目标。