Naming Rules

  1. All names should be in lower case
  2. Attribute values must be enclosed in double quotation marks (“”) and must have values such as class=”app”,id=”app”
  3. Each tag should have a beginning and an end, and should have the right level of layout. For example: < div >
  4. Empty elements must have an ending tag or “/” after the beginning tag < br / >, < img / >
  5. Presentation is completely separate from structure, and there are no presentation elements in the code, such as style, font, bgColor, border, etc
  6. < H1 > to < h6 > should be defined from large to small, reflecting the structure of the document and facilitating search engine queries. Therefore, do not use the title tag to change the font size on the same line. Instead, we should use the cascading style sheet definition for a nice display.
  7. Alt tags images. The Alt attribute is a required attribute that specifies alternative text in case the image cannot be displayed. Suppose the user cannot view the image for any of the following reasons: the network speed is too slow, an error in the SRC attribute, the browser disables the image, or the user is using a screen reader.

Style attribute order

  1. Position: Position Z-index left right top bottom clip, etc.
  2. Attributes: width height min-height max-height min-width max-width
  3. Text styles: color font-size letter-spacing, color text-align, etc.
  4. Background: background-image border, etc.
  5. Text attributes: text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space The text – overflow, etc.
  6. Css3 attributes: Content, box-shadow, animation, border-radius, Transform, etc.
/* yes */ /* no */ .example { .example { z-index: -1; color: red; display: inline-block; background-color: #eee; font-size: 16px; display: inline-block; color: red; z-index: -1; background-color: #eee; font-size: 16px; }}Copy the code

CSS style writing specification

Use CSS abbreviation properties

Some CSS properties can be abbreviated, such as padding,margin,font, etc., to simplify code and improve the user’s reading experience. Remove the “0” in front of the decimal point Short name (the premise is to make people understand your name to abbreviate oh) Hexadecimal color code abbreviation Hyphenated CSS selector naming convention

  1. Long names or phrases can be named using a dash for the selector.
  2. It is not recommended to name CSS selectors with an “_” underscore. Why?
  • Press shift one less while typing;
  • Browser compatibility issues (such as using selector names for _tips, which are not valid in IE6);
  • Good at distinguishing JavaScript variable names (JS variable names are “_”).

  • function

  • state

The naming of id

Page structure

  • Container: the container
  • Header: header
  • Content: the content/container
  • Page body: main
  • Footer: the footer
  • Navigation: nav
  • Sidebar: the sidebar
  • Column: the column
  • The periphery of the page controls the overall layout width: Wrapper
  • Left right center: Left right Center (2) Navigation
  • Navigation: nav
  • Main navigation: MainNAV
  • Subnavigation: Subnav
  • Top navigation: TopNav
  • Side navigation: sidebar
  • Left navigation: leftsidebar
  • Right navigation: Rightsidebar
  • Menu: a menu
  • Submenu: submenu
  • Title: the title
  • Abstract: the summary

function

  • Mark: logo
  • Advertising: banner
  • Login: login
  • Loginbar: loginbar
  • Registration: register
  • Search: search
  • Functional area: Shop
  • Title: the title
  • Add: joinus
  • Status:
  • Button: BTN
  • Scrolling: scroll
  • TAB page: TAB
  • A list of articles
  • Prompt message: MSG
  • Current: current
  • Tip: Tips
  • Icon: icon
  • Note: note
  • Guide: guild.
  • Service: service
  • Hot, hot
  • News: news,
  • Download: download
  • Vote: vote
  • Partner: Partner
  • Link: Link
  • Copyright: copyright

CSS stylesheet file name

  • The main master. The CSS
  • Module module. The CSS
  • Base.css is shared
  • Layout, layout layout.css
  • Topic themes. CSS
  • Column in the columns. The CSS
  • The text font. CSS
  • Form the forms. The CSS
  • Patch mend. CSS
  • Print print. CSS

HTML 5 – the semantic

Text | small code elder brother

Pay attention to the object technology, hand in hand to the cloud of technology