Css проверка дублирования кода

Валидатор CSS

Онлайн Валидатор CSS поможет вам проверить CSS код и найти предупреждения, ошибки, которые могут быть исправлены.

Ошибки

• Требовать свойства, подходящие для display
• Остерегайтесь разбитого размера бокса
• Запретить пустые правила
• Запретить дублирование свойств
• Требовать использования известных свойств

Совместимость

• Запретить box-sizing
• Запретить соседние классы
• Требовать все определения градиентов
• Требовать совместимые префиксы поставщиков
• Требовать стандартное свойство с префиксом поставщика
• Запретить отрицательный text-indent
• Запретить star хак
• Требовать резервные цвета
• Bullet-proof @font-face
• Запретить хак с подчеркиванием

Производительность

• Запретить @import
• Не используйте слишком много веб-шрифтов
• Запретить селектора, которые выглядят как регулярные выражения
• Запретить дублирование фоновых изображений
• Запретить неквалифицированные селектора атрибутов
• Запретить универсальный селектор
• Запретить сверхквалифицированные элементы
• Запретить единицы для 0 значений
• Требовать сокращенные свойства

Работоспособность и Дублирование

• Не использовать слишком много размеров шрифта
• Запретить слишком много float
• Запретить !important
• Запретить идентификаторы в селекторах

Доступность

OOCSS

• Заголовок должен быть определен только один раз
• Запретить квалифицированные заголовки

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Reduce Similar & Duplicated CSS Classes with Diff in Seconds!

License

ruilisi/css-checker

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

CSS Checker — Less is More

css-checker checks your CSS styles for duplications and finds the diff among CSS classes with high similarity in seconds. It is designed to avoid redundantly or similar css and styled components between files and to work well for both local developments, and for automation like CI.

Similarity check, duplication check, colors check, long lines warning are supported by default. Styled components check, Unused CSS check can be enabled optionally. CSS checker can help reduce CSS code for developers in seconds.

go install github.com/ruilisi/css-checker@latest 

(With go version before 1.17, use go get github.com/ruilisi/css-checker ). Or download from releases

npm install -g css-checker-kit 

(Check and show the diff among similar classes (>=80%). Colors, long scripts that are used more than once will also be pointed out by default. Check css-checker -help for customized options.)

• Colors with rgb/rgba/hsl/hsla/hex will be converted to rbga and compared together.
• (Alpha Feature: Find classes that are not referred to by your code): css-checker -unused

• CSS-Checker ignores paths in .gitignore by default (You can disable this to read all files by using -unrestricted=true ).
• For adding extra paths to ignore, using: -ignores=node_modules,packages .

• css-checker.yaml : CSS-Checker read this yaml file in your project path for settings, you can use parameters in Basic Commands sections to set up this file (without the leading ‘-‘).
• A sample yaml file named ‘css-checker.example.yaml’ is also provided in this project, move it to your project path with the name ‘css-checker.yaml’ and it will work.
• To specify your config file, use -config=YOUR_CONFIG_FILE_PATH .

• Run with styled components check only (without checks for css): css-checker -css=false -styled
• Find classes that not referred by your code: css-checker -unused (Alpha)

• colors : whether to check colors (default true)
• css : whether to check css files (default true as you expected)
• config : set configuration file path (string, default ‘./css-checker.yaml’)
• ignores : paths and files to be ignored (e.g. node_modules,*.example.css) (string, default »)
• length-threshold : Min length of a single style value (no including the key) that to be considered as long script line (default 20)
• long-line : whether to check duplicated long script lines (default true)
• path : set path to files, default to be current folder (default «.»)
• sections : whether to check css class duplications (default true)
• sim : whether to check similar css classes (default true)
• sim-threshold : Threshold for Similarity Check ( $\geq20$ && $\lt100$ ) (int only, e.g. 80 for 80%, checks for identical classes defined in sections ) (default 80)
• styled : checks for styled components (default false)
• unrestricted : search all files (gitignore)
• unused : whether to check unused classes (Beta)
• version : prints current version and exits
• to-file : wherther generate a html file (default true)
• file-name : if to-file is true, set the html file name(default css-checker.html)

How to get similarities between classes?

1. Hash each line of class (aka. section in our code), Generate map: LineHash -> Section .
2. Convert map LineHash -> Section => [SectionIndex1][SectionIndex2] -> Duplicated Hashes , section stands for css class.
3. In map: [SectionIndex1][SectionIndex2] -> Duplicated Hashes , number of the duplicated hashes stands for duplicated lines between classes.

Check similarities ( $\geq(sim-threshold)$ && $\lt100$ ) between classes. This will print the same line in between classes.

