Page style development practice a – page development ideas

## Common page structure

Let’s take a look at some designs first:

Cc /community? T…

After looking at the above design, we can find some rules. The common page structure is basically a combination of up and down, left and right, and cascade (as shown below). For example, the ancient Grail layout and the two-wing layout (three-column layout) are also the evolution of the left and right layout.



How to get the layout?

1. The overall division of the block, is up and down, left and right which layout; Subdivision within the block (upper, lower, left and right structures)

  • Pages are divided by service functions
  • After block division, analyze which block has fixed width and height, which block has adaptive filling and so on

2. Determine the global tone of the page (basic color matching), font level, common class;

.color_primary{}
.color_success{}
.f14{font -size: 14px}
.f16{font -size: 16px}
.f20{font -size: 20px}
Copy the code

3. Summarize common components that appear multiple times on the page and extract them as global components

Development sequence: build the overall outer framework — define color, font size and other variables — develop common components

Common typography

Flex layout

The Grid layout

Naming conventions are too difficult

BEM (Block Element Modifier) — Team agreement

The block-element-name-state actions are named according to the meaning of the page, which is how we named element UI.

  • Block: a block of names and words connected by –

  • Element: An element, a child of a module, connected to a block with __

  • Modifier: Modifier, variant of a module that defines a special module to — connect to a block

Other naming conventions are common:

  • OOCSS (object-oriented CSS), design separated from structure, style separated from concrete development interface, the same CSS style can be used anywhere else

    <div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div> Styles are split into each component.size1of4 {width: 25%; }.bgBlue {background:blue}
.solidGray {border: 1px solid #ccc}
.mts {margin-top: 5px}
.mrm {margin-right: 10px}
.mbm {margin-bottom: 10px}
.mlm {margin-left: 10px}
Copy the code

  • ACSS: Atomic Css: Any style is defined as a class

  • SMACSS: The CSS is divided by layout

We forbid the practice

This chapter focuses on the unfriendly (we don’t recommend) aspects of style development

  1. Start development without planning: before development should sit on the whole page module planning, and layout layout
  2. Hierarchies are too deeply nested: Think clearly before you develop, minimizing the hierarchy of page elements (this is also more diff friendly)
  3. With deep nesting, too many element selectors can easily become difficult to maintain. If the page contains multiple UL-Li and is used in nested layers, it is difficult to find the corresponding elements when modifying: at this time, the appropriate layer framework to increase the class can achieve better readability, conducive to maintenance and change
  4. The class name is too arbitrary and not semantic:

Reset REsets the CSS style

To avoid browser API compatibility and box-sizing issues such as margin and padding, we need to initialize styles.

reset.css

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }Copy the code

Common CSS base styles for projects

When you get the design drawing, you should first agree to divide the common style in the project, as follows:

base.css

.f14{font -size: 14px}
.f16{font -size: 16px}
.f20{font -size: 20px}
Copy the code