CSS Architecture: CSS File Organization - SitePoint

Excerpted from an excerpt from the book "The Master of CSS" written by Tiffany Brown. This book is available in bookstores around the world, and you can also purchase the e-book version here.

CSS File Organization

Part of a good CSS architecture is in file organization. For single developers or very small projects, single files are sufficient. For large projects – websites with multiple layouts and content types, or multiple brands share the same design framework – it is wiser to use a modular approach and split CSS into multiple files.

Splitting CSS into multiple files makes it easier to assign tasks to teams. One developer can be responsible for styles related to typography, while another developer can focus on developing mesh components. The team can allocate work reasonably and improve overall productivity.

So, what might be a good file structure for splitting CSS into multiple files? Here is a structure similar to what I used in recent projects:

• reset.css: Reset and normalize styles; minimum statements related to colors, borders or fonts
• typography.css: Font, font weight, line height, size, and style of title and text
• layouts.css: Manage page layout and paragraph styles, including grids
• forms.css: Styles of form controls and labels
• lists.css: List specific style
• tables.css: Table-specific style
• carousel.css: Styles required for carousel components
• accordion.css: Style of accordion component

If you use a preprocessor, such as Sass or Less, you may also need to include a _config.scss or _config.less file with color variables, etc.

In this structure, each CSS file has a specific and narrow scope. The number of files to be used depends on how many visual patterns or components the website design needs.

CSS frameworks such as Foundation and Bootstrap use this approach. Both are very meticulous, using separate files for progress bars, range inputs, close buttons, and tooltips. This allows developers to include only the components required by the project.

Note: Mode Library

The concept closely related to splitting CSS into multiple files in this way is the schema library. Anna Debenham's "Beginner of Pattern Library" is a great introduction to the topic.

Number of files

Even if we use multiple CSS files in development, we will not provide all files to the browser in this form. The number of HTTP requests required will slow down our website loading. Instead, we will connect the smaller CSS file into several larger files for use in production environments.

In this context, connection means combining multiple files into a single CSS load. It eliminates the need for a @import statement or multiple link elements. The current browser has a limit on the number of files that can be downloaded at one time. We can use connections to reduce the number of network requests, thus delivering content to users faster.

Usually, your web development framework handles connections as part of its asset management capabilities, such as Ruby on Rails. Some content management systems do the same, whether as core functionality or add-ons. The preprocessor described in Chapter 9 also makes connection easy. If neither the preprocessor nor the development framework is part of your workflow, then your operating system will most likely have a connection utility that you can use.

For Mac OS X or Linux, use the cat utility to connect to the file:

<code class="language-bash">cat file1.css file2.css > combined-output-file.css</code>

Using Windows? Try using the type utility:

<code class="language-batch">type file1.css file2.css > combined-output-file.css</code>

You can also write your own connection scripts in Bash, PHP, Python, or other scripting language of your choice.

Note: CSS Optimization

Connection is an aspect of CSS optimization. It is also important to minimize your file to remove unnecessary characters and spaces. Chapter 3 introduces the minimization tool.

So how many files should you use? This is the tricky place. The best practice right now is to identify your critical path CSS – the minimum amount of CSS required for page rendering – and embed it into your page using the style element. Other CSS files should be loaded using JavaScript. Addy Osmani's presentation "CSS Performance Tools" provides an excellent overview of this technology and some of the tools you can use to implement it. See also loadCSS for Filament Group.

If your content will be served using SPDY or HTTP/2 protocols, the connection may be unnecessary. Using HTTP/1.1, the browser downloads assets in sequence; the next request starts at the end of the previous request. In this model, reducing the number of network requests can improve website performance; however, SPDY and HTTP/2 can download multiple assets simultaneously. Therefore, reducing the number of requests does not have a practical benefit. However, there is a cost to send more bytes than is required to render a page. William Chan's "HTTP/2 Notes and Tradeoffs" explains this in more detail. The best way is to determine if your server is providing HTTP/2 services, and if so, check if more users will benefit from actually splitting your assets and loading only the assets required for the page, or keep using the old method. If you are interested in learning more about performance optimization methods, SitePoint's book Lean Site is a useful resource.

Frequently Asked Questions about CSS File Organization

How to best organize my CSS files?

The best way to organize CSS files depends heavily on the size and complexity of the project. For smaller projects, a single CSS file may be sufficient. However, for larger projects, it is recommended to split CSS into multiple files. This can be done based on the components or pages that style them. For example, you can create a CSS file for the header, footer, and main content separately. This makes your code easier to maintain and debug.

How to keep my CSS code simple and orderly?

Keeping CSS code simple and orderly is essential for maintainability. You can do this by following some best practices. First, use comments to describe the role of each part of CSS. Secondly, combine the relevant styles together. Third, use a consistent naming convention for your class and ID. Finally, consider using a CSS preprocessor like Sass or Less to help manage your stylesheets.

What are CSS preprocessors and how do they help organize CSS files?

CSS preprocessors like Sass and Less are scripting languages ​​that extend CSS functionality. They allow you to use variables, nested rules, mixins, and functions, which can greatly simplify your CSS and make it easier to maintain. The preprocessor compiles your code into standard CSS that the browser can understand.

How to use the CSS module to organize my CSS?

CSS module is a way to make your CSS more modular and reusable. With the CSS module, each component in your application has its own CSS file. This makes managing your style easier, because changing the CSS of one component does not affect others. To use CSS modules, you need a build tool like Webpack or Parcel.

What is the role of comments in CSS file organization?

Annotations play a crucial role in the organization of CSS files. They can help you and other developers understand the role of each part of CSS. This is especially important in large projects, as you may have multiple CSS files. Comments can also be used to temporarily disable certain parts of CSS during debugging.

How to use the CSS framework to organize my CSS?

CSS frameworks like Bootstrap and Foundation provide write-pre-CSS that you can use to style your website. They also provide a unified structure for your CSS to make it easier to maintain. However, remember that using CSS frameworks may add unnecessary bloating to the website if you are not using most features.

What is the importance of a consistent naming convention in CSS?

The consistent naming convention in CSS makes your code easier to read and understand. They also make it easier to find specific styles when you need to update or debug your code. You can follow several naming conventions such as BEM (block, element, modifier), OOCSS (object-oriented CSS), and SMACSS (scalable and modular CSS architecture).

How to use CSS variables to organize my CSS?

CSS variables (also known as custom properties) allow you to store specific values ​​for reuse throughout CSS. This can greatly simplify your CSS and make it easier to maintain. For example, you can store the main color of your website as a variable and use it when you need that color.

What is the role of CSS reset in CSS file organization?

CSS reset is a set of styles applied at the beginning of CSS and is used to reset the default styles of the browser application. This ensures that your website looks consistent across different browsers. CSS reset also makes your CSS easier to manage because you don't have to rewrite browser styles for each element.

How to use the CSS lint tool to keep CSS organized?

CSS lint tools like Stylelint and CSSLint can help you keep CSS organized by catching errors and enforcing consistent coding styles. They can be integrated into your development workflow to automatically check your CSS as you write it. This can help you write a cleaner, easier to maintain CSS.

The above is the detailed content of CSS Architecture: CSS File Organization - SitePoint. For more information, please follow other related articles on the PHP Chinese website!