Css — Создаем чистильщик css, open source!


Содержание

Очистка кодовой базы CSS

Вы только что присоединились к существующему проекту для замены уходящего разработчика. А может просто занялись своим старым проектом спустя несколько лет. Вы ощущаете ужас и отвращение при взгляде на код. Вы можете сделать только одно: расчистить весь этот бардак. Вы уже сталкивались с чем-то подобным? Почти наверняка, рано или поздно с этим сталкиваются все.

Вы знаете, что очистка кода CSS это объемная задача. Нужно сделать многое за ограниченное время — особенно, когда клиенты/начальники/коллеги настойчиво советуют не трогать то, что работает. Вы даже не знаете с чего начать.

Но сегодня удача на вашей стороне — я готов поделиться с вами своими решениями по очистке кода и дать вам советы по их использованию. На самом деле все сводится к простейшим вещам.

Линтинг это наше все

В этом разделе я буду исходить из того, что вы используете Sass. И не только потому, что это разумное предположение в нынешних условиях, но также по причине того, что неправильное использование Sass часто является причиной загрязнения кодовой базы. Хотя эта статья будет полезна и тем, кто не пользуется препроцессорами, поэтому вам стоит дочитать ее до конца.

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

В Sass есть написанный на Ruby линтер, называемый SCSS-lint. Вы можете настроить его самостоятельно или скачать конфигурацию, рекомендованную Sass-Guidelines, чтобы начать прямо сейчас. Также в Node.js есть sass-lint, они не на 100% совместимы и могут работать по-разному.

Попробуйте запустить SCSS-Lint в своем каталоге с файлами Sass для выявления ошибок. Очень высоки шансы на то, что на вас вывалится тонна ошибок. Обычно после этого хочется прекратить эксперименты по очистке кода. Наберитесь терпения. Сейчас вы можете попытаться сделать конфигурацию менее строгой в отношении правил, не очень важных для вас (типа формата задания цвета) или взять быка за рога и использовать всю мощь линтинга.

Исправление найденных ошибок

Пришло время исправить, то, что нужно исправить. Это можно сделать двумя способами. Первый — это проверить по очереди все файлы и исправить все ошибки и недочеты типа неудачного именования переменных, излишней вложенности селекторов и плохо отформатированного кода. Второй (предпочитаемый мною) — это использование поиска и замены. Не знаю, как вы, но я обожаю регулярные выражения и мне всегда нравится использовать их в работе.

Предположим, вы хотите добавить отсутствующий ноль во всех числах с плавающей запятой (то есть от 0 до 1), ошибки такого типа выявляются с помощью правила LeadingZero в SCSS-lint. Для этого надо использовать для поиска регулярное выражение \s+\.(\d+) (все цифры, следующие за пробелом с точкой), а для замены \ 0.$1 (пробел, ноль, точка и найденное число). А если вы озаботились правилом линтера BorderZero, то вы можете заменить в вашем редакторе с помощью поиска/ замены все правила border: none на border: 0 . Проще простого!

Я недавно создал на GitHub репозиторий scss-lint-regex, чтобы собрать все регулярные выражения для линтинга в одном месте. Обязательно взгляните на него, если у вас проблемы с линтингом в большом проекте. И будьте аккуратны с поиском/заменой, временами он приводит к неожиданным побочным эффектам. После каждой замены выполняйте git diff , чтобы выявить, что изменилось, это гарантирует, что вы не добавите багов в свой код.

После того, как вы закончите с редактированием поиском/заменой, вам не удастся избежать ручного редактирования, в тех местах, которые надо облагородить (неправильные отступы, отсутствие или избыток пустых строк, пропущенные пробелы и т.п.). Это занимает много времени, но это здорово поможет вам на следующем этапе, поэтому важно сделать это до перехода к нему.

Примечание переводчика

Некоторые из этих вещей можно сделать с помощью плагинов SassBeautify в текстовых редакторах, например, sublime или atom.

Пересмотр структуры проекта

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

Не столь значим выбор методологии проекта, главное, чтобы она у вас была и не вызывала у вас дискомфорт. Это может быть SMACSS, 7-1 или ITCSS — выбор за вами. Попытайтесь реструктурировать свой код в соответствии с выбранной методикой. Я, как правило, использую паттерн 7-1, который мы разработали в Sass Guidelines, поэтому я дам вам несколько советов, которые помогут, если вы выбрали этот путь.

Начните с создания каталога vendor, этот шаг обычно не вызывает вопросов. Перенесите в него все дополнительные библиотеки от сторонних разработчиков (библиотеки, не являющиеся зависимостями для npm или Bundler).

Затем перейдем к каталогу abstracts. Все переменные, миксины, функции и плейсхолдеры должны находиться здесь. Вы вольны упорядочивать их как пожелаете, пока вы не разберетесь со всеми переменными и миксинами в вашей кодовой базе. Я на этой стадии также выявляю необязательные переменные (и миксины), ведь часто приходиться сталкиваться с переменными, используемыми один или два раза.

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

И, наконец, в завершение вам надо заняться компоновкой каталога components и обычно это колоссальная задача. Я советую делать компоненты как можно меньшего размера и ориентироваться на их многократное использование. Не имеет значения, если вы увеличите их количество — главное, чтобы они не зависели от контекста и были простыми для чтения, понимания и обновления.

В качестве примера правильного и небольшого компонента могу привести следующий:

Старайтесь мыслить модулями. Меньше. Проще. Независимее.

Удаление лишнего

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

Прошло уже 3 года, но этот твит Николаса Галахера остается моим любимым вопросом о CSS:

Устаревание это настоящая чума CSS. При написании стилей мы часто ходим туда и обратно, пробуя новые правила — в итоге мы, как правило, оставляем несколько совершенно ненужных деклараций. Например, overflow: hidden , потерявший необходимость или font-size , не изменяющий размер шрифта. Оставляя их, мы увеличиваем технический долг. В этом нет ничего хорошего.

