27.07.2023 в 14:00

Фронтенд практика: CSS и SCSS

Давайте рассмотрим некоторые лучшие практики CSS с примерами:

О CSS:

Используйте внешние таблицы стилей:

Вместо встроенных стилей или внутренних стилей предпочтительнее использовать внешние таблицы стилей. Создайте отдельный файл CSS и свяжите его с вашими HTML-документами. Это способствует повторному использованию кода и тестированию.

Пример:

styles.css

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Your content here -->
</body>
</html>

Следуйте методологии CSS:

Используйте методологию CSS, такую как BEM (блок, элемент, модификатор), чтобы организовать свои классы CSS и сделать их более управляемыми.

Пример:

<div class="header">
  <h1 class="header__title">Welcome to our website</h1>
</div>

styles.css

.header {
  background-color: #007bff;
  padding: 20px;
}

.header__title {
  color: #fff;
  font-size: 24px;
}

Избегайте использования идентификаторов для стилей:

Идентификаторы имеют более высокую специфичность, чем классы, что может привести к проблемам с переопределением стилей. Зарезервируйте идентификаторы для взаимодействий с JavaScript и используйте классы для стилизации.

HTML:

<div class="header" id="main-header">
  <h1 class="header-title">Welcome to our Website</h1>
</div>

CSS (избегание идентификаторов для стилей):

/* styles.css */
.header {
  /* Common styles for all headers */
  font-size: 24px;
  color: #333;
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
}

/* Specific styles for the main header */
#main-header {
  /* Avoid styling directly using the ID */
  border-bottom: 2px solid #007bff;
}

Сохраняйте низкую специфичность селекторов:

Используйте простые селекторы и избегайте глубокой вложенности классов. Это делает ваши стили более удобными в сопровождении и снижает риск непреднамеренного переопределения стилей.

HTML:

<div class="container">
  <h2 class="section-title">Section Title</h2>
  <p class="section-text">This is some text in the section.</p>
</div>

CSS (сохранение специфичности селекторов на низком уровне):

/* styles.css */
.container {
  /* Specificity kept low for container class */
  background-color: #f0f0f0;
  padding: 20px;
}

.container .section-title {
  /* Specificity kept low for section title */
  font-size: 24px;
  color: #007bff;
}

.container .section-text {
  /* Specificity kept low for section text */
  font-size: 16px;
  color: #333;
}

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

Ограничьте использование !important:

Избегайте использования !important для переопределения стилей. Вместо этого проведите рефакторинг CSS, чтобы он был более специфичным, или используйте более конкретные селекторы.

HTML:

<button class="btn btn-primary">Click Me</button>

CSS (Избегая !important):

/* styles.css */
.btn {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

/* Avoid using !important, and instead, use proper class specificity */

В этом примере мы избегаем использования !important. Мы полагаемся на селекторы классов для стилизации, что помогает поддерживать надлежащую специфичность. Используя соответствующие селекторы классов, мы гарантируем, что стили .btn-primary будут иметь приоритет над базовыми стилями .btn. Крайне важно использовать правильные имена классов и специфичность вместо того, чтобы прибегать к !important для поддержания чистой и поддерживаемой кодовой базы.

Используйте Flexbox или Grid для макетов:

Воспользуйтесь CSS Flexbox или Grid для создания адаптивных и гибких макетов страниц, поскольку они предоставляют мощные возможности макетов.

Пример:

/* styles.css */
.container {
  display: flex;
  justify-content: space-between;
}

.sidebar {
  flex-basis: 30%;
}

.main-content {
  flex-basis: 70%;
}

HTML:

<div class="container">
  <div class="sidebar">
    <!-- Sidebar content -->
  </div>
  <div class="main-content">
    <!-- Main content -->
  </div>
</div>

Используйте переменные CSS (пользовательские свойства):

Используйте переменные CSS для хранения и повторного использования значений в вашей таблице стилей. Они способствуют согласованности и упрощают обновление глобальных стилей.

Пример:

/* styles.css */
:root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
}

Оптимизация и минимизация CSS:

Минимизируйте файл CSS, удалив ненужные пробелы и комментарии. Вы можете использовать различные инструменты и плагины для автоматизации этого процесса во время сборки или развертывания.

Следуя этим передовым методам работы с CSS, вы сможете писать более понятные, удобные в сопровождении и производительные таблицы стилей, делая процесс разработки интерфейса более эффективным и результативным.

