How to plan the css structure to facilitate refactoring and maintenance?

83 0

The period isn't supported by the mobile end, only pc and pad are supported.

Later adds support for mobile end support.

In the early days, 【 should be able to plan the style of the project, and it's easy to maintain 】.

In addition:

Is the number of pages less than 10, it's necessary to do a set of UI styles that meet your project 's 【 bootstrap 】.

Or, depending on the psd design, it's to reuse.

I'm doing this now:
Write a common style ( reset, global style, layout, font style, form, button, color ) + a special style. Css.
It's a bit confusing, because some of them don't know where it should be.

5 Answers

100 5

I've also encountered this problem in development, and here's my idea.

First, I think there's an impact factor in programming css, which is the design idea of the web site, and if the website is a whole design style, it can be used to.

Structure split

  • framework: include reset style, grid, css3 animation module, or vector map library ( iconfont ), auxiliary class
  • generic style library: Basic reuse modules, such as button, form, table, and so on, should pay attention to reusability and maintainability.
  • contains styles, such as navigation, column pages, comments, and so on, between pages.
  • : you can summarize common css issues such as vertical horizontal horizontal centers, png transparent image support, and so on. .

Code specification

  • namespace + modular +, you can refer to amaze UI html/css specificatio &
  • compatibility list: this depends on the business requirements, and if you want to have a high level, such as ie8 + basic and hack.
  • JavaScript component: Complex interaction components are compatible with JavaScript and recommend a unified specification within the company. If not, you can refer to the industry 's bootstrap, aralejs.

Development tools

Now it's common to start with the preprocessor. If you're node, use a stylus or, as a style tool library for est should be able to improve efficiency.

Document

It isn't said that the -- hologram is recommended for the team 's maintenance, but it relies on for.

Industry reference

semantic UI
As the name suggests, semantic css library, component division I think can be reference.

amaze UI
China 's first open source html5 framework, with less written, mobile priority, document is very detailed, it's recommended to read.

No, bootstrap, nothing.

70 5

Css compiler should be what you need.
I like a stylus in the node project.
I like sass in the rails project.
I like to use less in other projects.
For how to organize maintenance, see how bootstrap learning works well, but in actual projects, it may be necessary to adjust your business needs slightly. For example, one of my projects is the following:

@import"compass";
@import"compass/reset";
@import"config";
@import"global";
@import"header";
@import"footer";
//components
@import"components/type";
@import"components/form";
@import"components/btn";
@import"components/icon";
@import"components/table";
//modules
@import"modules/agree";
@import"modules/bank";
@import"modules/dialog";
@import"modules/divider";
@import"modules/diyselect";
@import"modules/hint";
@import"modules/jump";
@import"modules/protocal";
@import"modules/step";
@import"modules/subject";
@import"modules/tab";
@import"modules/text";
@import"modules/tipbox";
@import"modules/tiptext";
@import"modules/typelist";
@import"modules/title";
@import"modules/video";
//pages
@import"pages/account";
@import"pages/audit";
@import"pages/collect";
@import"pages/depository";
@import"pages/error";
@import"pages/faq";
@import"pages/mobile";
@import"pages/profile";
@import"pages/password";

project address

...