При написании CSS я привык открывать инструменты разработчика в браузера и поочередно отключать каждую декларацию CSS перед отправкой готового кода, чтобы проверить, на что они влияют. Если они не на что не влияют, то я в первую очередь спрашиваю себя: “Зачем они здесь?”. Если они оказываются бесполезными, я удаляю их. С такой простой методикой как эта, я гарантирую отправку в репозиторий только полезного кода без мусора.

Очистка кодовой базы CSS это та же техника. Определите компонент, который вы хотите очистить, откройте инструменты разработчика и попытайтесь найти бесполезные декларации. Иногда для удаления кода CSS, нам надо передвинуть эти стили вверх по дереву, чтобы воспользоваться возможностями каскада. Рассмотрим это на следующем лаконичном примере:

Очевидным способом оптимизации является перемещение декларации color: red в родительский селектор, после чего каскадирование сделает за нас остальное. Конечно, реальные примеры обычно более сложны, но и этот пример показывает о том, что не стоит забывать возможности „C“ в аббревиатуре CSS.

CSS умный и вы должны быть не хуже

Также очень часто встречается нехватка понимания значений inherit , initial и currentcolor . Предположим, вы хотите, чтобы ссылки были того же цвета, что и основной текст (они уже достаточно выделены подчеркиванием). Вот как не надо это делать:

Причина того, что это решение является неудачным, очевидна: если вы измените цвет body , цвет ссылки будет рассинхронизирован с ним. Если вы думаете об использовании переменной, то это лишь сделает все излишне сложным. И, наконец, если ссылка будет размещена внутри элемента с собственным стилем (например, в цитате), она не будет совпадать с ним по цвету.

В CSS есть встроенный способ решения этой проблемы, это значение inherit :

Вот так просто. Благодаря этому ссылки будут наследовать цвет родительского элемента. Который в свою очередь также может наследовать цвет своих предков и так далее.

Точно также при возвращении свойству дефолтного значения будет плохой идеей задание фиксированного значения. В CSS для таких случаев есть значение initial . Обычно оно не имеет отличий от задания фиксированных значений, но есть случаи, когда действительно играет свою роль, например, при определении направления текста в свойстве text-align . При сбросе text-align , значение left может испортить текст на RTL-языках (направленных справа налево), выходом будет именно initial (еще лучше start , но это значение не поддерживается в IE9)/.

Последнее в списке, но не последнее по важности значение это currentcolor , очень многие разработчики о нем не знают. Если вы относитесь к их числу, не переживайте, просто спросите у себя: “Если вы не задавали цвет границы элементы, то почему он автоматически совпадает с цветом шрифта элемента?”. Да, это происходит потому, что по умолчанию свойству border-color задано значение currentcolor (спецификация). Согласитесь, все очевидно из названия.

На мой взгляд, если вы хотите использовать цвет шрифта элемента, надо использовать currentcolor вместо фиксированного значения или переменной Sass.


Это все базовые возможности CSS. Они делают CSS таким как есть. И эти возможности используются на удивление редко. Поэтому, если вы решили улучшить код компонента, не стоит пренебрегать ими.

Ваш Git должен быть в порядке

Рефакторинг кодовой базы CSS это большая по объему работа. Вам придется обновлять десятки файлов. И вполне вероятно, что вы что-нибудь сломаете в процессе. Давайте будем честны — все делают ошибки и было бы нереально круто, если вам удастся завершить такую работу без какой-нибудь маленькой оплошности.

Поэтому я настойчиво рекомендую вам старательно работать с системой контроля версий (логично предположить, что в этой роли выступает Git). Это значит, что все коммиты делают одну единственную вещь — обеспечивать возвращение на шаг назад от кода с багом без мучений с конфликтами.

Я знаю, что многим людям Git кажется сложным и тяжелым для восприятия, а способы легко освоить его находятся за пределами этой статьи. Поверьте мне: история вашего Git должна быть похожей на поэму, если вы не хотите, чтобы у вас выкипел мозг.

Заключение

Итак, кратко сформулирую основные тезисы статьи для тех кому лень читать весь текст:

Очистка проекта CSS/Sass сложна потому, что трудно сразу оценить все последствия изменения или удаления строки CSS. Это все в основном из-за плохой тестируемости CSS. Поэтому вам надо быть внимательными.

Цукерберг рекомендует:  Html - Помогите чайнику с JS.

Начните с линтинга и ваш код станет симпатичнее. Сделайте это потому, что это облегчит вашу жизнь в будущем. Это также хороший способ обзора состояния вашего кода без особого риска (исправление синтаксической грязи не должно стать причиной каких-то проблем).

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

После того, как вы очистили проект и разложили все компоненты по полочкам, пришло время улучшить CSS. Сначала проверьте, что вы можете удалить, ведь мы всегда пишем слишком много кода. Затем попробуйте оптимизировать его так, чтобы он меньше повторялся. Не перестарайтесь! Ваша задача состоит в том, чтобы уменьшить сложность, а не увеличить. Не забывайте комментировать все, что будет неочевидным для первого взгляда.

И, наконец, ваши коммиты должны быть регулярными и логичными. Объединяйте изменения в небольшие коммиты, каждый из которых делает одну простую вещь — так вам будет проще откатить изменения, если вы что-то сделаете не так.

Последнее, но не менее важное — не забудьте отпраздновать, когда все закончится. Удачи!

Будни программиста

Полезные инструменты для CSS разработчика. Часть 2.

Итак вторая часть ссылок на полезные инструменты для css разработки.

Формы

