Programming style is like a person's personality. Different programmers (designers) often have different writing styles. A good style is easier for others to accept. Taking WordPress themes as an example, we may prefer to use theme files with good code style and in line with our taste. And what do we do when we have to study those messy, hard-to-read CSS files? You can use "Styleneat" to reorganize and build CSS selectors, sub-selectors and properties according to a cascading structure, thereby making the CSS file more tidy and readable. It's easier to define page layouts and see the relationships between different structures.
"
Styleneat " CSS file structure format reorganization service can reorganize CSS files with messy writing styles into a cascading structure to facilitate your reading and research. It is a very practical online tool.
You can use it in three different ways: 1. Paste the code directly; 2. Upload the CSS file; 3. Enter the address of the CSS file. There are also some option settings: sorting in alphabetical order by CSS properties and selectors; reorganizing imported CSS; multi-line or single-line format; turning on safe reorganization mode.
Let's take a look at the effect of use:
Original code:
Example Source Code
[www.downcodes.com]
#menubar .menus {
background:#E9EEF1;
float:left;
padding:0 10px;
}
#menubar .menus li {
float:left;
border-style:solid;
border-color:#FFF;
border-width:0 1px;
margin-left:-1px;
list-style-type:none;
}
#menubar .menus li a { display:block;text-decoration:none;padding:5px 10px;}
#menubar .menus li a:hover {
background:#EEDDCC;
list-style-type:none;
}
#menubar .menus .current_page_item {
background:#FFF;
font-weight:bold;
}
#menubar .menus li.current_page_item a:hover {
background:#FFF;
}
Restructured code:
Example Source Code
[www.downcodes.com]
#menubar .menus {
background:#E9EEF1;
float:left;
padding:0 10px; }
#menubar .menus li {
float:left;
border-style:solid;
border-color:#FFF;
border-width:0 1px;
margin-left:-1px;
list-style-type:none; }
#menubar .menus li a {
display:block;
text-decoration:none;
padding:5px 10px; }
#menubar .menus li a:hover {
background:#EEDDCC;
list-style-type:none; }
#menubar .menus .current_page_item {
background:#FFF;
font-weight:bold; }
#menubar .menus li.current_page_item a:hover { background:#FFF; }