"Project Summary" pull a rip on e-commerce website front-end CSS Overall architecture design (1)

Recently half busy not busy wrote an outsourcing site, the main function of the site is art auction and art derivative sales. The project has been completed about 80%, now the front and rear code volume has been around 50W, I am mainly responsible for the front-end design and front-end layout. The following first put a site design, because it involves the "business secrets", so hit the mosaic:

　　

　　

This article is mainly for my summary of the project or for this stage to see some of the front-end books or experience a summary of it, so the design is not affixed so much. The design of the entire project from the beginning of the UI set the first page of the tone, the rest of the interface is mostly I made on the basis of the first page, and then have the opportunity to chatter. PS: But the blog park now all the garden are. NET articles, the front-end of the article in addition to JS, is those "can be copied paste" source text, hope to see more front-end good text bar.

The entire Web site's single interface (not including the back end) has 3, 40, CSS files have accumulated more than 10 (this will be explained later, this is my project to do the most of the failure of the part, is also the reason I write this blog).

　　

　　

A question of the chatter, I'll talk about my own understanding, not quite right place to welcome the exchange:

First, what is the architecture of CSS? Why do we need architecture?

If you are doing a small blog site or a small CMS, it may be a lot of time not to consider the CSS architecture, because the CSS file is very small, a total of less than 10 interface, to each interface to write a separate style, a separate CSS file is not too much work. However, if you switch to a large web site with dozens of or hundreds of interfaces, the CSS architecture is necessary. Moreover, a good architecture can help the team to develop together, it is impossible to say a total of dozens of interfaces, 3 front-end, a person of more than 10, good, you go to write, this work is too low, and very easy to lead to style conflicts and styles are overwritten, may be written quickly, everyone is hard to write their own code, Then after the end of the sum found the style is all messed up, a change for several days, slower than writing.

The right CSS structure can help developers reduce the amount of code, helping the front-end development team to work better Together in the co-development process. At the same time it can optimize the overall structure of the front-end, reasonable CSS architecture can reduce the number of CSS files and the total size of the CSS file, reduce access to the server pressure.

It can also greatly improve the reuse of front-end code and reduce the cost of code maintenance. For the kind of 1 hours to change the interface of the party, there is no good CSS architecture is really crazy. For example, you each page has a title bar, each page is a separate CSS, and then suddenly one day, a deep-well ice, I want to change the style, this time you have only two ways: 1. Hug party A thigh crying beg not to change 2. Silently open the computer and start an interface to change the interface. See here a lot of development experience comrades should know that, extract this title section, written in a unified CSS file, each interface is quoted, and finally want to change the words as long as the total of the CSS file inside to change it. This is the simplest modularity, however, there are many issues to be aware of in the modular process: 1. For example, 3 interface has a title bar, but 3 interface for the title bar font Color requirements are different how to do? What if the requirements for the top and bottom margin are different? 2. Suddenly a more interface, it has a title bar, but it has more than a background image in the title bar, how to solve this? More trouble, it has more than one <p> tab in the title bar, more out of how to layout? This problem of solving the difference between modules is really worth a bit of research.

The usual CSS schema, or the current Web site's CSS framework, including the default browser style overlay reset, the site of the internal module Abstraction, convention CSS Code specification, conflict resolution and other functions. If the project has references to other mature frameworks, such as Bootstrap, Yui, how to put these frameworks and their own write-off, can achieve style and do not conflict? Slow down later.

How to do CSS architecture or how to implement a simple CSS structure?

Answer: Write code Ah!

　　

Second, where does the CSS architecture start?

Before you start a project, you can not see the design diagram directly dry, you should first think about how to write. As our teacher most often said to us "only write code, you are just mediocre programmers." It is a high-end programmer to be able to make a good structure or to arrange how the project is developed. Mediocre programmers can only eat bananas, and high-end programmers can sometimes eat pineapples and apples. Start writing directly, write write will find a lot of time oneself is doing repetitive work, constantly copy and paste or for a interface module rewrite one style, or write write found "crouching groove, conflict, style disorderly", or write write to find oneself write not want to go back to change, and then began to change the document ... This is not structured, clumsy in the writing of CSS is in the dry manual work, a long time ago to write a project is so, 20 several interface slowly change to it, changed the whole two days, are going crazy ...