• $sim-threshold$ : using -sim-threshold= params or setting sim-threshold: in config yaml file, default 80, min 20.

Similar to Similarity Check but put those classes that are totally identical to each other.

Long scripts can be saved as variables to make your life easier. This will only alert when long lines are used for more than once.

Check colors in HEX/RGB/RGBA/HSL/HSLA that are used more than once in your code. As for supporting of different themes and possibly future updates of your color set, you may consider putting them as CSS variables.

Ugly output in PowerShell

From PowerShell, paste the following script and run it to activate ANSI escape sequences , then restart your PowerShell.

Set-ItemProperty HKCU:\Console VirtualTerminalLevel -Type DWORD 1 

About

Reduce Similar & Duplicated CSS Classes with Diff in Seconds!

Источник

Как проверить дублирующие правила CSS?

Я испортил свой css, и как-то у меня есть много дубликатов правил, а мой 1800 строк css файла теперь имеет 3000 строк.

Есть ли способ/инструмент, который будет использовать мой файл css в качестве входных данных и проверять все повторяющиеся правила? и, возможно, сгенерировать css, удалив эти избыточности?

ОТВЕТЫ

Ответ 1

если вы уже установили Node js или после установки открытого окна командной строки Node, введя node (на машине Windows) в начале.

Введите следующую команду для установки средства очистки css

После установки инструмента

Откройте папку, в которой открыто окно командной строки Node, и вставьте туда css файл, а затем введите следующую команду в окне Node cmd prompt

css-purge -i style.css -o style_purged.css

где style.css — это имя испорченного css файла, приведенная выше команда создаст новый файл css с именем style_purged.css, который не содержит повторяющихся правил css.

Но будьте осторожны, он также удалит ваши комментарии. https://www.npmjs.com/package/css-purge

Ответ 2

Вы пробовали CSS Lint? Нажмите стрелку на Lint! и он откроет некоторые параметры, с которыми вы можете играть. Убедитесь, что отмечен флажок «Запретить повторяющиеся свойства»

Ответ 3

Я попробовал несколько инструментов, таких как CSSLint и CSSBurner. Я также пробовал CSS Validator от W3C, который мне не нравится.

Одна вещь, которая мне нравится в CSSBurner, заключается в том, что она имеет цветную кодировку и позволяет вам быстро просматривать все ваши ошибки и повторять. Я нашел все свои повторения (и другие вещи) очень быстро.

Источник

Css проверка дублирования кода

Здесь собраны онлайн-инструменты для работы с CSS

• 

Бесплатный онлайн-генератор графики для продающих сайтов

С помощью генератора вы за считанные секунды сможете сгенерировать красивые кнопки, заголовки, блоки специальных предложений, а также гарантии, и все это с любым текстом, который вы сами напишите.

Создан: 30 Августа 2016 Просмотров: 18263 Комментариев: 0

Продвинутый Онлайн CSS3 Генератор

EnjoyCSS — это мощный генератор CSS3 кода. Данный сервис позволит вам без единой строчки кода создать прикольные стили для пользовательского интерфейса.

Онлайн сервис для проверки кода — jsFiddle

Онлайн сервис для проверки и демонстрации идей в программировании веб ресурсов. Можно подключать различные популярные библиотеки и делиться кодом с коллегами и мировым сообществом.

Создан: 7 Февраля 2013 Просмотров: 202453 Комментариев: 1

Онлайн-сервис для рефакторинга CSS кода

Проект для рефакторинга и генерации нового кода для работающего сайта. Основное назначение — устранение повторений, противоречий и создание основы для дальнейшего развития проекта.

Создан: 4 Февраля 2013 Просмотров: 22918 Комментариев: 5

Набор онлайн генераторов для подготовки элементов интерфейса — UIParade

Отличный набор из онлайн генераторов, которые облегчат труд веб мастера. В наборе имеется 4 инструмента — для кнопок, для форм, для иконок и для лент. Настраиваем внешний вид в визуальном редакторе и копируем код в свой проект.

Создан: 24 Января 2013 Просмотров: 23892 Комментариев: 0

Онлайн сервис для подготовки наборов свойств CSS3

Онлайн сервис с интерфейсом в стиле Photoshop для визуальной установки значений свойств CSS3 — теней, радиусов обводки и прочего. Готовый код копируем и используем в своем проекте.

Создан: 21 Января 2013 Просмотров: 19090 Комментариев: 2

Генератор спрайтов — Stitches

Онлайн генератор спрайтов CSS. Изображения можно «перетаскивать» в специальную зону. Код генератора доступен в форме плагина jQuery, что открывает возможности по использованию функционала в своих приложениях.

Источник