Chapter 4: THE CSS specification

4.1 Introduction to the CSS Specifications

  • Normalized code is easier to read and reduces maintenance costs, whether modifying existing code or extending new code.
  • The problem of code normalization is often highlighted in large-scale project collaboration. One person’s code is hard to understand and nobody knows it, but in a team of 100 people, everyone is writing bad code, and the project is going to get stuck.

4.2 Naming Conventions

4.2.1 Naming CSS Files

Note: During the development phase, we usually put the CSS snippets with different functions into separate files for easy development and modification. When published, a tool compresses multiple CSS files into a single file, preventing the page from causing multiple HTTP requests to load multiple files.

  • Common CSS file names:
The file name instructions
reset.css Resets the default style of the element for different browsers
gloal.css Global style, which specifies the base style of the page
themes.css Theme style, can achieve skin function
module.css Module style
master.css Master page style
columns.css Column page style
forms.css The form style
mend.css Patch style, used to maintain, modify style
print.css Print style, the style used for printing

4.2.2 ID and Class Naming

  • Page IDS and classes affect search engine optimization, and if a page element is named haphazard and the spider gets lost, it will be less likely to visit your site in the future.
  • There are three common ways to name ids and classes:
    • Hump nomenclature (subLeftMenu);
    • Underlined nomenclature (sub-left-menu);
    • Underscore naming (sub_left_menu);
  • Considerations for id and class naming:
    • Use English names instead of Pinyin;
    • Try not to abbreviate, or use common abbreviations, such asnav;
    • Keep the naming standard unified, do not mix with a variety of naming methods;
    • To avoid duplication of class names, it is common to use the class name of the parent element as the prefix; 
      <div class="column">
    <h3 class="column-title"></h3>
    <div class="column-content"></div>
</div>
Copy the code
  • Use common page body names for reference:
Page section named
The outermost layer Wrapper (usually used to wrap entire pages)
The head header
content content
The sidebar sidebar
mark logo
The navigation bar nav
The main navigation main-nav
The subnavigation sub-nav
The main body main
The main body on the left side of the main-left
The main body on the right side main-right
The menu menu
Sub menu sub-menu
The title title
Abstract summary
search search
TAB tab
advertising banner
Related articles related
At the bottom of the footer
link friendlink
Join us joinus
copyright copyright
service service
landing login
registered register

4.3 Writing Specifications

  • For common CSS code, it is recommended to write CSS in the following order:
Attribute category For example,
Properties that affect document flow (layout properties) Display, position, float, clear, etc
Box model properties of its own Width, height, padding, margin, border, overflow, etc
Textual attribute Font, line-height, text-align, text-indent, vertical-align, etc
Decorative attribute Color, background-color, opacity, cursor, etc
other Content, list-style, quotes, etc
  • This doesn’t mean you should write your CSS in this order. You can define the attributes of the box model first and then the layout attributes of the elements, but when you finally submit your code, the CSS styles of the elements should be in this order. In short, focus on “writing results,” not “writing process.”
  • Case study:
#main{/* Layout attributes */ display:inline-block; position:absolute; top:0; left:0; /* Box model attributes */ width:100px; height:100px; border:1px solid gray; Font-size :15px; font-weight:boder; text-indent:2em; /* Color :# FFF; backgroud-color:Red; /* Other attributes */ cursor:pointer; }Copy the code
  • In addition to plain CSS code, there is CSS code that is specifically designed for specific functions, such as centering single lines of text, centering block elements, and so on. You can write this CSS code in a separate order instead of following the order mentioned above. For example:
#main{/* Layout attributes */ float:left; width:100px; /* Single line of text centered */ height:50px; line-height:50px; }Copy the code

4.4 Comment Specifications

  • A comment at the top of a file usually contains a description of the file, a version update of the file, an author, and a copyright notice:
/* * @description: description * @author: author * @update: update time, such as 2018-01-28 */Copy the code
  • Module comments are comments on individual page component modules (e.g., navigation, bottom information bar), generally indicating the “start” and “end” of the code:
/* Navigation bar code, start */........ /* Navigation bar code, end */Copy the code
  • In addition, we can add single/multi-line comments to critical code:
/* Single-line comment content */ /* * multi-line comment content */Copy the code
  • When a project is released, tools often remove all comments from the code, but by adding an exclamation mark to the comments, you can keep the comments:
/ *! *! Release version: V1.1 *! Time: 2018-01-28 */Copy the code

4.5 CSS reset

  • The default style of HTML elements is different in different browsers, which can cause major problems for development. The solution to this vexing problem is to remove the default styles of HTML elements in the browser (CSS reset).
  • We do not recommend performing CSS reset directly through wildcards, such as*{padding:0; margin:0; }Because it queries and modifies the style attributes of all elements, performance is low. Here we recommend using Eric Meyer’s postResetting the style sheet.
  • Note the following:
    • CSS reset is the premise of all style code, so it makes sense to put the CSS reset snippet first.
    • Instead of simply copying and pasting into the project, you should adjust the use of the reset style sheet according to the specific situation of the project.