Css modularization idea (I) -------- naming is a technical activity, css --------

Css modularization idea (I) -------- naming is a technical activity, css --------
Introduction:

Girls like to buy clothes, and I am no exception. But the wallet is too thin and I can't afford to buy high-end custom clothes. I can only buy casual clothes with extremely high shirts. But for me, I am still happy, after all, buying clothes is not only about clothes, but also about mood. In the world of web Front-end, css is also full of the art of life. They all say that Art Originates from life, but is higher than life, and is a kind of sublimation of life. In css, is it customized or modular production? This depends on various projects. This is a trade-off. Everything is inseparable from one degree. There is no best in the world, only the one that best suits you, and the same is true in the world of web Front-end.

If you are just a small blog of your own, you need to have your own personality. Because a blog is equivalent to your personal endorsement, many of them are personalized, and you need to create a style that suits your needs. However, most of the time is at work. For work, we need to consider two words-cooperation. In the face of a project that requires cooperation to be completed as soon as possible, this requires modular thinking, everyone needs a common standard. There is a shared library, not personalized code, but elegant code that is easy for team members to read and maintain. Css modularization involves all aspects, so I will unveil it a little bit! This article is about naming.

Article: What is the idea of css modularization? (What)

To understand the idea of css modularization, we should first understand what modularization is. In Baidu encyclopedia, modules are components that can be combined, decomposed, and replaced in the system structure. Modularization is a way to break down complex systems into better manageable modules. It can set different functions in different components to break down a problem into multiple small independent and interactive components to process complicated and large software. After reading the modularization, is there a visual effect of a piece of puzzle? You can divide the big picture into different small pictures, and then combine the small pictures into a big picture to divide and combine the artistic feeling. The idea of css modularization is to use the modular idea in the css compiling environment to break down a large project into independent components. Different components are responsible for different functions, finally, assemble the modules into the project we want to complete.

Why is css modularization required? (Why)

As a big project, several developers work together to develop code that doesn't understand each other's code. What should I do if I have already written the code and need to modify it. when code coupling and modification are time-consuming and labor-consuming, what should we do? When iteration is required and a huge amount of code is involved, what should we do? In this case, the idea of modularity is a rescue. Css writing is especially flexible, and it is easy to be coupled because of its flexibility. modular separation is required at this time. The advantages of css modularization are as follows:

Improve code reuse rate

Improve development efficiency and reduce communication costs

Improve page fault tolerance

Reduced Coupling

Release risk reduction

Reduces Bug Locating time and Fix costs

Better implementation and fast Iteration

Easy code Maintenance

......

How to Implement css modularization? (How)

There are many steps to Implement css modularization. Today we will talk about the first step, naming.

Looking at other people's code is like entering the other party's military base. If you want to use the weapon inside, you must first know the name of each weapon. If your weapon is used, even if you come to the base, you may not be able to touch your weapons, let alone fight. Therefore, we should standardize the naming in css and try to understand the team members at a glance.

Css naming optimization can be divided into css file name naming and css selector naming.

Css style File Name:

1)

Main master.css
Layout.css
Columns.css
Text font.css
Print Style print.css
Themes.css

2)

Reset.css // reset the default style of the browser
Layout.css // manage the page layout
Typeset.css // graphic orchestration
Color.css // unified Color Management
Print.css // print the effect Style
Ie.css // separate the hack of ie

3)

Reset.css
Header.css // All Headers
Container.css // the middle area style except the header and bottom
Footer.css // bottom style
Print.css
Ie.css

4)

Reset.css/* Page Style recharge */
Header.css/* Full site Header style */
Footer.css/* Full-site tail style */
Public.css/* Full-site public module style */
Index.css/* special homepage style */
Container.css/* second-level and following subject styles */
Print.css/* print style */
Ie.css/* IE hack */

And so on.

In other words, there is no best naming method, but only the most appropriate naming method. It mainly aims to quickly locate the html structure and bug and facilitate modification by other Members.

If your website is a news portal website, then the html structure is mainly layout, layout.css layout, columns.css column, font.css text, and print.css layout are suitable, because it is consistent with html, it also fits well.

For example, if it is an official enterprise website, the html structure generally has standard headers and tails, so the most suitable html structure is the third type. At the same time, we can optimize the third type, classify the container into common and layout to facilitate further modification. As for the common, you can add some common styles of font and color.

