5 tips for writing CSS to make your style more standardized
|
1. Arrange CSS in alphabetical order Not in alphabetical order: Copy code The code is as follows:div#header h1 { z-index: 101; color: #000;: position: relative; line-height: 24px; margin-right: 48px; border-bottom: 1px solid #dedede; font-size: 18px; } In alphabetical order: Copy code The code is as follows:div#header h1 { border-bottom: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin-right: 48px; position: relative; z-index: 101; } The reason is this: it is better to find a certain attribute. 2. Better organize CSS structure <br />Use CSS comments to group CSS, so that the structure is clear and conducive to collaborative design. /****Reset****/ xxxxxxx{www.sytm.net} xxxxx{xxxxx} /*****layouts*****/ xxxxxxx{www.sytm.net} xxxxx{xxxxx} 3. Be consistent <br />Don't waste time discussing whether it is better to write all attributes of a selector on one line or each attribute on one line. If you like to write on one line, because writing one line per row will make the whole document feel too long and inconvenient to find. But when I send it to another person in the team, he likes to have each sentence on one line. What should I do? It is actually very simple. Just send the CSS to W3C for verification, and it will produce a result that will be automatically converted into each row. 4. Markup first, CSS later It will be less error-prone if you finish the HTML markup before writing CSS. For example, when writing a page, first write a basic tag structure <body> Copy code The code is as follows:<div id="wrapper"> <div id="header"><!--end #header--> <div id="container"> <div id="content"> </div><!--end #content--> <div id="sidebar"> </div><!--end #sidebarr--> </div><!--end #container--> <div id="footer"> </div>!<--end #footer--> </div><!--end #wrapper--> </body> Then try to make good use of child selectors instead of adding a selector to each element you want to style. 5. CSS Reset <br />You can copy Eric Meyer Reset, YUI Reset or other css reset, but you should then change it to your own reset according to your project. * { margin: 0; padding: 0; } This sentence does not apply to some elements such as radio buttons, but if there are radio buttons, you can just reset them. |
<<: Summary of the knowledge of embedding instructions that Vue engineers must encapsulate
>>: HTML (css style specification) must read
Recommend
Semantic web pages XHTML semantic markup
Another important aspect of separating structure ...
What is a MySQL tablespace?
The topic I want to share with you today is: &quo...
Solve the Chinese garbled problem of mysql5.5 database command line under Windows 10
After resetting the system, the MySQL database th...
mysql wildcard (sql advanced filtering)
Table of contents First, let's briefly introd...
Two ways to install Python3 on Linux servers
First method Alibaba Cloud and Baidu Cloud server...
Comprehensive inventory of important log files in MySQL
Table of contents Introduction Log classification...
MySQL scheduled backup solution (using Linux crontab)
Preface Although some love in this world has a pr...
How to modify the default network segment of Docker0 bridge in Docker
1. Background When the Docker service is started,...
Detailed explanation of MySQL Group by optimization
Table of contents Standard execution process opti...
How to modify mysql to allow remote connections
Regarding the issue of MySQL remote connection, w...
RHEL7.5 mysql 8.0.11 installation tutorial
This article records the installation tutorial of...
Vue uses canvas to realize image compression upload
This article shares the specific code of Vue usin...
Complete steps for Nginx to configure anti-hotlinking
need: Usually, sites want to prevent videos and p...
6 Practical Tips for TypeScript Development
Table of contents 1. Determine the entity type be...
A brief understanding of several scheduling algorithms for Nginx seven-layer load balancing
This article mainly introduces several scheduling...