Quick Form Builder — генерирует формы с css разметкой, нам нужно лишь указать имена и тип полей, стандарт (HTML / XHTML) и получить на выходе готовый код html и css.

Wufoo — простой и бесплатный сервис, который позволяет создавать красивые и валидные формы на CSS и XHTML

Компоненты UI (User interface)

List-o-Matic — простой генератор меню, до двух уровней вложенности, несколько оформлений на выбор.

CSS Menu Generator — генератор меню с css, горизонтальные, вертикальные, выпадающие, на ваш выбор.

ThemeRoller — позволяет создавать свои темы для JQuery UI.

Обертка текста

CSS Text Wrapper — данный сервис позволяет придать тексту любую форму и легко вставить его на страницу. Настраиваемый размер блока, выравнивание текста, цвет, шрифт и т.д.

The Box Office — сервис позволит вам сделать обтекание текстом любой картинки неправильной формы. Вводим ссылку на картинку любой неправильной формы, задаем параметры, такие как выравнивание изображения, цвет фона (если нужно), высоту строки, отступы, цвет и т.д.

Анализ и отладка

CSS Analyzer — этот сервис сочетает W3C CSS Validation Service и проверку цветов на контрастность, это особенно полезно для улучшения юзабилити. И многое другое. В результате вы получите очень подробное описание ошибок и предупреждений.

Firebug — расширение для браузера Firefox (есть версии под Chrome). Сочетает в себе отладчик, DOM-инспектор, JS, DHTML, CS, XMLHttpRequest и многое другое. Расширение показывает функцию которая вызвала ошибку, стек вызовов и другую отладочную информацию.

Сопровождение

Dust-Me Selectors — Сервис анализирует страницу, показывает какие стили не используются на странице, показывает в каком файле CSS они прописаны и на какой строке.

CSS Redundancy Checker — еще один сервис для проверки использования правил. После проверки выводит список не используемых на странице ( или нескольких страницах ) стилей.

Оптимизация

CSS Drive CSS Compressor — инструмент для сжатия стилей. Имеет несколько видов компрессии: слабая, нормальная и сверхкомпактная.

Robson CSS Compressor — Еще один инструмент для компрессии CSS файлов, имеет гораздо больше настроек по сравнению с предыдущем.

MinifyMe – AIR Application — Маленькая утелитка AIR, она позволит вам быстро собрать несколько css файлов в один.

Форматирование

CleanCSS – CSS Formatter and Optimizer — Онлайн сервис для форматирования и оптимизации. Позволяет настраивать баланс читабельности и оптимизации. Очень полезная опция автоматически объединяет одинаковые свойства и селекторы.

Styleneat — сервис стилизирует CSS код в удобный для чтения формат. Так же позволяет структурировать код.


CSS Toolbox — Бесплатная программа, включающая в себя множество средств для быстрой и эффективной разработки CSS кода. Валидатор, форматтер, оптимизатор и прочее.

Браузерозависимость

Статья о способах тестирования на кроссбраузерную совместимость — статья на хабре содержащая 7 способов проверки на кроссбраузерность.

Web Browser CSS Support — таблица поддержки CSS различными популярными браузерами.

When Can I Use? — сравнение поддержки современных технологий различными браузерами. HTML 5, CSS 3, SVG и другие. Имеет большое количество настроек.

IE7-js — очень полезная JS библиотека, которая позволяет исправить множество багов в HTML и CSS для Internt Explorer версии 7 и более младших. Рекомендую подключать ко всем своим сайтам. Так же есть версии для более старших версий браузера, а именно 8 и 9.

Modernizr — еще одна очень полезная JS библиотека. Позволяет использовать такие вещи как CSS 3, HTML 5 в старых браузерах, которые еще не поддерживают такие функции.

CSS Cleaner — Free Online Beautifyer and Compressor

CSS cleaner, beautifier, formatter, tidy or call it whatewer you like, is a free online code optimizer that helps you clean up easily your messy style sheet files for websites. There’s no need to download or install any program because it runs in a web browser. Whether your code is obfuscated, minified or just simply messy this tool will help you bring it to an organized, readable format.

How To Use?

Take the code you want to work with and paste it in the editor. Click the Clean CSS button to organize the lines and text indentation and optionally apply additional cleaning features selecting the desired point in the attached list.

Features

CSS compressor

Reduce the size of the CSS file by removing unnecessary new lines and white space characters to assure a smaller file size and faster loating time. However a minimized code is barely readable for humans, this operation is definitely beneficial for your website performance and search engines will appreciate it. You can use this online tool later to «unpack» the minified document.

Use numeric font-weight properties

Using normal and bold is not the only way to define the thickness of the character. Numeric font weights provide more than just these two options where you can define a wole range from 100 to 900. Of course the font in use has to support the value you specify. The numeric value of normal is 400 and 700 defines bold. Go to Google Fonts to select a font family that supports the desired thickness.

Color names to hex codes

This CSS cleaning option allows you to convert all occurences of color definitions to the corresponding RGB hex codes. Beside the 17 standard colors (white, blue, yellow, maroon), there is a total of 148 predefined color names that most modern web browsers recognize, such as royalblue, saddlebrown, lightgoldenrodyellow etc. Using hexadecimal code instead of the color name you assure that your website will render correctly and the same on all browsers. Our test proves that hexadecimal definitions render faster since the names are assigned to a look-up table and converted to hex codes anyway.

Remove comments

The /* . */ syntax is used for both single and multiline comments, allowing you to add notes to your document. Comments can take up unnecessary space in the file increasing download and render time and this is why it’s recommended to remove them once the website goes live. Getting rid of comments is an essential step of compressing/minimizing CSS files.

Adjust !important

!important was introduced to help override normal specificity. Experienced developers try to avoid it because its usage might complicate further changes to the document. Using important usually means you’re narcissistic, selfish or just lazy because usually there’s another more elegant way.