There is no perfect life, no perfect person, so there is no perfect file name, only try to fit with the html layout, and then focus on reflection from each project, summary, all the way to Rome, the mouse is a good cat.

 

Css selector naming:

Standardized css selector naming is a common topic. Its specification is not only a part of modular implementation, but also easy for team development and avoids compatibility issues. Because various browsers, IE, Firefox, Google, and safari

, Each browser, IE product, Firefox, safari, and coogle Chrome will produce different styles due to nonstandard naming ..

 

All CSS syntaxes are case-insensitive ASCII ranges (that is, I. e ., in [a-z] and [A-Z] is equivalent), except some do not fall under the control of CSS. For example, the font name and class of the case-sensitive attribute "ID" in HTML are within the scope of this specification. Note that the element name is a case-insensitive HTML but case-sensitive XML.
In CSS, the identifier (including the element name, category, and selected ID) can only contain characters [A-ZA-Z0-9] and ISO 10646 characters U + 00A0 high, with a hyphen (-) and underscore (_); they cannot start with a number, two hyphens, or a hyphen followed by a number. An identifier can also contain escape characters and any ISO 10646 characters as a numerical code (see the following section ). For example, the identifier "B & W ?" It can be written as "B \ & W \?" Or "B \ 26W rj0000\ 3F ". See section 4.1.3 of W3C CSS2.1. Link: http://www.w3.org/TR/CSS21/syndata.html#characters

Use the following code:

/* Header */content area/* End Header */

(3) id name:

(1) Page Structure

Container: container

Header: header

Content: content/container

Page subject: main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: column

Overall Layout width of the page peripheral control: wrapper

Left right center

(2) Navigation

Navigation: nav

Main navigation: mainbav

Subnavigation: subnav

Top navigation: topnav

Side navigation: sidebar

Left Navigation: leftsidebar

Right navigation: rightsidebar

Menu: menu

Sub menu: submenu

Title: title

Abstract: summary

(3) Functions

Logo: logo

Advertisement: banner

Login: login

Logon entry: loginbar

Registration: register

Search: search

Functional Area: shop (such as shopping cart)

Title: title

Join: joinus

Status: status

Button: btn

Scroll: scroll

Tab: tab

Article list: list

Message: msg

Current: current

Tips: tips

Icon: icon

Note: note

Guide: guide

Service: service

Hotspot: hot

News: news

Download: download

Vote: vote

Partner: partner

Link

Copyright: copyright

(4) class naming:

(1) color: use the color name or hexadecimal code, such

.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }

(2) font size: Use "font + font size" as the name, as shown in figure

.font10px { font-size: 10px; }.font6pt {font-size: 6pt; }

(3) alignment style. Use the English name of the alignment target, as shown in figure

.left { float:left; }.bottom { float:bottom; }

(4) use the "category + function" method to name the title bar style, as shown in figure

.barnews { }.barproduct { }

Note ::

I like the simple and elegant bootstrap style. For more information about css naming, see.

 

In particular, class naming:

 

• The class name can only contain lower-case characters and dashes (not underline or camper ). The break number should be used for the naming of the relevant class (similar to a namespace) (for example,.btnAnd.btn-danger).
• Avoid excessive abbreviations..btnRepresentativeButton,.sIt cannot express any meaning.
• The class name should be as short and meaningful as possible.
• Use a meaningful name. Use organizational or objective-specific names. Do not use presentational names.
• Use the latest parent class or base class as the prefix of the new class.
• Use.js-*Class to identify the behavior (relative to the style), and do not include these classes in CSS files.

 

Selector

• The use of class for general elements facilitates the optimization of rendering performance.
• For frequently-occurring components, do not use Attribute selectors (for example,[class^="..."]). Browser performance is affected by these factors.
• The selector should be as short as possible, and the number of elements that constitute the selector should be limited as much as possible. It is recommended that the value not exceed 3.
• OnlyWhen necessary, the class is restricted to the nearest parent element (that is, the descendant selector) (for example, if a class with a prefix is not used-the prefix is similar to a namespace ).

 

Css coding specifications can refer to http://codeguide.bootcss.com/

 

I am very happy to share with you and learn together. I have written it here today. I have a limited level and have some mistakes. please correct me. Thank you! --- Miaomiao.