Translation: website design reasonable framework css
Tissue paper
Construction css system is the first step in the formulation of the outline. (I think) the importance of organizational planning css comparable site directory structure. (Htmlor Note: The term exaggeration that allows you to enhance memory) programme which did not universally applicable, we will discuss some basic organizational programmes, as well as their respective advantages and disadvantages.
Lord css document
Usually can use a main css document to put all the pages sharing rules. This document will contain the default fonts, links, headers, or other forms. With the css document, we began to explore senior organizational strategy.
Method 1: Based on the prototype
The basic strategy is based on the prototype page (archetype page) separation css document. If a web site home page, and pages of different combinations page design, prototype will be based on the strategy. (This strategy) each page will have exclusive css document.
Prototype in a small number of cases, this method is simple and clear and effective. However, when the page elements do not step-by-step in various prototype page, the problem has emerged. If the portfolio of pages and pages sharing certain elements, and Home has not, how should we do?
Add to the elements sharing the css document. Although this is the most pure solution, but applicable to certain specific situations. But if the huge site, (to do so) the css document will be rapid expansion - which runs counter to the original intention of separation documents: Avoid unnecessary import large files.
In the portfolio pages and pages of the css document a pattern of the release code. (Do) means to maintain redundant code, it is clear we do not want to.
Create a new document, shared by these two pages. This sounds good. But if only 10 lines of code, we have created this document is to share this only 10 lines of code? (Htmlor Note: the slaughter of chickens with this line?) This method is very pure, but if there are many large sites on the shared pages rarely elements When (htmlor Note: For example, 30 on page 10 lines of code sharing, respectively), it is a very cumbersome.
Css creation of a separate document containing all the elements sharing the style. This method may be relatively simple, but it has to depend on the size and site of the shared elements of the number. Kind of situation will Henfan: Import a big css document, but only pages use a small part of the pattern - or sentence, which is contrary to the original intention of the separation documents.
I said this is the dilemma of overlap (overlap dilemma). Css piecemeal rules overlap so on, does not have a completely clear and unambiguous programme to organize them.
Method 2: Based on the page elements / Block
If the site include the use of server-side, this method will be very good. Example, if you use the header include, it will have its own corresponding css document. Footer or can include other parts of the replicated only into their own css document. This method is simple and clean, but may have many small css document.
For example, if the pattern footer need only 20 lines css code, the creation of a separate document on the Guobulai. Moreover, this method will lead to each page contains a heap css document - because include the number, so the number of css document.
Method 3: Based on the marker
The programme intuitive reality, and a similar ago. If the site a total of 30 pages, of which 10 contain form, it can create a form css document devoted to the style, in which only 10 pages into it. If another 10 pages contain table, the creation of a document on the table to deal specifically with such style…….
Another organizational skills
In addition to subjective organized document, and we have to consider such as print, handheld devices and screen a variety of media types. Although this has been a very clear definition, can still file structure is built should be considered a factor. Once must support a variety of media types, the main css document some of the rules may have to reconsider.
In addition, the brand may also be an important factor. (Htmlor Note: google and launched the nike joga) If involved in joint brand, you need to consider what elements should be adapted to another brand. For example, using different css files.
Another often overlooked skills: the use of nested @ import statements. @ Import only contains a series of statements, or with a few css rules, we will be able to create a css document. This method can be used to create complete the main site css files (using @ import into various parts of the pattern). If each page of the web site are introduced in 4-5 different css document, no doubt you should consider using this technique.
Rules for the organization and selection
On the end of organizing files, and then talk about how things organization documents in the bar. Naturally, we hope that in the file unimpeded view, quickly find the option to edit (selector) or rules.
Redundant vs. Subsidiary
As Dave Shea, in its article "redundant vs. Subsidiary" (Redundancy vs. Dependency), said, you must understand the cascade (cascade). You have to decide on options for grouping (which means subsidiary), or to their separation (which means redundant). Marshalling brief concise code can be maintained, but will be an affiliation, resulting in increased maintenance costs. If no organization, and will increase file size, similar to the choice of consistency difficult. Only such a good balance, choice can always make the right decisions.
On the relationship between / contextual grouping
Since organizing files can be subjective, so obviously, in accordance with the rules and selector and other parts of the relationship between the organization is to carry out the best solution. Illustrate, suppose you use containers, header and footer to complete the layout, it should put them into a group.
This seems very simple, actually not. For example, the header of navigation by adding css, it is with the father of grouping elements, and independent organization? Such circumstances, it depends on the context of the rules. Usually, the relevant header and page layout, layout and other elements should be grouping together. And the navigation is a header, it should be the other header and block groups, rather than the header itself.
Use Notes
Like most similar code, Notes is the key to whether or not well-organized. Css should be under the control of, clearly mark each section (section). Notes ensure that the best visual highlight to the contents rolling Yimushihang when rapid positioning.
Doug Bowman, in its article "css organizational skills one: Marker" (CSS Organization Tip # 1: Flags), the css Notes Playing wise to the extreme. He explained in detail in the section were added before equate to the use of the text editor to quickly find Skip to a festival.
Do not forget
You should carefully detailed understanding of the specificity, Cascade and inheritance, and make the best use of them. Each one of them is you can be the most terrible enemy, and you can also be the most friendly friends. When establish a huge Web site, whether a sophisticated understanding of the subtle, determine your Construction of the system is rock solid, or the bean curd dregs projects can not withstand wind and rain. (Htmlor Note: This fully translated, compared Shuang)
The organization attributes
Now we know the documents, the paper also know that the rules of the organization, but also an important part of the organization (not mentioned), that is, attributes (attribute). Although attribute more than in the previous two simple concept, but there are still some very good rules to keep clean way it is worth mentioning.
Alphabetical
Mentioned attributes, if we say that the need to follow the principles, then it is: Press - word - home - Marker - sequence. In fact, this does not help much for the properties here, but coverage can prevent attribute values such occasional incidents.
For example, there have been countless number of times, I had a choice of definition of the margin, one day after inadvertently added a (or before or after). (Under such circumstances) a natural attributes will play a role. The second hypothesis attributes do not know exist, no matter how I adjusted the first attribute values, refreshing the browser, see pages change. (Htmlor Note: I deeply understand this issue) according to alphabetical order, you will find margin is defined twice (because they are side by side), which naturally can be avoided.
Priorities
When the site complex, involving many css document, it will establish a large number of affiliated. Once the need to customize a unique element of the form! Important option seems to be the best option. Yes,! Is important to the needs of the moment, but find out the best result the root of the problem, and then decide whether or not to cascade relationship really need to use it.
If you specificity of the above-mentioned, Cascade and inheritance is very familiar with, and no need to take! Important cling to tree. (Htmlor Note: the whole forest waiting for you ~) course, it will still come in handy, but use prior to the specific circumstances glance in the chest. Do not because I do not know the crux of the problem and the! Important as a shortcut or remedial programme.
Summary
When we become dependent on css而使style sheet increasingly complicated, it is necessary to correct the plan to avoid mistakes, and the code is easy to maintain. Since the perfect programme does not exist, then css understanding of the working methods, as well as documents, and the choice of a variety of organizations attribute the programme will undoubtedly help us to write quality code and have withstood the test of time.
Author: Garrett Dimon
Translation: htmlor
Tags: css layout Record website, CSS style design, css website, div framework, w3c website w3c statement w3c css
Leave a Reply