Ви занадто ліниві для створення розмітки з незалежним CSS

33

Від автора: давайте говорити на чистоту: майже всі використовують бібліотеки типу normalize.css або створюють свої власні базові стилі для елементів. Причин може бути кілька.

Можливі причини:

вам не потрібні елементи без стилів;

ви хочете писати простий і чистий HTML;

ви хочете писати код швидко і мало.

Я прекрасно розумію ваші бажання. Але я думаю, ви погодитеся, що в CSS є свої переваги?

можна створювати повторно використовувані правила;

ви відокремлюєте розмітку від стилів.

Якщо ваша відповідь так, я задам вам запитання: Навіщо ви досі стилизуете елементи?

Чому стилізувати елементи це погано?

Коли ви стилизуете елементи, ви прикріплюєте стилі до DOM. Можу посперечатися, що ви зустрічали щось схоже:

I am an evil styled element headline

Навіщо це потрібно? Тут же необхідно стилізувати h1. Чому не використовувати h2? Тому що вас змушує робити це ваша структура контенту ви дбаєте про семантику. Ось і використовуєте h1. В класі .as-h2 вам необхідно переписати всі правила тег h1, які ви хочете прибрати з стилів h2. Думаєте, там справ-то всього нічого? А про інші заголовки не забули? У самому гіршому випадку вам потрібно кілька класів заголовків, які будуть відповідати кожному тегу заголовка. Виглядати це буде так:

.h1-as-h2
.h1-as-h3
.h1-as-h4
.h1-as-h5
.h1-as-h6
.h2-as-h1
.h2-as-h3
.h2-as-h4
.h2-as-h5
.h2-as-h6
……..
.h6-as-h5

Ще не зрозуміли? У мене повно прикладів!

Робили так раніше?

a:hover { //Я злий елемент
text-decoration: underline;
}

Якщо так, то, швидше за все, ви робили це в меню:

nav {
li a:hover {
text-decoration: none;
}
}

І в стилях кнопок на тезі :

.button:hover {
text-decoration: none;
}

І знову… Один ледачий розробник не може просто так взяти і стилізувати елементи.

І це не все! Той же бардак твориться в налагодженні. Приклад панелі розробника Chrome:

Вы слишком ленивы для создания разметки с независимым CSS

Chrome відмінно справляється, показуючи нам реальні стилі і закреслюючи переписані. Однак набагато простіше було б читати стилі, уникнувши всього цього. Скріншот вище – приклад реального сайту, який я знайшов. Крім перезаписів тут є ще одна проблема: хтось переписав text-decoration: none;, хоча він уже стояв у none. Навіщо? Може людина просто заплутався? Чи він хотів переконатися, що зміни в не зламають стилі кнопки?

Такий же бардак твориться в командах розробників

Ви коли-небудь працювали в компанії з місцевим SEO генієм? Можу сказати, що більшу частину часу робота проходить так: ви створюєте проект, акуратно пишіть розмітку, проектуєте її з усією любов’ю і турботою, після чого вашому SEO фахівця необхідно провести оптимізацію… і він каже: Треба змінити всі елементи.

Неееееееет! Ти знаєш, скільки я це робив? Неможливо, дедлайн вже завтра!!

Знаєте що? Я знаю, як цього уникнути. Ніколи не стилизуйте елементи (глобально)! Думаю, ви зрозуміли.

Класи поспішають на допомогу

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

I am always a beautifully styled paragraph.

Я знаю, про що ви зараз думаєте! Ти хочеш мені сказати я повинен створити клас paragraph для параграфа?

Так! Тег

буквально говорить: «я параграф». Але він не виглядає, як параграф. Це вже завдання CSS! Тепер ви можете подумати, що ваш тег

завжди буде схожий на параграф, а не на щось ще. Що в цьому випадку?

I am always a beautifully styled intro

I am always a beautifully styled hint

I am always a beautifully styled description

Сподіваюся, ви зрозуміли :) А що з посиланнями? Все просто! Використовуйте класи.

I am always a beautifully styled link
..
..

Робота з заголовками

Замість того щоб стилізувати теги h1-h6, проименуйте їх. На мій погляд, дуже важко придумати семантичні імена заголовків, так як дизайнери здебільшого використовують їх, як хочуть і де хочуть. Для таких як ви, логічно мислячих розробників, іноді не так просто зрозуміти, чому один заголовок відрізняється від іншого, навіть якщо ієрархія у них одна і та ж. У більшості проектів я дотримуюся такого підходу:

.headline { … } //використовувати для всіх заголовокв
.headline.large { … } // використовувати для самих великих заголовків, в основному h1
.headline.big { … } // в основному h2
.headline.medium { … } // в основному h3
.headline.minor { … } // в основному h4
.headline.small { … } // в основному h5
.headline.mini { … } // в основному h6

Проблема тут в тому, що ви, знаючи англійську, можете подумати, що «large» більше «big», але хто ще може подумати, що «big» — найбільший заголовок. Та ж біда з «малого» та «mini».

Робота з розміткою, генерованої з CMS

Основна проблема при роботі з CMS полягає в тому, що ви не завжди можете контролювати вихідні дані WYSIWYG редактора. Якщо можете, використовуйте класи. Якщо не можете, використовуйте класи-обгортки.

.wysiwyg {
h1 { … }
h2 { … }
p { … }
a { … }

}
// або так
.paragraph, .wysiwyg p { … }

Якщо ви використовуєте препроцесор типу Sass, ви з легкістю можете використовувати правило extend.

.wysiwyg {
p { @extend .paragraph; }
}

Але я вас прошу, використовуйте клас .wysivig акуратно! Завжди застосовуйте його до нижчого рівня, щоб він змінював тільки контент, який надійшов з CMS.

Списки меню

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

  • Navigation item name

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

Боженьки ти мій, тепер мій жахливий HTML

Що, правда? Мені такий код читати набагато легше. Вам потрібно іменувати все, що ви робите. Так буде легше спілкуватися з іншими. Не просто ul, а список меню, не просто

, а опис товару. Не просто перший

, а вступ.

Normalize.css використовувати не можна?

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

Використовуйте властивість display у всіх класах

Щоб по-справжньому відокремити стилі від розмітки, вам необхідно буде в кожному класі задавати властивість display. Навіщо? З-за стилів браузера за замовчуванням. Уявіть:

Remember to always set a display property

І тут підходить ваш SEO спеціаліст і каже, що код повинен бути таким:

Remember to always set a display property

Давай-давай, ти сам можеш все поправити, — скажете ви, як розроблювач, який використовує незалежний CSS. Ви знаєте, що тег small инлайновый за замовчуванням, але вам-то яке діло. Ви, як маг CSS, передбачали такий сценарій і додали властивість display ще до того, як SEO спеціаліст спробував зруйнувати ваші мрії.

Узагальнюємо правила

не стилизуйте елементи, використовуйте класи, скрізь;

якщо не можете використовувати класи, використовуйте обгортки;

переписуйте значення браузера за замовчуванням в класах, особливо властивість display;

не перезаписывайте самі себе.

Що ми отримуємо

менше магії: стилі успадковуються тільки, якщо ви цього хочете;

менше писанини: ви переписуєте самі себе;

менше використовуємо правило !important: специфічність ніколи не повинна викликати проблем;

менше плутанини при читанні розмітки.

Ура! Хочете більше, підписуйтесь на мене ;) Якщо у вас залишились запитання або окремі випадки, питайте мене в коментарях.