Оригінальна публікація: CSS Cheat Sheet – 10 Tricks to Improve Your Next Coding Project

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

Тому, коли у вас виникають проблеми з CSS — не сердіться. Таке буває з кожним.

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

1. Як прибрати горизонтальну смугу прокручування вебсторінки в CSS

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

У прикладі на знімку екрана ви можете побачити горизонтальну смугу прокручування:

horizontalscroll1

Ви можете використати універсальний селектор (*), щоб знайти потрібний елемент, застосувавши наступні правила:

* { 
     border: 2px solid red;
}

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

Ось результат після застосування стилю:

horizontalscrollfix

Як бачите, друга зелена хвилька призводить до горизонтальної смуги прокручування. Причина в тому, що ширина має значення 1400px, а доступною шириною екрана є 1200px.

.wave2 {
  width: 1400px;
}

Щоб прибрати горизонтальну смугу прокручування, потрібно налаштувати ширину на 1200px або повністю видалити елемент.

horizontalScrollFixed

2. Як ігнорувати стиль у CSS

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

У таких випадках можна застосувати правила специфічності CSS або використати виняток !important перед правилом.

У прикладі нижче !important надає кожному елементу h1 смарагдового кольору #2ecc71 (мій улюблений колір):

h1 {
    color: #2ecc71 !important;
}

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

Причина в тому, що !important руйнує каскадну природу CSS і це може ускладнити налагодження.

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

Замість того, щоб використовувати !important для додавання стилів, ви можете дізнатись більше про специфічність CSS та застосувати ці правила.

3. Як зробити квадрат із CSS

Якщо ви хочете створити квадрат, не надто працюючи над шириною та висотою, ви можете стилізувати div (або span), встановивши колір фону, потрібну ширину та значення aspect-ratio на рівні числа. Перше число використовують для верхнього та нижнього розміру, а друге — для лівого та правого.

Ви можете піти далі та створити прямокутник чи будь-який інший чотирикутник, який забажаєте.

<div class="square"></div>

.square {
  background: #2ecc71;
  width: 25rem;
  aspect-ratio: 1/1;
}
square

4. Як відцентрувати div із CSS

Відцентрувати div може бути важкою справою, оскільки таблиця стилів збільшується. Щоб стилізувати будь-який div, надайте йому display зі значенням block, margin зі значенням auto та width зі значенням менше 100%.

<div class="center"></div>

.center {
    background-color: #2ecc71;
    display: block;
    margin: auto;
    width: 50%;
    height: 200px;
}
centeredDiv

5. Як вилучити зайвий відступ у блоці в CSS

Завдяки box-sizing: border-box можна впевнитись, що у блоці не буде зайвого відступу, коли ви налаштовуєте його ширину та відступ. Це допоможе вашим макетам мати кращий вигляд.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

6. Як зробити буквицю за допомогою CSS

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

Оберіть відповідний елемент HTML та застосуйте до нього стиль, як зробив я:

 <p class="texts">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia nisi
      veniam laboriosam? In excepturi ea inventore eligendi iusto! Incidunt
      molestiae quas molestias, nesciunt voluptate aut vitae odio corrupti
      quisquam laudantium aperiam consequuntur voluptas eum? Velit, eligendi ad
      laboriosam beatae corporis perferendis tempore consequatur sint rem quam,
      quae, assumenda rerum.
 </p>

p.texts::first-letter {
  font-size: 200%;
  color: #2ecc71;
}
dropcapScreen-1

7. Як змінити регістр у CSS

Великі чи малі літери не обов’язково повинні надходити з HTML. Ви можете зробити будь-який текст у ВЕРХНЬОМУ чи нижньому регістрі в CSS.

Сподіваюсь, у майбутньому будуть опції для SentenceCase та tOGGLEcASE. Але для чого використовувати tOGGLEcASE?

<p class="upper">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
      minima.
</p>
<p class="lower">LOREM IPSUM DOLOR SIT AMET</p>

.upper {
  text-transform: uppercase;
}

.lower {
  text-transform: lowercase;
}
transform

8. Як оголосити змінні, щоб CSS не повторювався

Змінні? Так. Ви можете оголосити змінні у CSS.

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

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

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

:root {
  --text-color: hsl(145, 63%, 49%);
}

p {
  color: var(--text-color);
}

9. Як використовувати селектори :before та :after, щоб додати додатковий вміст до CSS

Селектор :before у CSS дозволяє додати вміст перед елементом:

<p class="texts">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium,
  minima.
</p>

p.texts::before {
  content: "Some Lorem Texts: ";
  color: #2ecc71;
  font-weight: bolder;
}

Селектор :after виконує те саме, але додає вміст після елемента:

p.texts::after {
  content: " Those were Some Lorem Texts";
  color: #2ecc71;
  font-weight: bolder;
}
beforeAndAfter

10. Як отримати плавне прокручування завдяки чистому CSS

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

html {
  scroll-behavior: smooth;
}

Це все!

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