El estilo de programación es como la personalidad de una persona. Los diferentes programadores (diseñadores) a menudo tienen diferentes estilos de escritura. Un buen estilo es más fácil de aceptar para los demás. Tomando como ejemplo los temas de WordPress, es posible que prefiramos utilizar archivos de temas con un buen estilo de código y acorde a nuestro gusto. ¿Y qué hacemos cuando tenemos que estudiar esos archivos CSS desordenados y difíciles de leer? Puede utilizar "Styleneat" para reorganizar y crear selectores, subselectores y propiedades de CSS de acuerdo con una estructura en cascada, lo que hace que el archivo CSS sea más ordenado y legible. Es más fácil definir diseños de página y ver las relaciones entre diferentes estructuras.
El servicio de reorganización de formato de estructura de archivos CSS "
Styleneat " puede reorganizar archivos CSS con estilos de escritura desordenados en una estructura en cascada para facilitar su lectura e investigación. Es una herramienta en línea muy práctica.
Puede usarlo de tres maneras diferentes: 1. Pegue el código directamente; 2. Cargue el archivo CSS 3. Ingrese la dirección del archivo CSS; También hay algunas configuraciones de opciones: ordenar en orden alfabético por propiedades y selectores de CSS; reorganizar el formato de una sola o varias líneas;
Echemos un vistazo al efecto del uso:
Código original:
Código fuente de ejemplo
[www.downcodes.com]
#barra de menús .menús {
fondo:#E9EEF1;
flotador: izquierda;
relleno: 0 10px;
}
#barra de menús .menús li {
flotador: izquierda;
estilo de borde: sólido;
color del borde:#FFF;
ancho de borde: 0 1px;
margen izquierdo: -1px;
tipo de estilo de lista: ninguno;
}
#menubar .menus li a { display:block;text-decoration:none;padding:5px 10px;}
#barra de menús .menus li a:hover {
antecedentes:#EEDDCC;
tipo de estilo de lista: ninguno;
}
#barra de menús .menús .current_page_item {
fondo:#FFF;
peso de fuente: negrita;
}
#barra de menú .menus li.current_page_item a:hover {
fondo:#FFF;
}
Código reestructurado:
Código fuente de ejemplo
[www.downcodes.com]
#barra de menús .menús {
fondo:#E9EEF1;
flotador: izquierda;
relleno: 0 10px;
#barra de menús .menús li {
flotador: izquierda;
estilo de borde: sólido;
color del borde:#FFF;
ancho de borde: 0 1px;
margen izquierdo: -1px;
tipo de estilo de lista: ninguno;
#menubar .menus li a {
mostrar:bloquear;
decoración de texto: ninguna;
relleno: 5px 10px;
#barra de menús .menus li a:hover {
antecedentes:#EEDDCC;
tipo de estilo de lista: ninguno;
#barra de menús .menús .current_page_item {
fondo:#FFF;
peso de fuente: negrita }
#menubar .menus li.current_page_item a:hover { fondo:#FFF }