This CSS beautify option adjusts the rules, setting it to all lowercase and leaving one space before the exclamation mark.

Set one space after colons

This CSS tidy option unifies all colons, leaving one space after each.

Last semicolon in block

The last semicolon before the closing brace in a block is unnecessary and can be removed before a project goes live, saving some space.

Remove @media blocks

Deleting the conditional media queries in a document is not a standard CSS cleaning feature because it affects the website. With this feature you can choose to make a site unresponsive with a single click.

Delete unnecessary white characters

Successive white characters have no effect or use, they just fill the document, increasing the file size. Empty new lines or text indentation with repetitive spaces can be removed before publishing.

10 полезных CSS3-инструментов для веб-разработки

HTML5 уже давно является неотъемлемой частью дизайна. Еще один фактор, который в наши дни также стоит учитывать – это CSS3. CSS3 предлагает новые возможности в области разработки и веб-дизайна. В нашей сегодняшней записи мы собрали для вас подборку полезных инструментов, которыми вы можете воспользоваться при разработке последующих проектов.

Может вы хотели что-то подсказать нашему сообществу и дополнить сегодняшний список? Если у вас есть информация, то не стесняйтесь и не скупитесь делиться с нашими читателями в комментариях.

Простая таблица для разработки красивых элементов в стиле клавиатуры.

Данный текст делится на абзацы внутри отдельного элемента div, но с помощью CSS3 текст делится на колонки.

Перетаскивайте элементы, выбирайте цвета, создавайте красивые классы для кнопок.

Взгляните на забавные и продуктивные бесплатные утилиты для веб-разработки.

Этот простой генератор кода CSS помогает вам уяснить возможности CSS3, предложенные в рамках WebKit. Данная демонстрация работает в браузерах семейства webkit- (Safari, mobile Safari, Chronium).


Выберите формат, в котором должны быть сгенерированы цвета. Доступные опции включают в себя HEX и RGB.

Информация о параметрах CSS. Значения отражают поддержку элементов браузером. Некоторые параметры могут поддерживаться хуже остальных. Здесь вы сможете узнать уровень поддержки.

С помощью данной утилиты вы сможете проверить – будет ли поддерживаться определенный параметр в браузере. Здесь также есть поддержка параметров CSS3.

Небольшой набор важных для разработки инструментов CSS3.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Скачать бесплатно: Bootstrap-шаблон панели управления (HTML5 CSS3)

CSS3-градиенты

Create CSS3: многофункциональный генератор кода CSS3

Morf.js: пользовательские функции замедления для переходов в CSS3

CSS3 Box Shadows: 39 оригинальных способов применения

Perkins – HTML5/CSS3-платформа для быстрой разработки

Opera развивает поддержку CSS3

Веб-генератор трехмерных лент (основанный на CSS3)

CSS3, Please! – Кросс-браузерный генератор правил CSS3

Шпаргалка по CSS3 (PDF)

  • 26.10 | 18:00 —

Топ UX тренды для банкинга в 2020 году

Армированный скотч — назначение и характеристики

2009—2014 © CoolWebmasters.Com — онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта — лаборатория D.L.E. Templates.Com

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!

Мы сами вдохновляемся материалами, которые предлагаем вам на обозрение, будь то интересные руководства или полезные и впечатляющие подборки (дизайнов, шаблонов, сниппетов и т.д.), и мы всегда сохраняем ссылки на источники, и сообщаем авторов изображений, использованных в подборках или руководствах. Зачастую, ссылка на источник не ведёт напрямую к автору шедевра, но мы ведь не волшебники, чтобы угадывать, кто является автором.

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

Инструменты организации и приведения в порядок кода CSS

Даже супер-опытным веб-мастерам, порой бывает не просто разобраться в чужих CSS файлах. Далеко не все разработчики утруждают себя тщательным структурированием и форматированием CSS кода. Да что греха таить, у многих вообще каша в голове и выходят из такой головы соответствующие творения.

Потому, хотелось бы немного упростить себе жизнь при разработке новых проектов или переделке уже готовых CSS, автоматизировать часть работы, тем самым высвободив немного времени на другие ништяки. Правда следует учесть, что никакие автоматизированные инструменты не имеют представления о вашем личном уникальном стиле, применяемом при написании CSS, потому идеального для всех кода не получится.

ProCSSor — настраиваемый процессор CSS

«Прекрасный CSS отладчик для прекрасных web-сайтов» (мой вольный перевод слогана procssor). Действительно очень достойный инструмент.

ProCSSor позволяет придать вашему CSS легко читаемый, понятный и настраиваемый стиль в соответствии с вашими требованиями. ProCSSor может сжимать CSS и создавая легкую версию сайта. Есть версия программы для Mac в Apple Store, но особой нужды в ней не вижу, вот если бы она могла анализировать и выявлять неиспользуемые CSS стили на сайте. но увы. Так что онлайн-версии вполне достаточно.

CSS Compressor & Minifier

На мой взгляд, инструмент несколько уступает в настройках предыдущему процессору и не знает о CSS3. Есть предустановленные настройки степни сжатия итогового CSS. В остальном функционал повторяет возможности ProCSSor.

CSS Lint — помогает обнаружить ошибки CSS кода

CSS Lint – этот инструмент, помогает определить проблемы внутри кода CSS. Проверяет базовый синтаксис, а также применяет к коду набор заранее определенных правил, выявляет признаки неэффективности. Необходимые правила можно выбирать самостоятельно или пропустить ненужные. Информация выдается на английском, но думая это составит особой трудности.

Цукерберг рекомендует:  Бесплатка 100 иконок на тему “Еда и напитки”

Helium CSS – сканирование сайта на наличие неиспользуемого CSS

