How to organize CSS in your project?

Question

One of the hardest things I've experienced while working on a (complex) web application is CSS organization. Here are the different approaches we tried to use for several projects.

1: Create a different stylesheet for each web page / module.

Obviously, we were very new to web applications, and this approach led to too many stylesheets and too many style repeats. We had a difficult time achieving consistency in the application.

2: Use common style sheets common to similar web pages.

This worked well for a while, until it got too complicated. In addition, we found that we had too many exceptions that still led to the setting of common styles for specific cases, which, if done incorrectly, can affect different parts of the application, and at some point it becomes difficult. Also, the presence of a large development team (in different time zones) and a tight project timeline did not help our business.

Although # 2 works, but we still saw that our products still do not have the same quality and consistency of the user interface as we would like.

Are there any CSS style rules that should be referenced in a very sophisticated Web 2.0 application. How do other people maintain their style sheets?

Answer 1

I found myself in similar situations.

First of all, make sure you use CSS efficiently. If you don’t feel that you are an absolute CSS professional, take some time to learn and you will greatly reduce redundancy and get a style sheet that is easier to work with.

In most cases, if you combine all your styles into one file, you will not be able to achieve much success, and in fact, dividing your styles into dozens of files so you can be sure that you exclude everything that won. Do not use, most likely will result in longer load times due to all additional requests. But, as I'm sure, you know, a massive CSS file can quickly turn into a headache to support.

Consider this hack to reach a compromise. Use your choice language (PHP for me) to serve your CSS. By this, I mean that your style file looks like this:

<link rel="stylesheet" type="text/css" href="styles.php" /> 

the header of this file returns it with the text / CSS content type and has this file

a) Pull several stylesheets into one file and / or b) Change the style of writing styles depending on various parameters (uploaded file, user data, time of day, etc.).

A is a good solution overall to reduce the headache of development and page loading. B will probably require that you also set the appropriate expiration dates for the file, to avoid the browser simply ignoring all the new styles that you want to create at the moment, in favor of what was downloaded on the last visit. Since you can usually do the same in B as you can, just having a static style sheet and dynamically written class names / element identifiers, this is usually not an ideal solution unless you are doing something really strange.

And ask the designer to advise you on such things. It is often difficult for us to fool some of the best points of effective CSS, as well as people studying in this particular area.

Answer 2

I have been to this many times. First, in the early days, I only did a stylesheet with everything that was inside, not so much, was an old time; then I decided for your second approach, the first of which, fortunately, thought it was a mistake, too much code and bits floating around ...

The second approach is good until the moment when you start to ask questions ... I mean:

Should the background style for this div be in the graphics.css file or in layout.css?

If the font style is in the fonts.css file or in the layout when it approaches the width of P?

If the header field with the position of the icon sign goes to the graphic .css or to layout.css or to the fonts.css file (would it be easier to use the same declaration for the icon, text and position ...)?

Then you realized that something was wrong with this approach.

Now I'm commenting. LOT.

template.css -

 /* ////// Headers ////// */ #header { width: 1004px; height: 243px; /* 263H-20MARG=243H */ padding: 20px 0px 0px 0px; background-color: #000000; background-image:url('../images/redset/top1-bk.png'); background-repeat:no-repeat; background-position:right top; clear: both; } /* logo */ #logo { background-image:url('../images/redset/wh-logo.png'); background-repeat:no-repeat; width:327px; height: 263px; float: left; margin: -20px 0px 0px 0px; } #logo a { width:327px; height:263px; } /* Top menu & Banner */ #menuybanner { text-align: center; /* margin-right: 65px; optional*/ } #bannerz { height: 152px; width: 653px; text-align: left; margin-right: 24px; /* optional: width: 100%; margin: 0px */ } #bigmenu { text-align: left; margin: 18px 0px 14px 74px; } #bigmenu img { margin: 0px 22px 0px 0px; } 

Initially, this would be in three different CSS: layout, graphics, and texts. Now I know what everyone is doing.

By the way, I know that it lifts the weight of the archive, but I prefer not to do any mixed effects, because everyone who comes after me and reads css should be able to understand what I did and css like this:

 a, .b, .c, .d, #f, #2 { background-color: black; } 

Really hard to imagine. Of course, if you need to do this, go ahead, but I mean, sometimes they are just grouped, for no reason, just to be more mysterious ... like moodle ... hahaha.

We hope for help.

See ya.

Answer 3

You want to use the cascading nature of CSS and how to inherit rules.

Enter the most common cases first, and then change them.

For a project with a normal size, this should not get out of hand.

To see things more clearly, you can use the index sheet and invoke other stylesheets. When you want to make changes, you will know which stylesheet to go to, and you will save time. Here is an example from one of my prqjects.

 /* This is the CSS index page. It contains no CSS code but calls the other sheets */ @import url("main/reset.css"); @import url("main/colors.css"); @import url("main/structure.css"); @import url("main/html-tags.css"); @import url("main/sign-up-sign-in.css"); @import url("main/pagination.css"); @import url("main/menu-items.css"); @import url("main/teachers-list.css"); @import url("main/footer.css"); @import url("main/misc-custom-sections.css"); @import url("main/error-messages.css"); 

Good luck finding your own style.

Answer 4

I use one mastersheet.css template that creates my main template. For any site that requires a separate styling style that cannot be covered by the main template, I either put it in the head of the site if it is short, or creates a new sheet for this case.

Ideally, I want the template.css file to be flexible to cover most cases.

Answer 5

Usually I try to group my CSS using visual elements and include only the appropriate stylesheets for this page in order to maintain a low load time. Using PHP or any other environment that you use to dynamically combine the required stylesheets into a single stylesheet for a given page is a good solution.

One thing that helps me is that I actually created pseudo-spaces for my CSS. I know that CSS 3 supports a namespace, and it makes things easier, but since some browsers do not support it, this is what I do:

• Create folders and files related to your project (I use Java namespace style)
  • For example /css/com/mydomain/myprojectname/globalheader.css
• Next, I use class names that map to the file system location.
  • For example, lt; div id = 'header' class = 'com-mydomain-myprojectname-globalheader-topClass'>
• Use delimiters and good comments in the css file.
  • For example / * ---------------------------- Beginning of the link section ------------ ---- ---- * /
• Use PHP or something else to load these files and merge them into a single stylesheet upon loading (you can cache the resulting sheets if you are really smart. The namespace convention will prevent collisions between class names.

While designers think this is verbose, it makes it easy to find specific css classes in the file system without harming the download. In addition, you will not have a problem with one developer / developer overwriting other classes.

Answer 6

support for css files is much easier if you can force everyone on board to use the correct cascading controls and keep the targeting levels to a minimum.

Make sure the elements inherit the styles and that the overrides are not too heavy and your css won't get crazy. Thus, you allow yourself to have only 2 or 3 stylesheets for layout and base styles and overrides. If you set levels of control over what goes into the layout / base tables, and regularly travel to reevaluate what's on the override sheet to see what can be moved to the base and what can be simplified, you will free yourself so people can redefine as desired, but also keep control of creep.

My theory is there ...