CSS Modular Thinking-----Naming is a technical work

CSS modularization Idea (a)--------naming is a technical work

Introduction:

Girls are like to buy clothes, and I am no exception, but the wallet is too thin, can not afford to buy a tall on the custom, only to buy the high rate of wear clothes, but for me, I am happy, after all, buy clothes to buy not only clothes, but also a mood. In the world of Web front-end, CSS is also full of the art of life, all said that art from life, but higher than life, is a distillation of life, then in the CSS, is personalized custom good, or modular production good? This depends on the project, this is a trade-off, it is a degree of all, there is no best in the world, only the most suitable for their own, in the Web front-end of the world is also so.

If you are just doing your own small blog, then you need to have your own personality, because the blog is the equivalent of your personal endorsement, so many are personalized, and you need to be alone to create a suitable style. However, most of the time is in the work, for the work, it is necessary to consider two words-cooperation, in the face of a need to cooperate to complete the project as soon as possible, which requires a modular thinking, we need a common standard, there is a shared library, not a personalized code, It's an elegant code that makes it easy for team members to read and maintain. Since CSS modularity involves all aspects, I will uncover its mystery a little bit! This one is the first to talk about naming.

What is CSS modular thinking? (what)

In order to understand the CSS modular thinking, we first understand, what is modular, in the Baidu Encyclopedia explanation is, in the system structure, the module is can be combined, decomposition and replacement of the unit. Modularity is a way to deal with the decomposition of complex systems into better manageable modules. It can deal with complex, large-scale software by setting up different functions in different components, breaking down a problem into small, independent, interacting components. After reading the module, is not a kind of jigsaw puzzle is the sense of vision, you can divide the large map into small pictures, and then the small map into a large map, and the artistic sense of the combined. Then CSS modular thinking, that is, in the CSS authoring environment, with the idea of a modular, a large project, broken down into separate components, different components responsible for different functions, and finally the module assembly, we have to complete the project.

Why CSS modularity is required? (why)

As a large project, several people team cooperation development, the results do not understand each other's code, how to do, in person has written the code, need to modify, but nowhere to start, What to do. When the code is coupled, the changes are time-consuming and laborious, what to do, when the need to iterate, the face of huge code, lead the whole body of the tragic moment, how to do, the idea of modularity is the savior. CSS is particularly flexible and flexible, so it is easy to be coupled together, which requires a modular separation. So the CSS modularity benefits a lot, listed some of the following:

Increase code Reuse Rates

Improve development efficiency and reduce communication costs

Improve page fault tolerance

Reduced coupling

Reduce release risk

Reduce bug targeting time and fix cost

Better implementation of fast iterations

Easy Code Maintenance

。。。。。。

How to implement CSS Modularization? (how)

To implement CSS modularity takes a lot of steps, today we'll talk about the first step, named.

Look at other people's code, as if to enter the other's military base, to think of the weapons inside the handy, first must know the name of each weapon, if your weapons are taken dubious, then even came to the base, it is not afraid to move your weapons, let alone fighting, so, to standardize our name in the CSS, Try to do the team members can understand at a glance.

CSS naming optimization can be divided into the name of the CSS file name, as well as the name of the CSS selector.

CSS style file name:

1)

The main master.css
Layout, Layout layout.css
Column Columns.css
Text Font.css
Print style Print.css
Theme Themes.css

2)

RESET.CSS//Reset the browser's default style
LAYOUT.CSS//Manage the layout of the page
TYPESET.CSS//Graphic layout
COLOR.CSS//Unified management of color collocation
PRINT.CSS//Print effect style
IE.CSS//separate the hack from IE

3)

Reset.css
All styles of header.css//head
CONTAINER.CSS//Middle area style except head/Bottom
FOOTER.CSS//Bottom style
Print.css
Ie.css

4)

RESET.CSS/* Page style Reload */
HEADER.CSS/* Full station head style */
FOOTER.CSS/* Full station tail style */
PUBLIC.CSS/* Full station Public module style */
INDEX.CSS/* Home Unique style */
CONTAINER.CSS */* Level two and below body style */
PRINT.CSS/* Print style */
Ie.css/*ie hack*/

Wait a minute

Or that sentence, there is no best way to name, only the most appropriate way to name. The main thing is to think about the quick location of HTML structure and bugs and the modification of other members.

If your site is a news portal, then the structure of the HTML is mainly layout, layout layout.css, column columns.css, text font.css, print style print.css is more appropriate, because it is consistent with the HTML, but also very fit.

If it is the official website, the general HTML structure is the head and tail are standard, so with the HTML structure the most fit is the third kind, at the same time we can optimize the third, in the container inside again classification, divided into common,layout, convenient further modification, As for common, you can put font,color some common styles.

There is no perfect life, there is no perfect person, so there is no perfect file naming, only try to do with the HTML layout, and then re-examine from each project, summary, all roads through Rome, can catch the mouse is a good cat.

Name of CSS selector:

Standardizing the name of CSS selectors is a commonplace problem, the specification of it is not only a modular implementation of a link to facilitate team development, but also to circumvent some of the difficulties of compatibility. Because each browser, IE, Firefox, Google, Safari

, every browser, ie product, Firefox, Safari,coogle Chrome, will have different styles because of the naming nonstandard.

