4 ради про те, як поліпшити свій CSS

Пропоную читачам «Хабрахабра» переклад публікації «4 tips for a smarter CSS workflow» з сайту creativebloq.com.

Створення незвичайних CSS ефектів — це круто, говорить співробітник Shopify Джонатан Снук (Shopify Jonathan Snook), але що більш важливо для програмування — це швидкість і ефективність.

Люди роблять неймовірні речі, використовуючи CSS, приголомшливі анімації і дивовижні зображення.
Неважливо, ви писали код багато років чи не так давно почали кодинг, середовище розробки CSS істотно змінилася в останні пару років і продовжує активно змінюватися. На даний момент у нас з'явилося безліч інструментів, які можуть допомогти нам створювати лаконічний, але продуктивний CSS.

У цій статті Джонатан Снук дає чотири кращих ради, які допоможуть вам створити легкий і швидкий CSS.

1. Визначте невикористаний код
Протягом тривалого часу розробки і підтримки проект змінюється і з часом ваш CSS перетерплює значні зміни. Невикористаний CSS впливає на продуктивність, відправляючи непотрібний код в браузер, змушує його більше працювати, щоб визначити, які стилі повинні бути застосовані, а які ні.

UnCSS бере список всіх файлів і посилань, перевіряє, чи CSS в HTML, після чого генерує файл CSS, включає в себе тільки ті правила, які використовуються в даний момент.

UnCSS вимагає скомпільованого HTML і CSS. Тому не може бути настільки корисним в залежності від вашого середовища розробки.

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

Використовуйте csscss — засіб перевірки надмірності. Воно допоможе ідентифікувати подвійні властивості у всіх ваших CSS правила. Після чого ви зможете консолідувати свій код в єдине правило CSS.

3. Визначте поганий код
Ви видалили невикористаний і дубльований код. Які ще можна зробити поліпшення, щоб прискорити ваш CSS? Parker і analyze-css — два інструменти, які аналізують ваші таблиці стилів і надають метрики якості вашого коду. Parker і analyze-css можуть допомогти реорганізувати частини вашого коду, спростити їх або здійснити рефакторинг. Користуйтеся цими інструменти регулярно, щоб максимально контролювати ваш CSS.

4. Пишіть хороший код
Позбутися від поганого коду — це одна задача, але от писати хороший код, щоб він був максимально крутим, зовсім інша історія.

Нещодавно були написані кілька інструкцій, щоб допомогти вам писати «красивий» код: CSS Інструкції і Sass Інструкції. Дудя в мій власний ріг, Ви також повинні звернути увагу на SMACSS, для ідей про те, як написати лаконічний і модульний код для вашого проекту.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.