7 важливих порад для написання кращого CSS

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

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

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

Тож давайте почнемо ... ‌ ‌

1. СУХИЙ

DRY розшифровується як "Не повторюйся" . Це загальний принцип розробки програмного забезпечення і може застосовуватися в будь-якій мові програмування, а також у CSS. Як ми можемо зрозуміти з його назви, DRY прагне максимально уникати або зменшувати повторення.

Наприклад, ми можемо створити 3 класи CSS для 3 кнопок так:

.primary-button { background: blue; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .form-button { background: green; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .cancel-button { background: red; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; }

Або ми можемо використати принцип СУХОСТІ, написавши загальні правила один раз у додатковому класі та різні правила в інших класах:

.button { color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .primary-button { background: blue; } .form-button { background: green; } .cancel-button { background: red; }

Як ми бачимо, застосування принципу СУХОГО дозволяє уникнути повторення, зменшити кількість рядків та покращити читабельність і навіть продуктивність.

2. Найменування

Іменування селекторів CSS - ще один важливий момент для написання кращого CSS. Ім'я селектора повинно бути самоописовим і читабельним ...

// BAD NAMING .p { // Rules } .myFirstForm { // Rules }

Зазвичай,

є тегом HTML і означає абзац. Вище ми не можемо зрозуміти, що таке клас p . Крім того, слід уникати імен, таких як myFirstForm , і я не раджу використовувати футляр для верблюдів .

Замість цього використовуйте декларативні імена (розділені тире для декількох імен):

// GOOD NAMING .article-paragraph { // Rules } .contact-form { // Rules }

Я думаю, що імена зараз мають більше сенсу :)

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

3. Не використовуйте вбудовані стилі

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

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

Поділ проблем

Відповідно до принципу поділу проблем, дизайн (CSS), вміст (HTML) та логіку (JavaScript) слід розділяти з таких причин, як краща читабельність та обслуговування.

Включення правил CSS до тегів HTML порушує це правило:

 Some Text 
Нам краще скористатися нашими правилами стилізації у зовнішніх файлах CSS.

Труднощі в пошуку

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

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

 Some Text 

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

.text-bold { font-size: 16px; // change the font-size to 14px font-weight: bold; }

Але якщо правила написані вбудованому стилі замість використання класів:

 Some Text 

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

Чи не було б простіше із селектором CSS? Але є щось ще гірше ...

Проблеми зі специфічністю / перезаписом

Вбудовані стилі мають найвищу специфіку серед селекторів CSS (коли ми не враховуємо ! Важливих тегів ).

Враховуючи, що ми використовуємо як клас, так і вбудований стиль для елемента:

.text-bold { font-size: 16px; font-weight: bold; }
 Some Text 

Тут розмір шрифту тексту складатиме 14 пікселів , оскільки вбудовані стилі мають вищу специфічність, ніж класи CSS. Коли ви вносите зміни в клас:

.text-bold { font-size: 20px; font-weight: bold; }

Розмір шрифту все одно буде 14 пікселів. Отже, ваша зміна в класі CSS не буде працювати, що в кінцевому підсумку скаже вам:

"Ей, чому мій код CSS не працює? Я ненавиджу CSS!"

і наведе вас до використання ! важливого тегу, який робить магію:

.text-bold { font-size: 20px !important; font-weight: bold; }

Що є великим ні-ні і веде нас до наступної точки ...

4. Avoid the !important tag

OK, so your CSS wasn't working as was supposed to, and you made it work by applying the important tag:

!important

What happens next? The !important tag has the highest specificity of all CSS selectors.

You're basically saying to the browser to apply that specific rule with the !important tag always and under any circumstances. This is not good because CSS rules can differ from one selector to another, from parent selector to child.

The only way to override an important tag is to use another important tag. And this leads to using more and more important tags. Trust me, in the near future your project code will be full of !important tags, which makes your CSS code much harder to maintain. So try not to use it.

5. Use a Preprocessor

Working with a CSS Preprocessor like Sass or LESS is very useful in bigger projects. A preprocessor brings additional features to our CSS code that we normally can't do.

For example, we can define variables, functions and mixins, we can import & export our CSS files in other CSS files and we can write nested CSS code:

A preprocessor has its own syntax and later it gets translated into standard CSS (in a separate CSS file) because browsers don't understand the syntax.

I like working with Sass and have used it in various projects. I have covered some of the advantages of using a CSS Preprocessor here.

6. Use Shorthands

Some of the CSS properties like paddings, margins, fonts and borders can be written in a much simpler way by shorthands. Using shorthands helps to reduce the lines of rules.

So without shorthands, a CSS class would look like this:

.article-container { padding-top: 10px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; margin-top: 10px; margin-bottom: 10px; margin-left: 15px; margin-right: 15px; border-width: 1px; border-style: solid: border-color: black; }

and with shorthands it looks like this:

.article-container { padding: 10px 15px 20px 15px; margin: 10px 15px; border: 1px solid black; }

You can find here more info about how to use shorthands properties and for which CSS properties they can be applied.

7. Add Comments When Necessary

Normally, quality code doesn't need comments because it should already be clear and self-descriptive. But still, in some cases, we may need to write additional explanations.

// Your Comments .example-class { // your rules }

So when you feel that some parts of the code are unclear, then don't be afraid to add comments (but on the other hand, make sure not to overdo it :)).

As a Frontend Developer with a couple of years of experience, these are the most important tips that I can suggest for improving your CSS skills. If you have any questions, or you think there are also other tips for writing better CSS, don't hesitate to comment down below.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!