Before you start a project, at the very least, you should think about how many CSS files there are, which CSS files need to be written out in a fixed version, which CSS code can be heavily reused, and which CSS files may have large-scale changes. Then, according to the detailed requirements of these CSS to begin to write the first edition.

For example, I put above, the most intuitive header first column:, in every interface is the same. Of course, this can be used in the backend with the distribution view layout to achieve, but in the front end of the interface implementation of the initial, is not also should be the HTML, CSS, JS out, so in the back end of the final integration can be faster, and in the event of a Christmas, Customer said to the above background color change to blue bar, so directly into the header.css to change the style is good, do not have to hard to "physical life".

So the first type of CSS front-end architecture is designed in a way that divides the regions.

According to the elements within the page or the location of the module, the site can be divided into a number of areas: header, footer, sidebar, slogan, etc., for these areas alone can effectively realize the division of the distribution view, each area is drawn out, When we create a new interface, we just need to spell it out. Remember correctly, Yui is doing so.

In the CSS of this auction site I did not separate out, because I think alone to pull out into a header.css, footer.css file a little redundant, the number of CSS files is increasing, and each file within the number of lines of code is very small. This also depends on the specific code to see, a footer style write dozens of lines, then pull away into a file it. So I am in the total CSS file: Layout.css is actually written according to the region:. When I want to change the bottom navigation style, go straight to the layout.css and look down, and get rid of it.

　　　　

However, after we split the interface, we found that there are still a lot of code repeated, such as landing boxes, such as tables, such as text boxes, and so on, so there is a second way to divide: by function.

According to the functional division is to see the elements of the interface function is what, and then according to the specific function, the same function of the elements, the module out: font, color, button, form, and so on, this should be a lot of mature framework adopted mode, For example, my big bootstrap is so dry, the following is bootstrap2.3 less folder, it is obvious, are a function module, and finally we directly apply is all integrated compression. Min.css, it is also the structure:

　　　　

It's pretty cool to divide by function, because you can add a unified prefix to each feature, and it's fast to write code in a code-hinting compiler. It's a little bit of an egg when it's divided by region. "Oops, what is the CSS name for the footer?" Oh, what is the class name of the sidebar that Xiao Wang wrote? "

In the code of this project, I actually use the first way and the second way to mix the pattern, from my previous CSS file can be seen, I not only repeat the code of the area module is abstracted out, but also the sidebar, mask this function module to the abstraction, as far as possible to improve my code reuse.

I thought I was doing a good job of the project, but then the more I wrote it, because many times I was doing nothing. I made a stupid x error:

1. The module abstraction is limited. For example, the form has to be a special element, the original written module can not be used, and have to write again.

2. The module abstraction is not complete. I think I have to do the module abstraction is almost the time to start writing, writing to find that some modules have been forgotten, many modules need to be written over and over again.

3.css class name is not standardized in the final analysis is the module is not divided well. This site wrote now, my name has been poor, it has a lot of interfaces: Add shopping cart, add to Favorites list, view shopping cart, confirm payment, fill in confirmation order, pay at a price ... It's a nightmare to have a good English base ... So can only translate Chinese name, and then the Hump name method: Addcart. In fact, there are many naming methods, the biggest advantage of the hump name method can be very intuitive naming, do not consider other, but the name of the hump in the name of the sub-class when it is more headache, one after another long words ... Another naming method is the Dash method, in order to avoid trouble directly with the underscore Add_cart, this naming method for sub-class naming is particularly cool, this after a few summary of the time to chatter.

------------the---------below is-------------------core-----of this article---

The following is the "core" of this article, but also my bitter reflection t^t recent project blocked, half write not write the state, so looked at some front-end code specifications, Web site development Summary of the book, and then found a new structure method, after reading it is really the whole people are not good. Recommend this book, "Writing high-quality code-web front-end development and cultivation of the road"