Helium – интересный инструмент, написанный на javascript, позволяющий находить неиспользуемые CSS-стили на сайте. В первую очередь интересен при оптимизации сайтов, использующих различные универсальные фреймворки, к примеру широко известный Bootstrap.

Helium CSS берет список URL-разделов сайта и, анализируя каждую страницу, выстраивает список всех встретившихся CSS-стилей сравнивая их с селекторами из таблиц стилей сайта. В конце генерируется подробный отчет по каждому селектору, которые не применяются на загруженных страницах.

grunt-uncss — продвинутый плагин для удаления лишних CSS стилей на сайте

О плагине для Grunt — uncss, который анализирует верстку и стили и позволяет не только избавиться от лишних селекторов в CSS, но и объединять и сжимать javascript на сайте я расскажу в отдельной статье. Тема очень интересная, но довольно сложная для новичков.


Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

Css — Создаем чистильщик css, open source!

clean-css is a fast and efficient CSS optimizer for Node.js platform and any modern browser.

According to tests it is one of the best available.

Table of Contents

Node.js version support

clean-css requires Node.js 4.0+ (tested on Linux, OS X, and Windows)

Important: 4.0 breaking changes

clean-css 4.0 introduces some breaking changes:

  • API and CLI interfaces are split, so API stays in this repository while CLI moves to clean-css-cli;
  • root , relativeTo , and target options are replaced by a single rebaseTo option — this means that rebasing URLs and import inlining is much simpler but may not be (YMMV) as powerful as in 3.x;
  • debug option is gone as stats are always provided in output object under stats property;
  • roundingPrecision is disabled by default;
  • roundingPrecision applies to all units now, not only px as in 3.x;
  • processImport and processImportFrom are merged into inline option which defaults to local . Remote @import rules are NOT inlined by default anymore;
  • splits inliner: < request: . timeout: . >option into inlineRequest and inlineTimeout options;
  • remote resources without a protocol, e.g. //fonts.googleapis.com/css?family=Domine:700 , are not inlined anymore;
  • changes default Internet Explorer compatibility from 9+ to 10+, to revert the old default use < compatibility: 'ie9' >flag;
  • renames keepSpecialComments to specialComments ;
  • moves roundingPrecision and specialComments to level 1 optimizations options, see examples;
  • moves mediaMerging , restructuring , semanticMerging , and shorthandCompacting to level 2 optimizations options, see examples below;
  • renames shorthandCompacting option to mergeIntoShorthands ;
  • level 1 optimizations are the new default, up to 3.x it was level 2;
  • keepBreaks option is replaced with < format: 'keep-breaks' >to ease transition;
  • sourceMap option has to be a boolean from now on — to specify an input source map pass it a 2nd argument to minify method or via a hash instead;
  • aggressiveMerging option is removed as aggressive merging is replaced by smarter overr >

What’s new in version 4.1

clean-css 4.1 introduces the following changes / features:

  • inline: false as an alias to inline: [‘none’] ;
  • multiplePseudoMerging compatibility flag controlling merging of rules with multiple pseudo classes / elements;
  • removeEmpty flag in level 1 optimizations controlling removal of rules and nested blocks;
  • removeEmpty flag in level 2 optimizations controlling removal of rules and nested blocks;
  • compatibility: < selectors: < mergeLimit: >> flag in compatibility settings controlling maximum number of selectors in a single rule;
  • minify method improved signature accepting a list of hashes for a predictable traversal;
  • selectorsSortingMethod level 1 optimization allows false or ‘none’ for disabling selector sorting;
  • fetch option controlling a function for handling remote requests;
  • new font shorthand and font-* longhand optimizers;
  • removal of optimizeFont flag in level 1 optimizations due to new font shorthand optimizer;
  • skipProperties flag in level 2 optimizations controlling which properties won’t be optimized;
  • new animation shorthand and animation-* longhand optimizers;
  • removeUnusedAtRules level 2 optimization controlling removal of unused @counter-style , @font-face , @keyframes , and @namespace at rules;
  • the web interface gets an improved settings panel with «reset to defaults», instant option changes, and settings being persisted across sessions.

What’s new in version 4.2

clean-css 4.2 introduces the following changes / features:

  • Adds process method for compatibility with optimize-css-assets-webpack-plugin;
  • new transition property optimizer;
  • preserves any CSS content between /* clean-css ignore:start */ and /* clean-css ignore:end */ comments;
  • allows filtering based on selector in transform callback, see example;
  • adds configurable line breaks via format: < breakWith: 'lf' >option.

clean-css constructor accepts a hash as a parameter with the following options available:

  • compatibility — controls compatibility mode used; defaults to ie10+ ; see compatibility modes for examples;
  • fetch — controls a function for handling remote requests; see fetch option for examples (since 4.1.0);
  • format — controls output CSS formatting; defaults to false ; see formatting options for examples;
  • inline — controls @import inlining rules; defaults to ‘local’ ; see inlining options for examples;
  • inlineRequest — controls extra options for inlining remote @import rules, can be any of HTTP(S) request options;
  • inlineTimeout — controls number of milliseconds after which inlining a remote @import fails; defaults to 5000;
  • level — controls optimization level used; defaults to 1 ; see optimization levels for examples;
  • rebase — controls URL rebasing; defaults to true ;
  • rebaseTo — controls a directory to which all URLs are rebased, most likely the directory under which the output file will live; defaults to the current directory;
  • returnPromise — controls whether minify method returns a Promise object or not; defaults to false ; see promise interface for examples;
  • sourceMap — controls whether an output source map is built; defaults to false ;
  • sourceMapInlineSources — controls embedding sources inside a source map’s sourcesContent field; defaults to false.

There is a certain number of compatibility mode shortcuts, namely:

  • new CleanCSS(< compatibility: '*' >) (default) — Internet Explorer 10+ compatibility mode
  • new CleanCSS(< compatibility: 'ie9' >) — Internet Explorer 9+ compatibility mode
  • new CleanCSS(< compatibility: 'ie8' >) — Internet Explorer 8+ compatibility mode
  • new CleanCSS(< compatibility: 'ie7' >) — Internet Explorer 7+ compatibility mode

Each of these modes is an alias to a fine grained configuration, with the following options available:

You can also use a string when setting a compatibility mode, e.g.

The fetch option accepts a function which handles remote resource fetching, e.g.

This option provides a convenient way of overriding the default fetching logic if it doesn’t support a particular feature, say CONNECT proxies.

Unless given, the default loadRemoteResource logic is used.

By default output CSS is formatted without any whitespace unless a format option is given. First of all there are two shorthands:

however format option also accept a fine-grained set of options:

Инструменты очистки CSS

Преимущество чистого и организованного CSS очевидны. Сайт у которого безупречный CSS будет загружаться быстрее и будет более заметнее в результатах поиска. Для веб-разработчиков чистый код CSS служит ярким свидетельством профессионализма и для будущих заказчиков.

Но, очистка от мусора разметки CSS в бесчисленных повторах проектирования и изменения могут быть кропотливым, трудоемким процессом выполняя его в ручную. К счастью, есть некоторые замечательные и полезные инструменты, которые помогут вам автоматизировать некоторые наиболее актуальные аспекты CSS. На этой странице ссылки на инструменты очистки CSS, лично Я, проверял CSS разметку сайта www.pixelcom.crimea.ua на всех инструментах ниже, советую и Вам сделать так же.

Инструменты очистки CSS

ProCSSor

ProCSSor является простым, без излишеств средство для мгновенных улучшений ваших CSS. Доступен через OS X, iOS, или любой браузер, инструмент использует CSS файл, вставленный фрагмент или URL-адрес, и сразу же исправляет, и покажет будущей код вашего CSS.

CSS Lint

CSS Lint предлагает рекомендации, в отличии от других инструментов очистки CSS. Большинство из них даже не говорят о изменениях в CSS, но CSS Lint, даёт краткое объяснение для каждого из рекомендуемого изменения. Он имеет целый ряд функций, которые сосредоточены на ошибки, совместимость, производительность, устранить дублирование и доступности, которые могут быть включены или отключены.


Dirty Markup

Dirty Markup имеет уникальный подход к оптимизации кода; он работает когда поле заполнено кодом и сочетает в себе нескольких различных технологий HTML Tidy , CSS Tidy , JavaScript , Ace Редактор , и делает комплексную очистку кода. Это работает точно так же как и CSS, как JavaScript или стандартный HTML.

CleanCSS

CleanCSS работает с URL-адресом или вставленным фрагментом кода и предлагает разнообразное выполнение оптимизации CSS. Вы можете выбрать между пятью различными настройками сжатия, которые предлагают компромиссные варианты между читабельностью и размером файла.

Code Beautifier

Code Beautifier простой CSS cleanup tool (инструмент очистки CSS) без лишних особенностей. Он обрабатывает код по URL-адресу или вставку кода, и тщательно очищает их, основываясь на практическом разнообразии вариантов. Если вам нужно быстро очистить CSS при этом не потеряться в море возможностей очистки кода, это может быть ваш идеальный CSS cleanup tool.

Spritemapper

Ни один из других упомянутых инструментов не оптимизировал изображения, что так же полезно, как и оптимизация кода как такового. Spritemapper генерирует спрайты, объединяет несколько изображений в таблицу стилей CSS c правильным позиционированием. В результате более быстрый сайт, меньше количество запросов HTTP, и более обтекаемый стиль CSS.

Topcoat

Topcoat не традиционный инструмент очистки CSS; это, по сути, набор для развития CSS, подход кураторства чистого CSS. Если у Вас хорошо написанный CSS, вы, вероятно, никогда не будите нуждаться в том, чтобы очистить код CSS.

CSSTidy

CSSTidy похож на многие инструменты очистки CSS, но этот предлагает некоторые уникальные атрибуты. CSSTidy может быть вызван с помощью командной строки или PHP, и он работает на Windows, Mac, или платформ Linux. CSSTidy-cleanup tool может отлично вписываются в существующий рабочий процесс и сохранить ваш CSS чистым автономно.

Styleneat

Если Вы придирчивый к очистке CSS и любите возиться с CSS, или осторожный тип человека, который не доверяет полностью инструментам, скорее всего инструмент Styleneat очистки CSS для вас. Styleneat и не предлагает минимизацию или сжатие, данные на выходе наиболее удобные для восприятия и делают стили очень чистыми с человеческой точки зрения.

Валидатор W3C

W3C Valdiator не предлагает средства для очистки, сжатия и оптимизации кода, его безусловно нужно рассматривать в случаях, когда код CSS действительно некорректный. Вышеупомянутые инструменты имеют свои средства, этот сделан Консорциум W3C который создаёт стандарты.

Очистка кодовой базы CSS

Вы только что присоединились к существующему проекту для замены уходящего разработчика. А может просто занялись своим старым проектом спустя несколько лет. Вы ощущаете ужас и отвращение при взгляде на код. Вы можете сделать только одно: расчистить весь этот бардак. Вы уже сталкивались с чем-то подобным? Почти наверняка, рано или поздно с этим сталкиваются все.

Вы знаете, что очистка кода CSS это объемная задача. Нужно сделать многое за ограниченное время — особенно, когда клиенты/начальники/коллеги настойчиво советуют не трогать то, что работает. Вы даже не знаете с чего начать.

Но сегодня удача на вашей стороне — я готов поделиться с вами своими решениями по очистке кода и дать вам советы по их использованию. На самом деле все сводится к простейшим вещам.

