Mozilla recommended CSS attribute writing order and naming rules

Source: Internet
Author: User

The legendary Mozilla recommendation

Java code
  1. /* mozilla.org Base Styles
  2. * Maintained by Fantasai
  3. */
  4. /* Suggested Order:
  5. * Display
  6. * List-style
  7. * Position
  8. * Float
  9. * Clear
  10. * Width
  11. * Height
  12. * Margin
  13. * Padding
  14. * Border
  15. * Background
  16. * Color
  17. * Font
  18. * Text-decoration
  19. * Text-align
  20. * Vertical-align
  21. * White-space
  22. * Other text
  23. * Content
  24. *
  25. */
  26. ...



Source:

Java code
    1. http://www.mozilla.org/css/base/content.css



In this article in Yiwen's blog, the above attributes are divided into three groups: Display properties, own attributes, and text attributes. In reply, ING added that this also relates to the parsing process of the browser: The browser first locates the DOM, parses its own properties, and then parses the inner object. (not found in the relevant English materials, some people also hope to inform)

In the Mozilla official, actually does not recommend any CSS writing order. It is likely that a developer reading Fantasai's article mozilla.org Markup Reference, and was interested in the Fantasai CSS source file, so it was discovered.
Alphabetical order

There are some good articles on nettuts, which is not, not so long ago, Trevor Davis shared an article: 5 Ways to instantly Write Better CSS. In this article, it is recommended that the properties of CSS be sorted alphabetically.

The advantage is: simple, anyone just abide by, one can understand.

The disadvantage is: too simple, lack of logic. For example, position, left, top, and so on, this kind of tightly related properties, if all alphabetically sorted, writing and maintenance is not convenient. Andy Ford's recommended sort

Andy Ford, an expert in HTML and CSS, recently wrote an article: Order of the Day:css Properties. The recommended CSS writing order for this article is:

Java code
  1. 1. Display & Flow
  2. 2. Positioning
  3. 3. Dimensions
  4. 4. Margins, Padding, Borders, Outline
  5. 5. Typographic Styles
  6. 6. Backgrounds
  7. 7. Opacity, Cursors, Generated Content
  8. Example:
  9. El {
  10. Display:;
  11. Visibility:;
  12. float:;
  13. Clear:;
  14. Position:;
  15. Top:;
  16. Right:;
  17. Bottom:;
  18. Left:;
  19. Z-index:;
  20. Width:;
  21. Min-width:;
  22. Max-width:;
  23. Height:;
  24. Min-height:;
  25. Max-height:;
  26. Overflow:;
  27. margin:;
  28. Margin-top:;
  29. Margin-right:;
  30. Margin-bottom:;
  31. Margin-left:;
  32. padding:;
  33. Padding-top:;
  34. Padding-right:;
  35. Padding-bottom:;
  36. Padding-left:;
  37. border:;
  38. Border-top:;
  39. Border-right:;
  40. Border-bottom:;
  41. Border-left:;
  42. Border-width:;
  43. Border-top-width:;
  44. Border-right-width:;
  45. Border-bottom-width:;
  46. Border-left-width:;
  47. Border-style:;
  48. Border-top-style:;
  49. Border-right-style:;
  50. Border-bottom-style:;
  51. Border-left-style:;
  52. Border-color:;
  53. Border-top-color:;
  54. Border-right-color:;
  55. Border-bottom-color:;
  56. Border-left-color:;
  57. Outline:;
  58. List-style:;
  59. Table-layout:;
  60. Caption-side:;
  61. Border-collapse:;
  62. Border-spacing:;
  63. Empty-cells:;
  64. Font:;
  65. Font-family:;
  66. Font-size:;
  67. Line-height:;
  68. Font-weight:;
  69. Text-align:;
  70. Text-indent:;
  71. Text-transform:;
  72. Text-decoration:;
  73. Letter-spacing:;
  74. Word-spacing:;
  75. White-space:;
  76. Vertical-align:;
  77. Color:;
  78. Background:;
  79. ;
  80. Background-image:;
  81. Background-repeat:;
  82. Background-position:;
  83. Opacity:;
  84. Cursor:;
  85. Content:;
  86. Quotes:;
  87. }



The order of Andy is generally consistent with the order recommended by Fantasai, but the details are more operable.
SitePoint also has a very warm discussion on the post: how does the order your properties within a declaration block?

I like the Fantasai and Andy's writing order, but in the Fantasai order, the "self" attribute is a little vague and Andy's is too thin to remember. I think the CSS 2.1 specification can be used for reference to the classification of CSS properties, the order of Andy slightly adjusted:

1. Properties that affect the flow of the document (e.g. display, position, float, clear, visibility, table-layout, etc.)
2. Properties of the Self-box model (e.g. width, height, margin, padding, border, etc.)
3. Typography related attributes (e.g. font, line-height, Text-align, text-indent, vertical-align, etc.)
4. Decorative properties (e.g. color, background, opacity, cursor, etc.)
5. Properties of the generated content (for example: content, List-style, quotes, etc.)

Things are never that simple, such as the following:

