Стиль программирования похож на личность человека. Разные программисты (дизайнеры) часто имеют разные стили письма. Хороший стиль легче принять другим. Взяв в качестве примера темы WordPress, мы можем предпочесть использовать файлы тем с хорошим стилем кода и в соответствии с нашим вкусом. И что нам делать, когда нам приходится изучать эти беспорядочные, трудно читаемые CSS-файлы? Вы можете использовать «Styleneat» для реорганизации и создания селекторов, подселекторов и свойств CSS в соответствии с каскадной структурой, что делает CSS-файл более аккуратным и читаемым. Облегчается определение макетов страниц и просмотр взаимосвязей между различными структурами.
Служба реорганизации структуры файлов CSS «
Styleneat » может реорганизовать файлы CSS с беспорядочными стилями написания в каскадную структуру, чтобы облегчить вам чтение и исследование. Это очень практичный онлайн-инструмент.
Вы можете использовать его тремя разными способами: 1. Вставить код напрямую. 2. Загрузите файл CSS. 3. Введите адрес файла CSS; Также есть некоторые настройки: сортировка в алфавитном порядке по свойствам и селекторам CSS; реорганизация импортированного многострочного или однострочного формата; включение безопасного режима реорганизации;
Давайте посмотрим на эффект от использования:
Исходный код:
Пример исходного кода
[www.downcodes.com]
#menubar .menus {
фон:#E9EEF1;
плавать: влево;
отступ: 0 10 пикселей;
}
#menubar .menus li {
плавать: влево;
стиль границы: сплошной;
цвет границы:#FFF;
ширина границы:0 1px;
поле слева:-1px;
тип стиля списка: нет;
}
#menubar .menus li a { display:block;text-decoration:none;padding:5px 10px;}
#menubar .menus li a:hover {
фон:#EEDDCC;
тип стиля списка: нет;
}
#menubar .menus .current_page_item {
фон: #FFF;
шрифт-вес: жирный;
}
#menubar .menus li.current_page_item a:hover {
фон: #FFF;
}
Реструктурированный код:
Пример исходного кода
[www.downcodes.com]
#menubar .menus {
фон:#E9EEF1;
плавать: влево;
отступ: 0 10 пикселей }
#menubar .menus li {
плавать: влево;
стиль границы: сплошной;
цвет границы:#FFF;
ширина границы:0 1px;
поле слева:-1px;
тип списка-стиля: нет }
#menubar .menus li a {
дисплей: блок;
текстовое оформление: нет;
отступ: 5 пикселей 10 пикселей };
#menubar .menus li a:hover {
фон:#EEDDCC;
тип списка-стиля: нет }
#menubar .menus .current_page_item {
фон: #FFF;
шрифт-вес: жирный };
#menubar .menus li.current_page_item a:hover {background:#FFF;
