CSS naming specification

  • The css rules that need to be reused should be oriented toward attribute naming as much as possible, and try not to add semantics.
.tr{text-align:right;}
. pb8{padding-bottom:8px;}
  • The selector should not contain hierarchy (#test .test) and tags (ul.test) as much as possible, which will limit reuse, such as #test .test{}This way of writing is completely limited to the element whose id is test, and it will also affect the rendering speed.
    The CSS rendering method is rendered “from right to left”, just take #test ul{} as an example , First render all the ul tags on the page, and then look for the element with the id of test, so people who appear #test div{} are stupid ×, the page first renders the element with the id of test? No! First render all the divs on the page, and then look for the element whose id is test.

  • All names should be lowercase and underlined

  • Common CSS style naming
    Jacket wrap, container —————— Peripheral controls the overall layout width
    Header —————-For the head
    br> Main content main ————for the main content (middle)
    Left main-left ————-Left layout
    Main-right on the right ———– Layout on the right
    Navigation bar nav subnav —————–Web menu navigation bar
    Menu menu submenu —————– Menu submenu
    content —————Used in the middle of the web page< br> Bottom footer —————–for the bottom

layout
tag tag

Refer to the naming of Tencent’s homepage:
Share pictures

< p>

Leave a Comment

Your email address will not be published.