Як оптимізувати CSS з керівництвом стилю коду

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

Існує й інший тип керівництва стилю, який ми можемо використовувати і в веб-розробці, і це так само важливо, але набагато рідше обговорюється: Стиль керівництва для самого коду. Керівництво стилю коду є скоріше для розробників, ніж дизайнерів, і їхня головна мета - оптимізувати CSS або інший код.

Введення правильних посібників до стилю коду дає нам змогу використати a краще організована, послідовна база коду, покращена читабельність коду та більш доступний код. Це не випадково, що великі технологічні компанії, такі як Google, AirBnB або Dropbox, добре використовують їх.

У цьому пості ми розглянемо, як ми можемо оптимізувати наш CSS за допомогою керувань стилю коду CSS.

Керівництво стилю коду проти бібліотек шаблонів

У нашій галузі існує певний ступінь невизначеності щодо того, що ми можемо назвати керівництвом стилів. A List Apart наприклад, використовує його як синоніми з терміном бібліотека зразків в цій статті, але ми можемо врізатися в подібне визначення в інших посадах.

З іншого боку, є також публікації, такі як CSS Tricks або блог Brad Frost, які розрізняють керівництва стилю коду від бібліотек шаблонів. Цей останній підхід, ймовірно, наближає нас до добре оптимізованого сайту, як це дозволяє нам обробляти код і дизайн окремо, тому ми будемо використовувати це в цій публікації.

Обидва керівництва стилю коду та бібліотеки зразків містять стратегію укладання, але різного роду. Бібліотеки шаблонів, такі як Bootstrap, Zurb Foundation, Global Experience Language або бібліотека шаблонів MailChimp, надають нам інтерфейс користувача з попередньо розробленими класами CSS, типографікою, колірною схемою, іноді сітковою системою та іншими шаблонами проектування..

Довідники стилю коду CSS, такі як Evernote або ThinkUp (або згадані в інтро) містять правила про те, як писати CSS включаючи такі речі правила іменування, структура файлів, порядок властивостей, форматування коду, і інші.

Зверніть увагу на те, що живі генератори напрямних, наприклад KSS, Styledown або Pattern Lab, генерувати шаблони бібліотек і ні напрямних стилів кодування. Хоча бібліотеки шаблонів також дуже корисні і підвищують процес веб-розробки, вони не дозволяють нам оптимізувати сам код.

Створіть Керівництво по стилю коду CSS

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

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

Наприклад, AirBnB демонструє хорошим і поганим прикладам для розробників наступним легко засвоюваним способом:

Структура файлу

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

Деякі довідники стилю, такі як ThinkUp, також попереджають нас не використовують вбудовані або вбудовані стилі якщо це неминуче; це також корисне правило, яке варто застосувати.

Вкладання

Гніздування - чудова функція в CSS, але іноді вона може вийти з-під контролю. Ніхто не відчуває себе особливо щасливим, особливо в середині розчарувального процесу налагодження, натикаючись на такі довгі селектори:

 .class_1 .class_2 # id_1 # id_2 li a span color: #bad; 

Так що завжди добре встановити розумний межа вкладеності, наприклад GitHub вибрав три рівні у своєму стилі керівництва. Обмежуючи вкладеність, ми можемо також змусити себе написати краще структурований код.

Правила імен

Використання узгоджених правил присвоєння імен для селекторів CSS має вирішальне значення, якщо ми хочемо зрозуміти наш код місяці або навіть роки пізніше. Існує багато рішень, і існує лише одне суворе правило, яке потрібно дотримуватися ім'я селектора не може починатися з числа.

Чотири загальні стилі, що використовуються в іменуванні селектора .в нижньому регістрі, .under_scores, .тире, і .lowerCamelCase. Вибирайте будь-який з них, але ми повинні дотримуватися тієї ж логіки в усьому проекті.

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

Більше того якщо ми хочемо змінити його колір з червоного на інше в майбутньому, ми можемо легко це зробити без суєти. Існують також стандартні угоди про іменування CSS, такі як конвенція BEM (блок, елемент, модифікатор), призводить до узгодженої структури імен з унікальними і значущими іменами.

Правила форматування

Форматування коду включає такі речі, як використання пробілів, вкладок, відступів, інтервалів, розривів рядків тощо. У форматуванні насправді не є хорошим або поганим методом, єдиним правилом є вибирати узгоджені правила, що призводять до читання коду, і прослідкуйте за ними.

Наприклад, Dropbox вимагає від розробників розміщувати пробіли після двокрапки в деклараціях властивостей, а Evernote використовує два пробіли для відступу. Ми можемо створити стільки правил форматування, скільки нам зручно, але ніколи більше, ніж можна зрозуміти.

Порядок декларування

Упорядковані речі завжди легше побачити, і замовлення CSS-декларацій (властивості з їх значеннями) згідно з правилом, що має сенс, призводить до більш організованого коду.

Подивіться, наприклад, правила впорядкування властивостей WordPress, вони визначають наступну просту, але логічну базу для упорядкування, в якій властивості групуються за їх значенням:

1. Дисплей
2. Позиціонування
3. Модель коробки
4. Кольори та типографія
5. Інший

Одиниці та значення

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

Уявіть собі сайт, який поперемінно використовує px, em, і rem вимірювання довжини. В редакторі коду він не буде виглядати погано, але, ймовірно, деякі елементи будуть на диво малі або великі на цьому сайті.

Ми також повинні приймати рішення про значення кольору (шістнадцяткові, rgb, або hsl), і чи хочемо ми використовувати властивості скорочення і відповідно до яких правил. У кожному керівництві стилів коду CSS, до якого я врізався, тобто. не вказувати одиниці для значень 0 (дійсно, просто не потрібно).

.class // хороший запас: 0; // поганий запас: 0px; // поганий запас: 0em; // погана маржа: 0rem; 

Коментування

Код коментування є суттєвим на всіх мовах, але в CSS це не тільки полегшує налагодження та створення документації, але й розділяє правила CSS в логічні групи. Ми можемо використовувати будь-який / *… * / або //… Стиль позначення для коментарів у CSS, важливо залишайтеся послідовними з коментарями в нашому проекті.

Наприклад, ідіоматичний CSS встановлює значущу систему коментування, яка навіть використовує деякі основні мистецтва ASCII, і в результаті дає прекрасно організований код: