My thoughts on CSS framework and CSS modules have always been vague, and I am completely following the trend. The problems I encountered at work recently forced me to pay attention to this issue. I am used to one person doing everything, planning-designing-publishing the page. When a project requires multiple people to collaborate and complete it in a short time, the planning of style files, the thinking of CSS modules and frameworks are particularly important.
The following question has been bothering me recently: If several people are working on the front desk of a website at the same time, how to distribute them so that the style of the entire website is unified, the style file structure is reasonable, there is no duplication and redundancy, and the efficiency is the highest? I consulted several classmates, and the answers I got are summarized as follows: In terms of style unification, we discussed together to make a sketch first, and one person made a standard style page based on the sketch, and then we started working together, and the rest was constant modification. In terms of production, several different css files are set for the entire site, and each person is responsible for different style files.
What is easy to say is not so easy once implemented. When it comes to design, I still dare not take risks. Fortunately, there are not many pages. There are less than 20 first-level and second-level pages in total, and one person can handle it. Tell us about the production process.
(1) Standardize CSS naming, writing order and comments.
Not to mention the importance of this point, it is hard to imagine how confusing it would be for several "strongly personalized" naming methods to appear in a style sheet at the same time. Naming can use the middle "-", "_" symbol connection, such as text-box, text-content, text_box, or upper and lower case "hump case" writing, textBox, textContent, etc. Comments are very important. Comments can be divided into three levels. Major categories of comments are used to divide CSS blocks, such as header, container, footer. Second-category annotations, local module annotations under major categories, and third-category annotations are annotated within a selector. Use Comments or hack comments on some special effects. The writing format can use horizontal indentation to show hierarchical relationships.
(2) Determine the structure division of the style sheet based on the renderings
There are a lot of introductions on the Internet about the division of CSS file structure, which are generally just a few files: layout.css/main.css/footer.css/header.css/reset.css, etc. Everyone says that they are good at it, and they must practice it before they are implemented. Understand, there is no best, only the most suitable. The best style division should be closely dependent on the HTML structure itself, rather than being universal.
In addition to facilitating future division of labor and collaboration, the distribution of CSS files also has a very important point: if the bytes are small, they can be compressed as much as possible to reduce the number of concurrent connections. If the bytes are too large, they can be divided to prevent the download speed from being too slow and affecting the Style loading. These are specific issues that need to be dealt with on a case-by-case basis. For example, for highly visited pages such as search engines and portal homepages, it is best to write css inside the page.
Preliminarily decide on the css style structure:
Example Source Code
reset.css /*Page style recharge*/
header.css /*Site-wide header style*/
footer.css /*Full site footer style*/
public.css /*Public module style for the entire site*/
index.css /*Home page unique style*/
container.css /*Level 2 and below body styles*/
print.css /*Print style*/
ie.css /*IE hack*/
(3) Division of labor and collaboration
The stage has been set up and the singing will begin. Find all public text lists and mixed picture and text lists. One person is responsible for writing in the public module, one person each for the head and tail, and one person for the secondary page frame. The personalized part is left to the end.
There are still many problems in actual operation. Code redundancy cannot be avoided and can only be minimized. Sometimes sacrifices have to be made in order to be efficient. The above is just a little bit of my experience at work. It is also the first time to truly explore the advantages of CSS modularity: easy to modify, easy to manage, and easy for multi-person collaboration. Looking forward to discussing it with the experts.