1. What do I do with shorthand? such as border:1px solid red; The border-width is related to the box model, but the border-color is decorative. How is it organized?
2. Considering the skin-changing function, should I put a color, background, border-color and other colors in a piece? To facilitate later modification.
3. How do I handle hacks? Do you put it in the last side of the CSS file, or with the properties of hack next to each other?
4. How do I annotate a newly added or modified property while maintaining a colleague's CSS file? How to write?
5. Also, considering the CSS Sprite, all the background map selectors are put together? However, this is beyond the topic of this article: the Order and organization of attributes within the CSS selector.
6. A further discussion is the structure of the CSS file, as well as the organization of multiple CSS files.


CSS Naming conventions:

CSS, like other programs, has the concept of scope, which has a global, class-local role in these ways.

As an example:

P{background: #f00;} /* Scope: Global */

. Div p{color: #000;} /* Scope: div class */

Introduction to several methods of writing CSS and weight comparison

1) Tag: Weight value is 0,0,0,1

2) Class: Weight value is 0,0,1,0

3) Attribute selection: Weight value is 0,0,1,1

4) ID: The weight value is 0,1,0,0

5) The weight of the important is the highest 1,0,0,0

I believe that when you write CSS, when the project is relatively large, the content of a lot of time, the name is a very headache, and a block inside to show the style of different states, which is a master naming rules is a tool, can let you work together with more effort. Roughly as follows: (Reprinted from: http://www.cssforest.org/blog/index.php?id=143, we can go here to see, more technical articles)

To avoid the loss of meaning when the state changes, the most common is the class name for the layout, such as "left" and "right", which is meaningless when the leftmost column is no longer the left column. This is contrary to what we recommend "naming to be meaningful", and the use of serial numbers is even more problematic. It seems to be true, but for a long time there is a problem that bothers me, if a page in the same module appears more than once, and the details are not the same, then what should be called after the name? Is "one", "one" and "the other" not serial number? In fact, we have to avoid the situation is that when the state (performance) changes, the corresponding definition of the class name will not lose meaning.

The so-called state (performance) changes, there are several situations:

1. The HTML is unchanged, and the style definition changes. If naming uses a name that represents a state, such as "Red", "font14", and so on, it is bound to cause the definition and naming do not match the situation, the subsequent impact will have a relatively large impact.
2. The style definition does not change, the HTML changes. HTML changes mean that the class name can be replaced, that is, if the class name uses a name that represents a state, it is more beneficial to modify.
3. The style definition and HTML are changed. Just consider not having the result of the first case.

And the actual situation is not a simple situation, more time is mixed with the appearance.
Rules

[Module Prefix] _ type _ (Action | state) n _ [position n]

Legend Description:

* (required): must exist.
* [OPTIONAL]: can be selected as required.
* |: Choose one more.
* N: can have more than one.

Noun Description:

Module prefix
The prefix used when the module is defined.
Type
Defines the content type of the class. such as input boxes, text, paragraphs, and so on.
Role
Defines the role of the class, which is used to supplement the type.
State
Defines the state of the class, which is used to supplement the type.
Position
Define the location used by the class, such as home page, navigation and so on, do not exclude the use of the left and right words, but should try to avoid.
* Each item can have its own abbreviation table, the same name abbreviation as far as possible unified.
* Select words that are not too specific to represent a certain state (such as color, size, etc.) to avoid the loss of meaning when the state changes.
* Consists of lowercase letters (A-Z) and Numbers (0-9) that do not begin with a number.
* Ensure that the reusability of the class (. Class) is unique to the object (#id), and the ID avoids the use of reserved words.

Cases:

Java code
  1. Module prefix:
  2. * Pop POPs
  3. * Public GLOBAL,GB
  4. * Title Title,tit
  5. * Hint hint
  6. * Menu
  7. * Info Info
  8. * Preview PVW
  9. * Tips Tips
  10. * Nav Nav
  11. Type:
  12. * Button BT
  13. * Text TX
  14. * Paragraph P
  15. * Icons icon
  16. * Input Input
  17. * Color Color,c
  18. * Background BG
  19. * Border Bor
  20. Role:
  21. * Setting Set
  22. * Adding add
  23. * Delete del
  24. * Operation op
  25. * Password PW
  26. * Import Inc
  27. State:
  28. * Successful SUC
  29. * Failure lost
  30. * Transparent Tran
  31. Position:
  32. * Public GB
  33. * Border Bor
  34. * Paragraph P
  35. * Pop POPs
  36. * Title Title,tit
  37. * Menu
  38. * Content cont
  39. * Nav Nav



Chinese interpretation naming        Chinese interpretation         naming   The
Text entry box. Input_tx paragraph text color       . c_tx_p 
Password entry box. INPUT_PW album pop-up settings layer. pop_set_ photo 
Login password entry box. Input_pw_login log Settings successful prompt. hint_suc_blogset 
text color. C_tx public tips. hint_gb 

Ask a few simple questions that can help us complete the naming:  

   1. "What type of definition?" "--is an input box.  
   2. "Type Supplemental Notes"--if a word is not clear, then the supplemental description type, text input box, Input_tx.  
   3. "Where to use?" "--Define where you want to use the location? Homepage of the Search text input box, Input_search_index.  

in conjunction with "modular" related methods to define, actually need to define the name does not need a lot. such as: "Hint_tx" indicates the text definition of the hint module, "hit_tx_hint" means the definition of the text in the hint, as to whether to change the color or bold, this depends on the needs of different cue modules.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.