Принципи написання чистого css коду
Занадто часто великі (та й дрібні) сайти страждають від занадто розрісся, і по суті, надлишкового CSS коду, де можна знайти велику кількість зайвих елементів, занадто довгі і конкретизовані вираження, велику залежність одних селектор від інших, часте і недоцільне використання! Important і так далі. Для оптимізації наших таблиць стилів, ми звичайно ж можемо скористатися якимись базовими основами написання CSS коду. Що ми дійсно повинні робити, так це домагатися гарного структурування таблиць стилів і прагнути до підвищення стійкості до високих навантажень.
Отже, наш підхід буде полягати в двох принципах. По-перше, ми повинні використовувати базові правила написання чистого і ефективного CSS коду. По-друге, нам необхідно застосовувати різні методи і підходи для організації гарної архітектури коду і виведення наших таблиць стилів на новий рівень.
У цьому уроці ми торкнемося ці теми, але перед цим давайте подивимося на кілька прикладів очищення CSS коду.
Кілька корисних методів
Частенько чийсь чужий досвід буває дуже корисним. Давайте розглянемо декілька прикладів:
Швидкий доступ до елементів
Дуже важливо мати можливість отримувати швидкий доступ до якогось стилю прямо зі сторінки. Для цього можна скористатися різними інструментами, такими як Explorer Developer Toolbar, Mozilla Firebug або Chrome Developer Tools. Використовуючи дані інструменти, ми можемо швидко знаходити те, що нам потрібно, і тут же міняти, бачачи результат.
У цьому фрагменті присутній властивість outline. Воно використовується для одночасного присвоєння кольору, стилю і товщини зовнішнього кордону на всіх чотирьох сторонах елементу. Тут я вибрав слово red для визначення кольору кордону і зауважте, не просто так. Для визначення кінцевих квітів завжди користуйтеся rgb або hsl кодами, а для тимчасових - цільними словами. Це допоможе вам в майбутньому швидко знайти потрібні фрагменти і усунути спірні моменти, що виникли під час розробки. Будьте обережні з використанням властивості outline, тому що воно не працює в Internet Explorer 8.
Додавання тестових стилів
Ще однією доброю практикою є додавання відступу для якихось тестових або тимчасових властивостей.
Завдяки цій техніці ви зможете відразу ж визначити, які властивості тимчасові, а які ні. Якщо ви вирішили, що запис може залишитися, просто приберіть відступ.
відключення стилів
Часто при написанні CSS коду нам потрібно відключати якісь стилі. Мало хто знає, але для цього можна до властивості приписати префікс "x-":
Очищення і оптимізація CSS коду
Тепер, коли ми познайомилися з кількома трюками, давайте поговоримо про те, як можна очистити наш CSS код. Тут йтимемо від більшого до меншого. В першу чергу, розглянемо, як краще написати HTML код, а потім, як написати для нього ефективний стиль.
Макро-оптимізація
Перш ніж приступити до оптимізації таблиць стилів, нам потрібно написати добре Новомосковскбельний HTML і CSS код.
Формування інформації і визначення структури таблиці стилів
В першу чергу, я рекомендую вставляти якусь інформацію про користувача (ім'я, ...), час останньої правки файлу. Даний прийом може зіграти свою роль, якщо в майбутньому виникнуть якісь питання, пов'язані з цими даними.
Знак "=" в останньому виразі використовується виключно для спрощення пошуку окремо взятої секції.
Анотації та відображення вкладеність
Анотації та відображення вкладеності елементів допомагають розробнику відстежити початок і кінець якогось блоку. Таким чином, окремі шматочки коду будуть швидко перебувати.
Анотації формуються за допомогою таких висловів: або просто .
Відображення вкладеності елементів може здатися кроком зайвим, але він дозволяє значно спростити Новомосковскбельность коду, зробити елементи візуально зрозумілими, швидко знайти проблемні місця, включаючи місця з пропущеними закриваються тегами, і так далі.
Різницю між добре і погано структурованим кодом, ви можете побачити в наступних прикладах.
Мікро-оптимізація
Мікро-оптимізація спрямована на зменшення розміру файлу і збільшення швидкості завантаження сторінки.
Сортування властивостей в алфавітному порядку
Сортування CSS властивостей в алфавітному порядку - це відмінний спосіб зберігати ваш код чистим і уникнути зайвих проблем. Чому? Тому що потрібний фрагмент можна буде швидко знайти і виправити.
Збільшення ефективності коду
Довгі селектори змушують браузер зайвий раз проходитися по DOM-у і шукати збіги. Більш конкретизовані назви селектор дозволяють уникнути дану проблему.
Пишіть просто і коротко
Чим менше написано коду, тим ефективніше працює сторінка. Для визначення стилів дотримуйтесь наступних правил.
- Використовуйте короткі назви CSS властивостей всюди, де це можливо;
- Пишіть скорочені значення властивостей;
- Уникайте дублювання CSS властивостей.
скорочуйте код
Пам'ятайте про ці правила, коли в наступний раз будете писати CSS код. Для спрощення вашої роботи можете скористатися спеціально створеними для цього інструментами. Наприклад: CleanCSS. Користуйтеся всім, чим тільки можна, щоб зробити ваш код краще.
Невеликий ефект з інтерактивною анімацією букв.
Невеликий концепт кумедних підказок, які реалізовані на SVG і anime.js. Крім особливого стилю в прикладі реалізована анімація і трансформація графічних об'єктів.
Експеримент: анімовані SVG літери на базі бібліотеки anime.js.
Прикольний експеримент веб сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.
Експериментальний скрипт розкривається навігації.
жалісливий
Частина "рад" цілком очевидна. Будь-який фахівець, рано чи пізно, приходить до такої системи.
Так я не проти. Коли починав css і html таких статей не було. Доводилося як сапер - крок вправо, крок вліво підрив, стрибок вгору провокація.
stas.protasevich
Є програми для "оптимізації" html, які пресують, але його потім важко редагувати. Якщо таке завдання стоїть то треба використовувати два "набору" файлів. Але якщо подивитися код яндекса, гугля і інших "дорослих", вони не дуже на цю тему переймаються. 1 редагований 2 завантаження == спресований редагований. Я б додав - для прискорення ще краще використовувати спрайт в якості фонів.
Оптимізація html шляхом стиснення, описаного в першому питанні - не найкраща ідея тому навіть найбільший html-файл набагато менше неправильно підготовленою картинки. Уявіть ситуацію: ви прогнали html через Компресорами, загнали в gzip - в результаті отримали зменшення ваги файлу з 250Кб до 25. При цьому у вас на сторінці лежить картинка в форматі png24, та ще без прозорості, та ще стиснуті в розмірах засобами CSS з 1600px по ширині до 450. Так ось стиснення цієї картинки шляхом перегону в jpg без втрат і фізичне стиснення її розмірів до потрібних зменшить її вагу скажімо з 1мб до 100 Кб. Думаю різниця очевидна. До того ж правити стислий html-код - знущання над самим собою.
Згоден щодо картинок повністю. Таке можна допускати тільки якщо картинку береш з чужого сайту, а в інших випадках - будь добрий, зменш і пропиши розміри.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!