Линтинг это наше все

В этом разделе я буду исходить из того, что вы используете Sass. И не только потому, что это разумное предположение в нынешних условиях, но также по причине того, что неправильное использование Sass часто является причиной загрязнения кодовой базы. Хотя эта статья будет полезна и тем, кто не пользуется препроцессорами, поэтому вам стоит дочитать ее до конца.

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

В Sass есть написанный на Ruby линтер, называемый SCSS-lint. Вы можете настроить его самостоятельно или скачать конфигурацию, рекомендованную Sass-Guidelines, чтобы начать прямо сейчас. Также в Node.js есть sass-lint, они не на 100% совместимы и могут работать по-разному.

Попробуйте запустить SCSS-Lint в своем каталоге с файлами Sass для выявления ошибок. Очень высоки шансы на то, что на вас вывалится тонна ошибок. Обычно после этого хочется прекратить эксперименты по очистке кода. Наберитесь терпения. Сейчас вы можете попытаться сделать конфигурацию менее строгой в отношении правил, не очень важных для вас (типа формата задания цвета) или взять быка за рога и использовать всю мощь линтинга.

Исправление найденных ошибок

Пришло время исправить, то, что нужно исправить. Это можно сделать двумя способами. Первый — это проверить по очереди все файлы и исправить все ошибки и недочеты типа неудачного именования переменных, излишней вложенности селекторов и плохо отформатированного кода. Второй (предпочитаемый мною) — это использование поиска и замены. Не знаю, как вы, но я обожаю регулярные выражения и мне всегда нравится использовать их в работе.

Предположим, вы хотите добавить отсутствующий ноль во всех числах с плавающей запятой (то есть от 0 до 1), ошибки такого типа выявляются с помощью правила LeadingZero в SCSS-lint. Для этого надо использовать для поиска регулярное выражение \s+\.(\d+) (все цифры, следующие за пробелом с точкой), а для замены \ 0.$1 (пробел, ноль, точка и найденное число). А если вы озаботились правилом линтера BorderZero, то вы можете заменить в вашем редакторе с помощью поиска/ замены все правила border: none на border: 0 . Проще простого!

Я недавно создал на GitHub репозиторий scss-lint-regex, чтобы собрать все регулярные выражения для линтинга в одном месте. Обязательно взгляните на него, если у вас проблемы с линтингом в большом проекте. И будьте аккуратны с поиском/заменой, временами он приводит к неожиданным побочным эффектам. После каждой замены выполняйте git diff , чтобы выявить, что изменилось, это гарантирует, что вы не добавите багов в свой код.

После того, как вы закончите с редактированием поиском/заменой, вам не удастся избежать ручного редактирования, в тех местах, которые надо облагородить (неправильные отступы, отсутствие или избыток пустых строк, пропущенные пробелы и т.п.). Это занимает много времени, но это здорово поможет вам на следующем этапе, поэтому важно сделать это до перехода к нему.

Примечание переводчика

Некоторые из этих вещей можно сделать с помощью плагинов SassBeautify в текстовых редакторах, например, sublime или atom.

Пересмотр структуры проекта

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

Не столь значим выбор методологии проекта, главное, чтобы она у вас была и не вызывала у вас дискомфорт. Это может быть SMACSS, 7-1 или ITCSS — выбор за вами. Попытайтесь реструктурировать свой код в соответствии с выбранной методикой. Я, как правило, использую паттерн 7-1, который мы разработали в Sass Guidelines, поэтому я дам вам несколько советов, которые помогут, если вы выбрали этот путь.

Начните с создания каталога vendor, этот шаг обычно не вызывает вопросов. Перенесите в него все дополнительные библиотеки от сторонних разработчиков (библиотеки, не являющиеся зависимостями для npm или Bundler).

Затем перейдем к каталогу abstracts. Все переменные, миксины, функции и плейсхолдеры должны находиться здесь. Вы вольны упорядочивать их как пожелаете, пока вы не разберетесь со всеми переменными и миксинами в вашей кодовой базе. Я на этой стадии также выявляю необязательные переменные (и миксины), ведь часто приходиться сталкиваться с переменными, используемыми один или два раза.

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

И, наконец, в завершение вам надо заняться компоновкой каталога components и обычно это колоссальная задача. Я советую делать компоненты как можно меньшего размера и ориентироваться на их многократное использование. Не имеет значения, если вы увеличите их количество — главное, чтобы они не зависели от контекста и были простыми для чтения, понимания и обновления.


В качестве примера правильного и небольшого компонента могу привести следующий:

Старайтесь мыслить модулями. Меньше. Проще. Независимее.

Удаление лишнего

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

Прошло уже 3 года, но этот твит Николаса Галахера остается моим любимым вопросом о CSS:

Устаревание это настоящая чума CSS. При написании стилей мы часто ходим туда и обратно, пробуя новые правила — в итоге мы, как правило, оставляем несколько совершенно ненужных деклараций. Например, overflow: hidden , потерявший необходимость или font-size , не изменяющий размер шрифта. Оставляя их, мы увеличиваем технический долг. В этом нет ничего хорошего.

При написании CSS я привык открывать инструменты разработчика в браузера и поочередно отключать каждую декларацию CSS перед отправкой готового кода, чтобы проверить, на что они влияют. Если они не на что не влияют, то я в первую очередь спрашиваю себя: “Зачем они здесь?”. Если они оказываются бесполезными, я удаляю их. С такой простой методикой как эта, я гарантирую отправку в репозиторий только полезного кода без мусора.

Очистка кодовой базы CSS это та же техника. Определите компонент, который вы хотите очистить, откройте инструменты разработчика и попытайтесь найти бесполезные декларации. Иногда для удаления кода CSS, нам надо передвинуть эти стили вверх по дереву, чтобы воспользоваться возможностями каскада. Рассмотрим это на следующем лаконичном примере:

