How should I arrange the contents of my CSS files?

Question

This question is related to the organization of CSS directives in the .css file. When designing a new page or set of pages, I usually just add directives manually to the .css file, trying to reorganize when I can. After some time, I have hundreds (or thousands) of lines, and it may be difficult for me to find what I need when setting up the layout.

Does anyone have any tips on organizing directives?

• Should I try to arrange from top to bottom by imitating the DOM?
• Should I organize functionally by introducing directives for elements that support the same parts of the user interface together?
• Should I just sort everything alphabetically with a selector?
• Some combination of these approaches?

Also, is there a limit on how much CSS I have to store in a single file before it would be nice to split it into separate files? Say 1000 lines? Or is it always good to keep everything in one place?

Related Question: What is the best way to organize CSS rules?

Answer 1

Take a look at these three slide shows:

• Beautiful CSS supported
• CSS supported
• Effective, maintained, modular CSS

First, and most importantly, document your CSS. No matter what method you use to organize your CSS, be consistent and document it. Describe at the top of each file what is in this file, possibly providing a table of contents, possibly referring to a simple search for unique tags, so you can easily jump to these sections in your editor.

If you want to split your CSS into multiple files, be sure to do it. Oli already mentioned that additional HTTP requests can be expensive, but you can have the best of both worlds. Use any script assembly file to publish well-documented modular CSS for a compressed single CSS file. YUI Compressor can help with compression.

Unlike what others have said, I prefer to write each property on a separate line and use indentation to group related rules. For example. Oli's following example:

#content { /* css */ } #content div { /* css */ } #content span { /* css */ } #content etc { /* css */ } #header { /* css */ } #header etc { /* css */ } 

This makes it easy to keep track of the file structure, especially with enough spaces and clearly marked comments between groups (although this is not so easy to miss) and easy to edit (since you do not need to wade through one long line of CSS for each rule).

Understand and use cascade and specificity (therefore sorting your selectors alphabetically right away).

Did I separate my CSS in several files and in which files the size and complexity of the site and CSS depend. I always have reset.css . This is usually accompanied by layout.css for the general page layout, nav.css if the navigation menu on the site is a little more complicated and forms.css if I have a lot of CSS for the styles of my forms. Other than that, I still figured it out myself. I could colors.css and type.css/fonts.css separate the colors / graphics and typography, base.css , to provide a complete basic style for all HTML tags ...

Answer 2

I try to arrange my css as follows:

• reset.css
• base.css: I set the layout for the main sections of the page
  • common styles
  • Headline
  • Nav
  • Content
  • footnote
• optional- [page name] .css: classes that are used on only one page

Answer 3

However, it will be easier to read!

Seriously, you get a billion and five offers, but you will only have a few methods.

Some things I will say though:

• Interrupting a CSS file in pieces helps you organize it in your head, but that means more requests from browsers, which ultimately leads to a slower server start (more requests), and the browser takes longer to display the pages. Remember this.
• Breaking a file just because this arbitrary number of lines is stupid (except that you have a horrible editor, in which case you will get a new one)

Personally, I code my CSS as follows:

 * { /* css */ } body { /* css */ } #wrapper { /* css */ } #innerwrapper { /* css */ } #content { /* css */ } #content div { /* css */ } #content span { /* css */ } #content etc { /* css */ } #header { /* css */ } #header etc { /* css */ } #footer { /* css */ } #footer etc { /* css */ } .class1 { /* css */ } .class2 { /* css */ } .class3 { /* css */ } .classn { /* css */ } 

Saving rules on one line allows me to quickly save a file and see what rules there are. When they expand, I find it too much, like hard work, trying to figure out what rules apply.

Answer 4

I tried a bunch of different strategies and I always come back to this style:

 .class {border: 1px solid #000; padding: 0; margin: 0;} 

This is the friendliest when it comes to a lot of ads.

Mr. Snook wrote about this almost four years ago :) .

Answer 5

There are several recognized methodologies for formatting your CSS. Ultimately, it’s up to you that you feel most comfortable, but it helps you manage CSS for more complex projects. Not that it matters, but I tend to use a combination of BEM and SMACSS.

BEM (Block, Element, Modifier)

BEM is a very useful, powerful, and simple naming convention that simplifies the reading and understanding of your front-end code, simplifies its operation, simplifies scaling, improves reliability and clarity, and is much more strict.

Block

An autonomous entity that makes sense on its own, for example:

 header, container, menu, checkbox, input 

Element

Parts of the block and do not have a separate meaning. They are semantically attached to their block:

 menu item, list item, checkbox caption, header title 

Modifier

Flags on blocks or elements. Use them to change the appearance or behavior:

 disabled, highlighted, checked, fixed, size big, color yellow 

---

Oocss

OOCSS's goal is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add and maintain.

OOCSS is based on two main principles:

• Separation of the structure from the skin

This means defining repeating visual functions (for example, background and border styles) as separate “skins” that you can mix and match with different objects to achieve a large amount of visual diversity without a lot of code. See Object of the module and its shell.

2. Separation of containers and contents

