General templates for creating a large website

Question

Are there any common templates for customizing, creating, storing CSS for large sites?

I tried a lot of different things that I came up with myself.

I tried to put the whole layout (position, size, etc.) in 1 file, while the whole decoration (color, background, etc.) in another so that I could easily change styles without the layout effect. This becomes very tedious when each item is created in multiple files.

I tried to come up with one main CSS file, and then any page that has different rules gets its own CSS file for these rules. This ultimately leads to other pages with the same “unique” rules and always ends with CSS duplication (each page has its own CSS file that defines what the general style should be), which makes it difficult to maintain.

Every CSS book, tutorial, or everything I've ever read explains what CSS does and how to use it in the context of a single page or small site. I understand this well, but I never see discussions about how to plan for a large website with a lot of inconsistencies.

Is there a pattern / routine practice that I can follow?

Answer 1

You should always remember performance. The presence of one large file is optimal, since it is downloaded only once and can be subsequently cached, which allows you to load other external resources, significantly reducing the overhead of page loading time. Obviously this makes a large file, but with comments and indentation you should be able to group things together in a reasonable way.

Alternatively, you can save them separately in your DEV environment and consider the build mechanism to merge them all into a single file before deployment. It really gives the best of both worlds.

The only real need that I saw for individual CSS files was the theme, accessibility and different styles for the environment (print, page, etc.).

Answer 2

Take a look at large sites like Flickr, Facebook, Twitter, or something like that. The best (in terms of speed) is to use a single css file to store everything.
From the point of view of different rules for different sites, there is also the ability to create “modular” ones - for example,

.redFontColor { color: #F00; } .smallFont { font-family: "Courier New", "Times New Roman", serif; font-size: .7em; } .alignedLeft { text-align: left; } 

And use it in HTML as

 <div class="alignedLeft"> This will be <span class="smallFont redFont">small and red</span> - but this text will just be <span class="redFont">red</span> </div> 

There are a lot of sites that go as follows :-).

Answer 3

You should always remember:

• Reusability
• DRY
• W3C Standards
• Cross-Browser Testing
• Performance

Answer 4

What I usually do is:

I am making one CSS file for containers, for example. and another file for individual styles (div, img, link, etc.).

with containers that I mean, the outline of your website, the contents of your website, for example, the text goes to it.

with styles that I mean, or, and the list goes on.

Hope this helps you, poorly edit my post with very good guidance on this (as soon as I find it).

PS. the book is free.

Answer 5

We recently implemented something that we called "CSS compilation", something like what methodin answered. Our compilation (done using the PHP backend) creates one compiled css file for each module, and thus one CSS file is loaded at runtime. This gives us the freedom to define as many CSS files as possible without worrying about performance. To do this, we defined an array $moduleCssrelation containing the ratio of module-CSS files in the configuration file of our project (module, for example, login, home, etc. And CSS files to load for each module). Describing more details about this at the end, because it is the core of style architecture.

This is the basic CSS plan we used: -

• Studied in detail all the modules marked with style styles / reusable components, and saw that
  • header section, footer and left menu are required in each module
  • there are many modules that have a tabular section displaying some lists in the center (leaving a common title, footer and left menu), and there are many modules that display some elements, such as a user details page, a class details page.

• We had all the styles in one file delivered to us by the design team. Then we decomposed one CSS file into several fragments in accordance with the style templates, as described in the previous step. So, we created some files, for example -

• common.css Contain the style of the header, footer, left menu

• listings.css Contains all style definitions for components displayed only on listing pages.

• details.css As with the preface, if you have a .detailsRedHeading class that is only needed for detail pages, define it here.

• Any additional styles - suppose that many modules require a pop-up window with their own style, and then put these styles inside popups.css instead of defining these styles in common.css or any other file. Remember the freedom we need to define as many css files as possible.

To simplify subsequent theme changes
I never applied your idea "I tried to put all the layout (position, size, etc.) in 1 file, while all the decorations (color, background, etc.) in another", but if that helps you, you can add that to this architecture. Break common.css in common_layout.css , common_design.css and similarly for others.

Also, make sure that you use the maximum possible reuse of the style for the first time. Avoid style declarations as follows: -

 .listingsBody { font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif; font-size: 12px; .. some listing page styles .. } .detailsBody { font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif; font-size: 12px; .. some details page styles .. } 

Instead, do the following: -

 .siteMediumFont { font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif; font-size: 12px; } .detailsBody { .. some details page styles .. } .listingsBody { .. some listing page styles .. } 

I have seen many designers do this. This habit in more complex cases can make things really difficult later on.

Compilation Details: -

After we finish applying CSS changes, we will run the compilation code that does the following: -

 $moduleCssrelation = array("class_details"=> array("details","popups")); 

Go $moduleCssrelation and create a compiled file from the contents of the css file names for each module. for example, if the class_details module needs the details.css , popups.css , then it creates the common-details-popups.css , which will also be loaded for class_details , as well as any other module that needs these two css files.