Home > Developer > JavaScript
The CSS attribute writing sequence and naming rules recommended by Mozilla, mozillacss
The legendary Mozilla recommendation
Source:
In this article, Yunfei's Blog divides the above attributes into three groups: Display attributes, self attributes, and text attributes. In the reply, inG adds that this is also related to the browser's parsing process: the browser first locates the DOM, then parses its own attributes, and then parses the internal objects. (I have not found any relevant English documents. If you have any questions, I 'd like to inform you)
On the Mozilla official website, no CSS writing sequence is actually recommended. It is likely that when a developer reads fantasai's article ililla.org Markup Reference, he is interested in fantasai's CSS source files, so he discovered the above.
Letter Sorting
Some good articles on NETTUTS from time to time. Not long ago, Trevor Davis shared a article titled 5 Ways to Instantly Write Better CSS. In this article, we recommend that CSS attributes be sorted alphabetically.
Advantage: It is simple. Anyone can understand it at a glance.
Disadvantage: It is too simple and lacks logic. Such as position, left, top, and so on. If these closely related attributes are sorted alphabetically, it is inconvenient to write and maintain them. Ranking of Andy Ford recommendations
Andy Ford is an expert in HTML and CSS. He recently wrote an article titled Order of the Day: CSS Properties. the CSS writing sequence recommended in this article is:
The order of Andy is basically the same as that of fantasai recommendations, but the details are more operable.
There is also a heated discussion post on SitePoint: How do you order your properties within a declaration block?
I like the order of writing fantasai and Andy, but in the order of fantasai, the attributes of "oneself" are a bit ambiguous, and Andy's attributes are too small to remember. I think we can use the CSS attribute classification in CSS 2.1 Specification to slightly adjust the order of Andy:
1. attributes that affect the Document Stream (such as display, position, float, clear, visibility, and table-layout)
2. attributes of the Box Model (such as width, height, margin, padding, and border)
3. Typographical attributes (such as font, line-height, text-align, text-indent, vertical-align, etc)
4. Decorative attributes (such as color, background, opacity, and cursor)
5. attributes of the generated content (such as content, list-style, and quotes)
Things are never that simple, such as the following troubles:
1. How to Deal With shorthand? For example, border: 1px solid red; border-width is related to the box model, but border-color is decorative. How to organize it?
2. Should color, background, border-color, and other color-related items be included in the skin swap function? To facilitate future modification.
3. What should I do with hacks? Put it at the end of the css file, or is it close to the hack attribute?
4. How do I comment out newly added or modified attributes when maintaining my colleagues' css files? How to write?
5. Also, considering CSS Sprite, all background image selectors are put together? However, this is beyond the topic of this article: the order and organization of attributes in the CSS selector.
6. Further discussion is the structure of CSS files and the organization of multiple CSS files.
CSS naming rules:
Like other programs, Css has the concept of scope, which has global and class local effects.
For example:
P {background: # f00;}/* scope: Global */
. Div p {color: #000;}/* scope: div class */
This article introduces several Css coding methods and weight comparison.
1) label: Weight: 0, 0, 1
2) Class: The weight is 0, 0
3) attribute Selection: The weight is 0, 0
4) ID: The weight is 0, 1, 0, 0
5) important has a maximum weight of, and 0.
I believe that when writing Css, naming is a headache when the project is large and the content is large, and a block must show different states of styles, it is a powerful tool to master naming rules, so that you can get twice the result with half the effort. Roughly as follows: (reproduced from: http://www.cssforest.org/blog/index. php? Id = 143. You can read more technical articles here)
To avoid meaningless names when the status changes, the most common class names are used for layout, such as "left" and "right". When the left sidebar is no longer the left sidebar, "left" is meaningless. This is in conflict with the recommended "name must be meaningful", and the use of serial numbers is even more problematic. It seems correct, but for a long time there was a problem that bothered me very much. If the same module appears more than once on a page, and the details are different, what is the name next to it? Isn't "one" or "two" a sequence number? In fact, when the status (performance) changes, the corresponding class name will not be meaningless.
There are several situations in which the status (performance) changes:
1. the HTML remains unchanged, and the style definition changes. If a name is used to indicate a certain State, such as "red" and "font14", the definition and name may not match, the impact on the future will have a greater impact.
2. The style definition remains unchanged, and the HTML changes. HTML change means that the class name can be changed, that is, if the class name represents a State name, it is more conducive to modification.
3. The style definition and HTML are both changed. You only need to consider the result of the first case.
However, the actual situation is not simply a case, but more often it is mixed up.
Rules
[Module prefix] _ type_( function | status) n _ [location n]
Legend description:
* (Required): it must exist.
* [Optional]: Optional.
* |: Select one or more.
* N: Multiple instances are allowed.
Glossary:
Module prefix
The prefix used when the module is defined.
Type
Defines the content type of a class. Such as input boxes, text, and paragraphs.
Function
Defines the role of a class to supplement the type.
Status
Defines the status of the class to supplement the type.
Location
Define the position used by the class, such as the home page and navigation. do not exclude words such as left and right, but avoid them as much as possible.
* Each item can have its own abbreviation table. The abbreviations of the same name should be as uniform as possible.
* You must select words that are not specific to a certain State (such as color and size) to avoid meaningless names when the state changes.
* It consists of lowercase letters (a-z) and numbers (0-9) that do not start with a number.
* Ensure the reusability of the class (. class) and the uniqueness of the object (# id). Do not use reserved words for the id.
Example:
Description: naming
Text input box. input_tx paragraph text color. c_tx_p
Password Input box. The setting layer popped up by input_pw album. pop_set_photo
In the logon password input box, the message ". hint_suc_blogset" is displayed when the input_pw_login log settings are successful.
Text color. c_tx public prompt. hint_gb
A few simple questions can help us complete the naming:
1. "What type of definition ?" -- Is an input box, input.
2. "Type supplementary description"-if the description of a word is unclear, the supplementary description type, text input box, And input_tx are provided.
3. "Where to use ?" -- Define the location where to use it? Search text input box on the homepage, input_search_index.
In combination with methods related to "modularization", there is not much name to be defined. For example, "hint_tx" indicates the text definition of the prompt module, and "hit_tx_hint" indicates the definition emphasized by the text in the prompt, so that the color is changed or bold. This depends on the needs of different prompt modules.
<Html>
<Body>
<Div style = "width: 300px; height: 100px; background: #111"> </div> <div style = "width: 300px; height: 100px; "> <div style =" width: 100px; height: 100px; float: left; background: #222 "> </div> <div style =" width: 100px; height: 100px; float: left; background: #333 "> </div> <div style =" width: 100px; height: 100px; float: left; background: #444 "> </div> <div style =" width: 300px; height: 100px; background: #555 "> </div>
</Body>
</Html>
What are the naming rules for div + CSS?
There are many terms in web page creation, such as CSS, HTML, DHTML, and XHTML. In the following article, we will use some basic knowledge about HTML. Before you start this tutorial, make sure that you have a certain HTML base. Next we will start to use DIV + CSS for webpage layout design step by step.
The first step of all designs is to design and design a good idea. In general, image processing software such as PhotoShop or FireWorks (PS or FW) needs to be used to make a simple layout of the interface, the following figure shows the interface layout I have designed.
Next, we need to plan the page layout based on the Concept diagram. After carefully analyzing the figure, we can easily find that the picture is roughly divided into the following parts:
1. The top part includes the LOGO, MENU, and a Banner image;
2. The content can be divided into the sidebar and subject content;
3. the bottom part includes some copyright information.
With the above analysis, we can easily layout it. Our design layer is as follows:
According to this, I drew another actual page layout diagram to illustrate the nested relationship at the lower layer, which makes it easier to understand.
The DIV structure is as follows:
│ Body {}/* This is an HTML element, which I will not describe */
Container # Container {}/* Page-layer Container */
Response # Header {}/* page Header */
Response # PageBody {}/* Page subject */
│ Navigation # Sidebar {}/* Sidebar */
│ Entity # MainBody {}/* subject content */
Footer # Footer {}/* at the bottom of the page */
Now, the page layout and planning have been completed. What we need to do next is to start writing HTML code and CSS.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