Essentially, this means "rarely use location-specific styles." The object should look the same no matter where you put it. So instead of a style specific to .myObject h2 {...}, create and apply a class that describes this question, for example. This gives you confidence that: (1) all unclassified s will look the same; (2) all elements with a category class (called mixin) will look the same; and 3) you do not need to create an override style for the case when you really want .myObject h2 to look like normal.

---

SMACSS

SMACSS is a way to learn your design process and as a way to adapt this rigid framework to a flexible thinking process. This is an attempt to document a consistent approach to website development using CSS.

There is categorization in the core of SMACSS. By classifying CSS rules, we begin to see patterns and can identify best practices around each of these patterns.

There are five types of categories:

 /* Base */ /* Layout */ /* Modules */ /* State */ /* Theme */ 

Base Contains reset and default styles. It can also have basic styles for controls such as buttons, grids, etc., which can be overwritten later in the document under certain circumstances.

Markup Will contain all the navigation, breadcrumbs, Sitemaps, etc. Etc.

Modules Contain area-specific styles such as contact form styles, homepage tiles, product listings, etc. Etc. Etc.

State Contains state classes such as isSelected, isActive, hasError, wasSuccessful, etc. Etc.

Theme Contains any styles related to the theme.

---

There are too many details, but look at the others:

• Suitss
• AtomicCSS (not Atomic Design)
• oCSS (Organic CSS)

Answer 6

Change the general styles. Not styles that just happen to be the same, styles that should be the same — where changing the style for one selector will most likely mean that you want to change the other as well. I gave an example of this style in another post: Create a variable in the CSS file for use in this CSS file .

In addition, the combined rules are related to each other. And split your rules into several files ... if every page does not need every rule.

Answer 7

I go with this order:

• General style rules commonly applied to bare elements (a, ul, ol, etc.), but they can also be general classes (.button, .error)
• Page layout rules that apply to most / all pages
• Individual page layout rules

For any of the style rules that apply to a single page, or to small grouping pages, I set the body to id and class, which makes it easy to orient specific pages. The identifier is the base name of the file, and the class is the name of the directory in which it is located.

Answer 8

Since actual sequencing is an important part of how your CSS is applied, it seems a bit silly to go ahead with an “alphabetical” sentence.

In general, you want to group elements together according to the area of ​​the page that they affect. For example. basic styles that affect everything, first, then header and footer styles, navigation styles, then main content styles, and then secondary content styles.

I would not break into several files at the moment, as it can be more difficult to maintain. (It’s very difficult to maintain cascading order in your head when you open six CSS files). However, I would definitely start moving styles to different files if they only apply to a subset of pages, for example. Form styles only bind to the page when the page contains the form.

Answer 9

CSS files are cached on the client. Therefore, it’s good to stick to all your styles in one file. But in development, I find it useful to structure my CSS according to domains.

For example: reset.css , design.css , text.css , etc. When I release the final product, I will mix all the styles into one file.

Another useful tip is to focus readability on rules, not styles.

While:

 ul li { margin-left: 10px; padding: 0; } 

It looks good, it’s not easy for you to find the rules when you have, say, 100 lines of code.

Instead, I use this format:

 rule { property: value; property: value; } rule { property: value; property: value; } 

Answer 10

That's what I'm doing. I have a CSS index page with no directives on it and which calls different files. Here is a quick example:

 @import url("stylesheet-name/complete-reset.css"); @import url("stylesheet-name/colors.css"); @import url("stylesheet-name/structure.css"); @import url("stylesheet-name/html-tags.css"); @import url("stylesheet-name/menu-items.css"); @import url("stylesheet-name/portfolio.css"); @import url("stylesheet-name/error-messages.css"); 

It starts with a full reset. The following file defines a color palette for ease of use. Then I create a main <div/> that defines the layout, title, footer, number of columns where they fit, etc. Tags html definses <body/> , <h1/> , <p/> , t, etc. .... Next are the specific sections of the site.

It is very scalable and very understandable. It is much more convenient to find the code for the change and the new dd sections.

Answer 11

I was constantly worried about this, but Firebug came to the rescue.

These days, it's much easier to see how your styles are interconnected through Firebug and figure out what needs to be done.

Of course, be sure to make sure that there is a reasonable structure that combines related styles together, but does not go overboard. Firebug makes it much easier to track that you don’t have to worry about creating the perfect css structure.

Answer 12

ITCSS

Harry Roberts (CSS Wizardry)

Defines a global namespace and cascade and helps maintain selector specificity.

Structure

The first two apply only if you use a preprocessor.

• (Settings)
• (Instruments)
• General concepts
• Items
• The objects
• Components
• Trump cards

Answer 13

I usually do this:

• <link rel="stylesheet" href="css/style.css">

• In style.css, I @import the following:

   @import url(colors.css); @import url(grid.css); @import url(custom.css); + some more files (if needed) 

• In colors.css I @import following (when using custom CSS properties):

   @import url(root/variable.css); 

Everything is in order and it is easy to get any part of the code for editing. I will be glad if this helps somehow.