Should css be written horizontally or vertically?

Different css writing methods have different advantages. For example, during development, css is written vertically, encoded according to specifications, and the format is indented. First, the code is highly readable, and second, it is easy to debug; when going online, CSS is written horizontally. You can use build tools such as gulp or grunt to write scripts to optimize the CSS and reduce the size of the CSS so that the generated code becomes horizontal.

The operating environment of this tutorial: windows7 system, css3 version, Dell G3 computer.

Write css horizontally or vertically?

Development: write vertically, code according to specifications, format indentation, firstly, the code is highly readable, and secondly, it is easy to debug

Online: Use build tools such as gulp or grunt Write scripts, optimize css, reduce css size, and generate horizontal code

Expansion:

Vertical writing features:

Each CSS property is on its own line, and generally no line breaks or horizontal scroll bars will appear.

You can find the module through firebug and other tools, and locate it with the ctrl g line in DW, making it easy to modify.

There are indents between attribute paragraphs to ensure that the code is clean and hierarchical, conforms to programming language code specifications, and makes modifications more intuitive.

Existing problems: redundant code (such as spaces, tabs, newlines); increased file size; vertical scroll bars prone to appear.

Horizontal writing features:

Maximizes the use of space, can display more on a single screen, reduces the chance of vertical scroll bars appearing, and can quickly capture More information.

Reduces the file size and eliminates unnecessary spaces, line breaks, etc.

Horizontal writing facilitates block division and annotation, making it easy to view the CSS structure, and the selector is clear at a glance. Today's monitors are becoming larger and wider, and basically can display everything in one line.

Speed ​​up writing CSS without typing line breaks and tabs every time, and reduce the number of times you pull the scroll bar.

If it is an active page, it will not be used for compression processing. It is recommended to use CSS optimizers to optimize CSS, but when writing horizontally, there are basically no extra spaces and line breaks, so there is no need for compression, so efficiency and capabilities will be improved.

Easy to read and find related structures. Code editors are relatively good at locating the number of peers, so what we need to solve is how to quickly locate targets vertically. When writing horizontally, the selectors are aligned vertically, and the selectors of

.class_name_2 .class_name_2_1 .class_name_2_1_1 are clearly hierarchical, so it is easy to locate the target.

When debugging small bugs, you can directly open CSS changes without having to open firebug to find the module.

Horizontal writing is based on CSS selectors. The levels are easy to compare and are more conducive to modularization. It is good for overall CSS planning and has low post-maintenance costs.

Facilitates comparison of different versions of CSS code.

Existing problem: The writing is too dense, which affects reading. This disadvantage is obvious, but as long as optimization is done properly, this situation will be rare.

Although with today's bandwidth, the size of a web page file in K is really insignificant, web designers should consider how to streamline the web page file in K to the minimum. One of the questions. Horizontal writing eliminates unnecessary spaces, line breaks, etc., greatly reducing the file size.

We can’t say which writing method is correct. As for the specific writing method, it depends on personal choice. Of course, changing habits may affect a person’s work efficiency. So what we advocate is: the CSS style file submitted is After code formatting, this work can be completely handed over to tools such as DW. As long as we click, the entire file will be presented as we imagined. Such code looks comfortable, is easy to modify, and subsequent handovers between team members will become smoother.

Recommended: "css video tutorial"

The above is the detailed content of Should css be written horizontally or vertically?. For more information, please follow other related articles on the PHP Chinese website!