All CSS syntax is a case-insensitive ASCII range (i.e., i.e., [A-z] and [A-z] are equivalent), except for parts that are not under the control of CSS. For example, the font name and "class" of the case-sensitive attribute "ID" of the value in HTML, and the URI are within the scope of this specification. Note in particular that element names are case-insensitive HTML, but case-sensitive XML.
In CSS, identifiers (including element names, categories, and IDs in the selection) can only contain characters [a-za-z0-9] and ISO 10646 characters U + 00a0 high, plus hyphens (-) and underscores (_); they cannot start with a number, two hyphens, or a hyphen followed by a number. Identifiers can also contain escape characters and any ISO 10646 characters as a numeric code (see below). For example, the identifier "B&w?" Can be written as "B \&w \?" "or" B \ 26w¯¯\ 3F ". Please refer to the 4.1.3 section of CSS2.1, link address: http://www.w3.org/TR/CSS21/syndata.html#characters

By the following code:

The results in each browser are as follows:

IE6:

Ie7

Ie8

Firefox38.0.1

360 results, Google Chrome,safari,opera results agree as follows:

From the above intuitive understanding of the selection of the name of the browser under the support situation is different. Therefore, if the name of the selector is not standardized, it will affect the rendering effect under each browser. In order to be compatible with the above browsers, save trouble, we try to name start with a letter. are guaranteed to be compatible.

Common CSS Naming conventions

Head: Header

Content: Content/container

Tail: Footer

Navigation: Nav

Sidebar: Sidebar

Column: Column

Page perimeter control overall layout width: Wrapper

Middle: Left Right center

Login Strip: Loginbar

Logo: Logo

Ad: Banner

Page body: Main

Hotspot: Hot

Press: News

Download: Download

Sub-navigation: Subnav

Menus: Menu

Sub-menu: submenu

Searches: Search

Links: Friendlink

Footer: Footer

Copyrights: Copyright

Scrolling: Scroll

Contents: Content

Tabs page: Tab

Article List: List

Hint Message: MSG

Tip: Tips

Column Title: Title

Join: Joinus

Guide: Guild

Services: Service

Registration: Regsiter

State: Status

Vote: Vote

PARTNER: Partner

(b) The wording of the note:

/* Header */内容区/* End Header */

(c) The name of the ID:

(1) Page structure

Container: Container

Page Header: Header

Content: Content/container

Page body: Main

Page End: Footer

Navigation: Nav

Sidebar: Sidebar

Column: Column

Page perimeter control overall layout width: Wrapper

Middle: Left Right center

(2) Navigation

Navigation: Nav

Main navigation: MAINBAV

Sub-navigation: Subnav

Top Navigation: Topnav

Side navigation: Sidebar

Left navigation: Leftsidebar

Right navigation: Rightsidebar

Menus: Menu

Sub-menu: submenu

Caption: Title

Abstract: Summary

(3) function

Logo: Logo

Ad: Banner

Login: Login

Login Strip: Loginbar

Registration: Register

Searches: Search

Functional area: Shop

Caption: Title

Join: Joinus

State: Status

Button: BTN

Scrolling: Scroll

Tabs page: Tab

Article List: List

Hint Message: MSG

Present: Current

Tip: Tips

Icons: Icon

Note: note

Guide: Guild

Services: Service

Hotspot: Hot

Press: News

Download: Download

Vote: Vote

PARTNER: Partner

Links: Link

Copyrights: Copyright

(d) Name of class:

(1) Color: Use the name of the color or the 16 code, as shown in

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

(2) Font size, directly using "font+ font size" as the name, as

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

(3) Alignment style, using the English name of the alignment target, such as

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

(4) title bar style, named using "Category + function", as

.barnews { }.barproduct { }

Precautions::

1. All lowercase;
2. try to use English;
3. Do not add the middle bar and underline;
4. Try not to abbreviate;

I prefer the simple and elegant style of bootstrap. So CSS naming can also refer to.

Especially class naming:

• Only lowercase characters and dashes (Dashe) (not underscores, nor hump naming) can appear in class names. Dashes should be used for naming the relevant class (similar to namespaces) (for example, .btn and .btn-danger ).
• Avoid excessive arbitrary shorthand. .btnrepresents a button, but .s cannot express any meaning.
• The class name should be as short as possible and have a clear meaning.
• Use a meaningful name. Use an organized or purposeful name, and do not use the name of the representation (presentational).
• Prefix the new class based on the closest parent class or base class.
• Use .js-* class to identify the behavior (as opposed to the style), and do not include these classes in the CSS file.

Selector Selector

• Use class for common elements, which facilitates rendering performance optimizations.
• For frequently occurring components, avoid using the property selector (for example, [class^="..."] ). The performance of the browser is affected by these factors.
• The selector should be as short as possible, and limit the number of elements that make up the selector as much as possible, and do not recommend more than 3.
• The class is restricted to the nearest parent element (that is, the descendant selector) only when necessary (for example, when you do not use a prefixed class-the prefix is similar to a namespace).

CSS Coding specifications can refer to http://codeguide.bootcss.com/

From:http://www.cnblogs.com/webshare-hilda/p/4686067.html

CSS Modular Thinking-----Naming is a technical work