Очевидным способом оптимизации является перемещение декларации color: red в родительский селектор, после чего каскадирование сделает за нас остальное. Конечно, реальные примеры обычно более сложны, но и этот пример показывает о том, что не стоит забывать возможности „C“ в аббревиатуре CSS.

CSS умный и вы должны быть не хуже

Также очень часто встречается нехватка понимания значений inherit , initial и currentcolor . Предположим, вы хотите, чтобы ссылки были того же цвета, что и основной текст (они уже достаточно выделены подчеркиванием). Вот как не надо это делать:

Причина того, что это решение является неудачным, очевидна: если вы измените цвет body , цвет ссылки будет рассинхронизирован с ним. Если вы думаете об использовании переменной, то это лишь сделает все излишне сложным. И, наконец, если ссылка будет размещена внутри элемента с собственным стилем (например, в цитате), она не будет совпадать с ним по цвету.

В CSS есть встроенный способ решения этой проблемы, это значение inherit :

Вот так просто. Благодаря этому ссылки будут наследовать цвет родительского элемента. Который в свою очередь также может наследовать цвет своих предков и так далее.

Точно также при возвращении свойству дефолтного значения будет плохой идеей задание фиксированного значения. В CSS для таких случаев есть значение initial . Обычно оно не имеет отличий от задания фиксированных значений, но есть случаи, когда действительно играет свою роль, например, при определении направления текста в свойстве text-align . При сбросе text-align , значение left может испортить текст на RTL-языках (направленных справа налево), выходом будет именно initial (еще лучше start , но это значение не поддерживается в IE9)/.

Последнее в списке, но не последнее по важности значение это currentcolor , очень многие разработчики о нем не знают. Если вы относитесь к их числу, не переживайте, просто спросите у себя: “Если вы не задавали цвет границы элементы, то почему он автоматически совпадает с цветом шрифта элемента?”. Да, это происходит потому, что по умолчанию свойству border-color задано значение currentcolor (спецификация). Согласитесь, все очевидно из названия.

На мой взгляд, если вы хотите использовать цвет шрифта элемента, надо использовать currentcolor вместо фиксированного значения или переменной Sass.

Это все базовые возможности CSS. Они делают CSS таким как есть. И эти возможности используются на удивление редко. Поэтому, если вы решили улучшить код компонента, не стоит пренебрегать ими.

Ваш Git должен быть в порядке

Рефакторинг кодовой базы CSS это большая по объему работа. Вам придется обновлять десятки файлов. И вполне вероятно, что вы что-нибудь сломаете в процессе. Давайте будем честны — все делают ошибки и было бы нереально круто, если вам удастся завершить такую работу без какой-нибудь маленькой оплошности.

Поэтому я настойчиво рекомендую вам старательно работать с системой контроля версий (логично предположить, что в этой роли выступает Git). Это значит, что все коммиты делают одну единственную вещь — обеспечивать возвращение на шаг назад от кода с багом без мучений с конфликтами.

Я знаю, что многим людям Git кажется сложным и тяжелым для восприятия, а способы легко освоить его находятся за пределами этой статьи. Поверьте мне: история вашего Git должна быть похожей на поэму, если вы не хотите, чтобы у вас выкипел мозг.

Заключение

Итак, кратко сформулирую основные тезисы статьи для тех кому лень читать весь текст:

Очистка проекта CSS/Sass сложна потому, что трудно сразу оценить все последствия изменения или удаления строки CSS. Это все в основном из-за плохой тестируемости CSS. Поэтому вам надо быть внимательными.

Начните с линтинга и ваш код станет симпатичнее. Сделайте это потому, что это облегчит вашу жизнь в будущем. Это также хороший способ обзора состояния вашего кода без особого риска (исправление синтаксической грязи не должно стать причиной каких-то проблем).

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

После того, как вы очистили проект и разложили все компоненты по полочкам, пришло время улучшить CSS. Сначала проверьте, что вы можете удалить, ведь мы всегда пишем слишком много кода. Затем попробуйте оптимизировать его так, чтобы он меньше повторялся. Не перестарайтесь! Ваша задача состоит в том, чтобы уменьшить сложность, а не увеличить. Не забывайте комментировать все, что будет неочевидным для первого взгляда.

И, наконец, ваши коммиты должны быть регулярными и логичными. Объединяйте изменения в небольшие коммиты, каждый из которых делает одну простую вещь — так вам будет проще откатить изменения, если вы что-то сделаете не так.

Последнее, но не менее важное — не забудьте отпраздновать, когда все закончится. Удачи!

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5353f34f7a118f13 • Your IP : 188.64.174.135 • Performance & security by Cloudflare


20 впечатляющих CSS3 примеров, техник и библиотек

В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.

Размытое меню

Это действительно красивое и качественно выполненное меню на чистом CSS. Правильный и удачный пример использования новых технологий CSS.

CSS 3D облака

В этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны.

Логотипы на чистом CSS

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

Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите

3D навигация для сайта

Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Размытие на CSS

Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке.

Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

CSS фильтры

Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.

CSS формы

Пост о CSS формах с многочисленными примерами

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Анимация — Animate.css

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

Индикаторы загрузки — Spinkit

Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.

Кнопки

Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант

Генератор для создания переключателей

Небольшое и качественное интернет приложение, с помощью которого Вы сможете создать красивые переключатели для использования на сайте.

Всплывающие подсказки

CSS библиотека бесплатных всплывающих подсказок — Hint.css

Цветовые схемы

Схемы цветов для людей, которые не любят копаться в коде

Цукерберг рекомендует:  Php - Ищем ентузиастов
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих