Now I have two ideas. First, the css style of the entire project is written in the same style file. Benefit: only one request. disadvantages: the more styles, the more chaotic the class naming conflicts, and the more difficult it is to maintain. Second, each page has a separate Style File, opening the corresponding page to load the corresponding Style File, because angularjs is used for development and route loading. Each style file is placed in the template. Benefits: easy to maintain, preventing name conflicts and good readability. Disadvantage: too many requests. I don't know which method is better? Let me talk about it .. Or you have two ideas on my side.
First, the css style of the entire project is written in the same style file. Advantage: only one request. disadvantage: the more styles, the more chaotic the class naming conflicts will make it difficult to maintain them later.
Second, each page has a separate Style File, opening the corresponding page to load the corresponding Style File, because it is developed using angularjs and loaded using routing. Each style file is placed in the template. Benefits: easy to maintain, preventing name conflicts and good readability. Disadvantage: too many requests
I don't know which of the above methods is better? Let me talk about it .. Or you have a better way to share it .. Thank you for your reply: if it is me, I will not first consider how to split the CSS style file, but first read the visual draft and divide all similar and reusable parts, extract the structure and style into a module. It is normal to paste a piece of HTML code and a CSS style to any position.
After extracting the module, It is very convenient to think about how to manage it.
In the development phase, you can use SCSS for development. In this way, you can directly split the module into separate CSS files and import them in, which is clear.
Additional information:
1. Experience Summary of similar projects
2. The recommended general HTML framework structure is named to facilitate filling in the HTML structure and naming method of the divided section-wrap and section modules.
3. Sass information Sass advanced | Yu jiangshui
For example, we need two CSS files, one shared by base.css and the style of common modules, and each page has an independent style.
Of course, it would be better to use sass, postcss and other tools for modularization and then import them in. It is better to write in the same css. In fact, there will be a lot of public resources, and there is no need to modularize the CSS of an Angular project. In general, it is basically all about creating a corresponding module and creating a corresponding CSS based on the module, pay attention to the repeated use of CSS. Use varibles, mixins, and extend Extending Sass Without Creating A Mess.
And so on.
At the same time, it is best to create a dedicated Grid system for this project instead of using Bootstrap. I personally prefer a lightweight library, Jeet Grid System.
Example 1:
Place the corresponding Scss in the corresponding Angular module, and then use compass (gruntjs/grunt-contrib-compass · GitHub
) Package and compile it into a single CSS,
Only Scss related to the booking module can be placed in the folder booking/css. At the same time, other common Scss files should be placed under the main file. In this example, the app folder is used.
Another method is to create the corresponding CSS instead of the module based on each page. This method is more suitable for static websites (commonly known as slice. Modularize each section of CSS as much as possible and follow BEM specification http://bem.github.io/bem-method/html/all.en.html
In the views folder, the CSS of each page is opened independently, and Scss in files like common can be reused.
Example 2:
Then import all Scss to styles. scss, and then compile the file by Compass:
@import "jeet/index";/* -- reset -- */@import "reset/reset";/* mixins */@import "mixins/*";/* common */@import "common/*";/* partials */@import "partials/*";/* views */@import "views/*";/* fontawesome */@import "fontawesome/*";
Is it not big to write a page? Generally, you can use less sass for import. All css components can be componentized ...... Separate writes when writing, and use gulp to compress into a file when going online
Obviously, the CSS Module mainly looks at the similarity between these pages. If they are very similar, we recommend that you use two files, one public, and the other integrate the specific styles of each page;
If the difference is great, write them separately, one page and one style;
If it's less, I won't leave it alone. Just a CSS file, you can use tools such as gulp to change css. Why! You can also use sass to write and import data to an object.
