What is the best way to organize CSS rules?

Question

What strategies will help you track a large number of CSS rules? How do you organize your files, blocks of code and your rules?

Answer 1

for a large css rules file, I would organize it this way

• provide any CSS reset rules first
• provide general / general rules (for example, p {color: # 553423;} next
• divide the remaining document into sections of the page
• puts each rule on a single line with general rules, followed by more specific rules.
• alphabetical selectors inside each rule

Example:

/***** /* ~masthead /***** #masthead {background-color: #cc00ff; color: #fff; width: 950px; } #masthead h1 { background: transparent url(logo.png) no-repeat; text-indent: -9000px; width: 200px; } /***** /* ~content /***** #content { background-color: #fedefd; margin:0; width: 357px; } #content h1 { font-size: 120%; font-weight: bold; margin: 50px 20px 50px 70px; } #content p em { color: magenta; } 

That way you can

• easy to find a section (search ~ masthead and you are at the top of the section)
• it’s easy to scan all the rules for a section at once to determine if something is closed or not.
• easy to configure rules even in long lines. Alphabet selectors ensure that the "color" does not appear twice in the same rule.

Answer 2

My 4 tips:

Sort your css for indent children except the rest:

 #main_side { width: 392px; padding: 0; float: right; } #main_side #featured_articles { background: #fff; } #main_side #frontpageads { background: #fff; margin: 8px 0; } 

Use abbreviations:

 margin:5px 0 4px 10px; 

Divide the stylesheet into specific sections:

Global styles - (body, paragraphs, lists, etc.), heading, page structure, headings, text styles, navigation, forms, comments, additional functions

Optional: use a compressor to compress your code into a smaller file size.

Answer 3

The most efficient use of CSS involves significant reuse of classes. Although it is sometimes easy to group your classes and identifier based on where they appear on the page, this method quickly breaks down when you start to reuse classes that end up in several areas accordingly.

In addition, you should not name css classes after they appear, such as h1.blue or tr.55. Naming CSS classes in this way completely strikes the purpose of using CSS. Keep in mind that someday you will want to change everything that is blue, red. If you name your classes .blue and .red, you need to touch the markup to complete your task. However, if you name your classes .moduleHeader or similar, you can change the colors of these Headers in the css file without touching the markup.

Well-built css files with significant reuse of classes are best organized alphabetically by class. This method will always be organized and will make sense to everyone who works on your project.

I prefer to organize my classes alphabetically in one large fragment, and then add another fragment for my identifier in alphabetical order.

Depending on the size of the site, it might be a good idea to add structural elements to one file and stylistic elements (colors, font options, etc.) in another css file. This allows you to have a completely useful site with ONLY structural elements, and also allows you to "redesign" the site only by touching or replacing the "stylistic" css list.

In practice, I prefer to have one larger css sheet with “beautiful” things and structure, because it becomes annoying to exchange them between the two in a production environment. However, depending on the structure of your team, it may work better for you in a different scheme.

In a single class or identifier declaration, I also arrange my attributes alphabetically. I tried other organizational structures, but the only one that seems to work for other people, without training, in alphabetical order.

Answer 4

As a rule, I try to make rules from general to specific. For example, the beginning of a document may have rules for body, div, h1 ect. After that I will move on to the special class rules. After that, at the end, the rules are executed by id.

I also saw people group rules using them. For example, if your page has a table; You can group all your rules for styling tables, cells, data together. Perhaps add some comments to the css file to explain that each section is designed to facilitate the search later.

Answer 5

I found that id or class based selectors are less fragile to change and more convenient to maintain than those I based on position. Then we separate our rules on the site (global) and application rules. In each file, we organize things alphabetically and from smallest to most specific (for each CSS specification). We do not minimize or otherwise reduce the readability of our rules and comment on them as if it were code. When I reorganize the HTML page, the first thing I do is stylize a strip of content and move it to css files. I know this is probably obvious.

/ Allan

Answer 6

My main approach is to look at it from a programmatic and stylistic point of view.

• Avoid repetition
• Commentary of large blocks of code
• If possible, use shorthand css properties.
• Class labels are reasonable; avoid things like class_001 / tom_cruise that don't make sense.

Order your CSS files as follows:

• item declarations
• following global classes
• container layouts and sections.

Useful link: http://www.456bereastreet.com/archive/200610/useful_tips_for_writing_efficient_css/

Answer 7

Use CleverCSS , a small markup language that removes the pain of writing and organizing CSS.

Answer 8

I came across this organizer via @smashmag on twitter, it works better than I imagined - styleneat.com

I run my CSS through it when I am finished and ready for delivery, or when my stylesheet gets too dirty to process.

Answer 9

Besides all the tips others have mentioned, I tend to split my CSS into multiple files . One file for the main navigation, one for the footer, one for the main typography, one for forms, one for each individual “object” on the page.

Then I create one common stylesheet in which @import all these files. When I'm ready to deploy in a production environment, the tiny Ruby script expands these @import into a single file, thereby reducing the number of HTTP requests required.

In my experience, this works much better than storing everything in a single file during development.

Also, I try to comment on my CSS rules as much as possible. I use multi-line comments for a general description of the rule and single-line comments for explaining individual lines:

 #some_object { /* * What, where, why, how... */ font-size: 1.2em; /* 12px */ } 

Finally, I use CSSEdit groups and indentation to combine related rules:

 /* @group My section title */ #some_rule { ... } /* @end */ 

Answer 10

If you split your CSS into separate files, and you have a lot of them, keep in mind that Internet Explorer has a limit of 31 CSS files. It will not load any styles beyond this limit.

In addition, of course, if you have many files, you create additional work for your web server and increase the number of connections, which will slow down the loading of your page (again, especially in Explorer), so it’s better to combine your CSS into a single monolithic file when you deploy your site, even if you have them separate during development.

Answer 11

Separate layout rules by color and stylistic rules.

Answer 12

I finally put a pen on the paper to say, to write down the method that I follow and the reasoning behind it.

http://milanadamovsky.blogspot.com/2010/04/advanced-css-style-order.html

Milan Adamovsky

Answer 13

I store all styles directly in tags at the very top of my stylesheet. The following are any common CSS classes.

After that, the main structure, usually global. it’s usually easier for me to choose, for example, to retreat:

 #container { width: 600px; ... } #container #header { .... } #container #header h1 { font-size: massive; } #container .column [ .. } #container #left-column {.. } #container #left-column #content { ... } 

This has the advantage of providing a kind of indentation, and you can very easily see the page structure from CSS. Sometimes you will have to rename your style rule, this is the structure of the page changes, but it does not really matter. This style works best when all your rules are on the same line.

I change things a bit when it comes to some of the contents of my stylesheet, and just go down from my contents div.

 #content h2 { ... } #content h3 { ... } #content ol, #content ul, #content dl { ... } 

Finally, I end up with style rules for specific pages. I found that it makes sense to give the boy an identifier based on the file name or URI, and the body is the class of the current file directory. This makes it easy to orient style rules in the main CSS to a specific page or group of pages, if necessary. (Obviously, you should weigh this against including a new stylesheet.)

Inside style rule declarations, I keep all my rules well-ordered based on display attributes, position, size, margin, border, indentation, background, color, text attributes, line attributes, word attributes, font attributes. Conceptually going from the outside to the inside (you can argue that the font refers to the attributes of the text. As long as you are compatible, that’s all that matters).

I use the abbreviation for fields (ex margin and border), because I have to remember them (top, right, bottom, left) by TRouBLe. I avoid using abbreviations for background and fonts because they are a little more difficult to remember.

For example:

 .rule { display: block; visibility; visible; position: relative; float: left; z-index: 1; top: 3px; left: 10em; width: 100px; height 30px; overflow: hidden; margin: 1px 3px 5px 1px; border:3px dotted #ff0; padding: 5px; background-color: #f0f; background-image: url(/foo/bar); color: #000; text-align: left; text-decoration: none; line-height: 3px; word-spacing: 2px; letter-spacing: 1px; font-family: sans-serif; font-weight: bold; } 

Answer 14

I use several methods:

• Group # ID / Class
• Comment on the main blocks using the underscore for easy searching (/ * _IDName / *)
• Using CSS shortcuts helps reduce file size, which simplifies management.

There are some good articles on the web that I have used. I will try to find them again.

Answer 15

For really large sections, it’s also nice to break the sheet into smaller logical pieces, each of which gets its own tag and link tag. Thus, when you need to configure a small part of the navbar styles to support the new button, most of the remaining styles are sheets that have no changes and therefore are cached on your users computers.

Answer 16

I usually break the main css file into sections based on where the rules appear on the page - so there will be a section for the title of the web page, another for the navigation bars, etc.

I also split a separate file for printing. A.

Like program files, I use comment blocks to indicate which rules are in the next section.

I do not believe that there are significant performance benefits when there are several small files compared to one large file.

Answer 17

I like to store css in the Content folder, which contains static content for the site. Then I usually try to have one css file for the "business context". Therefore, if I have a section of the website where users are registered for trade shows, the URL could be "[host] / shows /" and my css file would be "[host] /content/styles/shows.css". If the situation gets complicated and the “readings” become too large, I can create a folder “content / shared /” and “content / shows /” to match the subdomains of “show”. Renaming problems become trivial with Resharper or "Find and Replace".

Answer 18

It is divided into sections and subsections with a table of contents at the top. Alphabetical.

Answer 19

• I make a default file for some default rules (applies to most subpages)
• Each subpage has its own .css stylesheet (if necessary)
• I use short lines (background: #FFF url (../images/header_1.jpg) 0 0 repeat-x;)
• Ony classes, if I have several elements with a given class (if one element - use id)
• Avoid repetition if you can inherit - do it

Answer 20

I agree with most of what has been posted here. I also found that the separation of design and style ends in more pain than help, although it sounds good in theory. I really like to split my css into several files. Usually I have basic css for the basic design elements of my site, and then a few small files, often in a hierarchy, because I need more specialized design elements. One of the problems is that it can be difficult to figure out which css file contains a style element that interests me, but I organize my projects with Aptana, which has search tools. In addition, Firebug helps with this.

I also found that I prefer to keep my own css rules more or less independently, rather than splitting them into smaller rules, and then combining them in a class definition. It’s easier for me to maintain if all the codes for the div, for example, are in one or two rules, and not in many that I might have to look for. This may mean that there is some repetition of the code and a large css file, but the difference does not seem so big, and I prefer maintainability.

Answer 21

Try ProCSSor or Styleneat , both excellent.

Answer 22

I especially appreciate the advice provided in this article .