Another recommended CSS architecture method is: According to the interface function is divided: here the entire front end of the site is abstracted into a software or a project, this time we have to consider is what the bottom of the project, the performance of the project layer is similar to what we often say the idea of MVC, The front-end architecture is also MVC-like division, you can summarize all CSS files into three categories:

1.base Class 2.common Class 3.page class

These three classes are not like the regional architecture, functional architecture in the parallel role of the model, but base class as the bottom layer, layered effect, cascade action, probably draw a function diagram:

Indeed, like this pyramid structure, the role of each class is described in detail below.

　　

[1.base class]

As the name implies, the foundation, which is the most basic part of the entire CSS architecture. It is responsible for providing the default browser style reset, the underlying functionality implementation. When it comes to basic function implementations in base, it mainly refers to the implementation of a functional class that involves a very small, abstract level of atomic level. For example, our most common. f12{font-size:12px;},.mt30{margin-top:30px;}, each Atom class is only responsible for implementing a function, absolutely does not involve the specific page UI, just for the last few layers to provide atomic functions, The implementation of a specific module is implemented by combining these atomic classes. Of course, the base class is also responsible for the browser default style of reset, which I think Yui implementation is very reliable, and now a lot of sites

The base class is the foundation of the entire CSS schema, and all the interfaces refer to the entire file, which requires: 1. File size cannot be too large 2. File reliability is high, you cannot have more than one version 3. Write it down to minimize maintenance or avoid maintenance. And the base classes of different sites can be shared, because the base class does not involve any specific UI style and is highly portable.

Specific base class files have what, this next talk to good chatter, today is not free.

[2.common class]

Ordinary class, it is the CSS base class implementation of the base module CSS file, we have the entire interface text, margins, colors and other atomic engineering out, now we need to customize the module for the current site.

Principle of "unity principle" requirements to the same site must maintain the same style, you can not be flattened home page, into the list of high-gloss high-shadow with cool flash web2.0 style page. So, the search boxes, text boxes, buttons, lists in the same site are in most cases uniform style, so this gives us a chance to pull these repeating modules out into the common class, similar to the model in MVC, and similar to the specific function files that we've described above for the architecture function partitioning. In order to ensure reusability and flexible use, we need to encapsulate these modules in a complete package.

In other words, what happens when a module needs to be customized?

I think of two ways, one is to use less and other languages to the module reservation style interface, directly modify the configuration file, and then dynamically output the CSS file. 2. Minimize the UI properties of the module, such as bgcolor or border, can be vacant, and in actual use according to their own needs and the atomic class to be combined. However, this method may be required for the atomic class and will affect the base file, so I made up a word: molecular class, it is obvious to provide a large atomic class for the module customization, for each module to customize the exclusive style class, as for the common layer, When you need to customize the module style, you only need to combine each other. Then write something in the article to demonstrate.

[3.page class]

Page class, from the diagram can also be seen, it in the pyramid Spire, and its scope is also the smallest, is every page, to not every page a CSS, but also almost. The page class is responsible for providing the pages-level style. Page class CSS may produce some more tangled problems: 1.page too much, so the page CSS single file too many, each file is an HTTP request, the server can tolerate it? 2.page CSS in order to not many, so merge in a page.css, but what to do with the name? For example. PART,. One,. Main,. Theme .... What about these frequently occurring class name merge conflicts?

The second problem can be solved by naming scope qualification.

As for the first question, you can merge the CSS single file and then you will see the answer to the second question.

　　　　　　

To summarize, in development, the base and common classes are generally done by one person, and after he finishes these classes others take over the project, Start to add some page.css, so the page layer code is odd, if applied to the distribution view, an entire page is actually composed of a number of small interface, then how to avoid conflict? How do I avoid style overrides? Later.

　　　　

_ (: З"∠) _ Code So many words exhausted me, today I wrote this first. In the next article see ~ ~ "Beg for the Master of communication with seeking inside the calculation not spit groove ..."

In the next article, let's talk a little more about the base class CSS file and my own refactoring of the project CSS.

Finally, the last thing I want to say is ↓↓↓.