O estilo de programação é como a personalidade de uma pessoa. Diferentes programadores (designers) geralmente têm estilos de escrita diferentes. Um bom estilo é mais fácil de ser aceito pelos outros. Tomando como exemplo os temas do WordPress, podemos preferir usar arquivos de tema com bom estilo de código e alinhados ao nosso gosto. E o que fazemos quando temos que estudar aqueles arquivos CSS confusos e difíceis de ler? Você pode usar "Styleneat" para reorganizar e construir seletores, subseletores e propriedades CSS de acordo com uma estrutura em cascata, tornando o arquivo CSS mais organizado e legível. É mais fácil definir layouts de página e ver as relações entre diferentes estruturas.
O serviço de reorganização de formato de estrutura de arquivo CSS "
Styleneat " pode reorganizar arquivos CSS com estilos de escrita confusos em uma estrutura em cascata para facilitar sua leitura e pesquisa.
Você pode utilizá-lo de três maneiras diferentes: 1. Cole o código diretamente; 2. Carregue o arquivo CSS; 3. Insira o endereço do arquivo CSS; Existem também algumas configurações de opções: classificação em ordem alfabética por propriedades e seletores CSS;
Vamos dar uma olhada no efeito do uso:
Código original:
Exemplo de código-fonte
[www.downcodes.com]
#menubar .menus {
histórico:#E9EEF1;
flutuar:esquerda;
preenchimento:0 10px;
}
#menubar .menus li {
flutuar:esquerda;
estilo de borda: sólido;
cor da borda:#FFF;
largura da borda:0 1px;
margem esquerda:-1px;
tipo de estilo de lista: nenhum;
}
#menubar .menus li a { display:block;text-decoration:none;padding:5px 10px;}
#menubar .menus li a:hover {
histórico:#EEDDCC;
tipo de estilo de lista: nenhum;
}
#menubar .menus .current_page_item {
fundo:#FFF;
peso da fonte: negrito;
}
#menubar .menus li.current_page_item a:hover {
fundo:#FFF;
}
Código reestruturado:
Exemplo de código-fonte
[www.downcodes.com]
#menubar .menus {
histórico:#E9EEF1;
flutuar:esquerda;
preenchimento:0 10px;
#menubar .menus li {
flutuar:esquerda;
estilo de borda: sólido;
cor da borda:#FFF;
largura da borda:0 1px;
margem esquerda:-1px;
tipo de estilo de lista: nenhum;
#menubar .menus li a {
exibição: bloco;
decoração de texto: nenhum;
preenchimento:5px 10px;
#menubar .menus li a:hover {
histórico:#EEDDCC;
tipo de estilo de lista: nenhum;
#menubar .menus .current_page_item {
fundo:#FFF;
peso da fonte: negrito }
#menubar .menus li.current_page_item a:hover { background:#FFF };