О SCSS:

Используйте вложенные селекторы с умом:

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


.header {
  .nav {
    ul {
      li {
        a {
          color: blue;
        }
      }
    }
  }
}

// Better practice: Limit nesting
.header {
  .nav {
    li {
      a {
        color: blue;
      }
    }
  }
}

Используйте переменные:

Воспользуйтесь преимуществами переменных для хранения повторно используемых значений, таких как цвета, размеры шрифта или интервалы. Это упрощает поддержку и последовательное изменение стилей.

$primary-color: #007bff;
$font-size-base: 16px;

// Usage
.header {
  background-color: $primary-color;
  font-size: $font-size-base;
}

Избегайте селекторов идентификаторов:

Предпочитайте использовать селекторы классов, а не селекторы идентификаторов. Селекторы идентификаторов имеют более высокую специфичность, что затрудняет их переопределение и приводит к негибкости CSS.

// Bad practice: Using ID selector
#main-container {
  // styles...
}

// Better practice: Using class selector
.main-container {
  // styles...
}

Модульность с частями:

Разделите код SCSS на частичные файлы меньшего размера. Это помогает организовать ваши стили и делает их более управляемыми.

styles/
|-- _variables.scss
|-- _header.scss
|-- _footer.scss
|-- main.scss

Используйте @extend экономно:

Хотя @extend может быть полезен для повторного использования стилей, будьте осторожны, так как это может привести к раздуванию CSS. Используйте его только тогда, когда вам нужно разделить значительное количество стилей между селекторами.

// Bad practice: Overuse of @extend
.button {
  border: 1px solid #ccc;
  padding: 10px;
}

.submit-button {
  @extend .button;
  background-color: #007bff;
}

.cancel-button {
  @extend .button;
  background-color: #dc3545;
}

// Better practice: Use classes instead of @extend
.button {
  border: 1px solid #ccc;
  padding: 10px;
}

.submit-button {
  @extend .button;
  background-color: #007bff;
}

.cancel-button {
  @extend .button;
  background-color: #dc3545;
}

Используйте Mixins для повторно используемых стилей:

Mixins позволяют вам определять повторно используемые блоки стилей, которые могут быть включены в несколько селекторов.

// Mixin
@mixin button-styles {
  border: 1px solid #ccc;
  padding: 10px;
}

// Usage
.button {
  @include button-styles;
}

.submit-button {
  @include button-styles;
  background-color: #007bff;
}

.cancel-button {
  @include button-styles;
  background-color: #dc3545;
}

Используйте % селекторы-заполнители для расширения:

Если вам нужно расширить стили, но вы не хотите создавать дополнительные классы CSS, используйте селекторы-заполнители с %, чтобы предотвратить создание дополнительного CSS.

// Placeholder selector
%button-styles {
  border: 1px solid #ccc;
  padding: 10px;
}

// Usage
.button {
  @extend %button-styles;
}

.submit-button {
  @extend %button-styles;
  background-color: #007bff;
}

.cancel-button {
  @extend %button-styles;
  background-color: #dc3545;
}

Используйте родительский селектор:

Символ & позволяет ссылаться на родительский селектор, что позволяет создавать более конкретные стили.

// Nested selector
.button {
  &:hover {
    background-color: #ddd;
  }
}

// Output
.button:hover {
  background-color: #ddd;
}

Эти рекомендации должны помочь вам писать более чистый и удобный для сопровождения код SCSS. Помните, что ключом к хорошему SCSS является организация, возможность повторного использования и отказ от слишком специфичного вывода CSS.

Источник:

Selected Sort Option

#CSS #HTML

168

Войти на сайт

Фронтенд практика: CSS и SCSS

О CSS:

Используйте внешние таблицы стилей:

Следуйте методологии CSS:

Избегайте использования идентификаторов для стилей:

Сохраняйте низкую специфичность селекторов:

Ограничьте использование !important:

Используйте Flexbox или Grid для макетов:

Используйте переменные CSS (пользовательские свойства):

Оптимизация и минимизация CSS:

О SCSS:

Используйте вложенные селекторы с умом:

Используйте переменные:

Избегайте селекторов идентификаторов:

Модульность с частями:

Используйте @extend экономно:

Используйте Mixins для повторно используемых стилей:

Используйте % селекторы-заполнители для расширения:

Используйте родительский селектор:

Источник: