Введение в атомарный CSS с примерами

Опубликовано: 26 Февраля, 2022

Атомарный CSS направлен на решение некоторых традиционных проблем CSS с использованием классов, которые являются одноцелевыми модулями стилизации. Атомарный CSS использует неизменяемые классы, которые несут полную ответственность за применение стиля модуля к выбранному компоненту пользовательского интерфейса. Короче говоря, атомарный CSS - это одно правило для одного стиля. Он пытается сделать стиль более вариативным и предсказуемым.

Проблема с традиционным CSS: CSS широко используется для стилизации веб-приложений. Пре-процессоры CSS, такие как Sass и LESS, используются для упрощения стилизации. Однако во время разработки огромного веб-приложения стили, используемые во всем приложении, часто повторяются. Есть несколько причин для повторения кода CSS, например:

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

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

Проблемы, решаемые с помощью Atomic CSS Следующие проблемы решаются с помощью Atomic CSS:

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

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

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

Example 1: This example demonstrates a simple working example of Atomic CSS.

Step 1: Create a HTML document and add the starter code for the website. Create a stylesheet and link it to this HTML document.

Step 2: In the body, add a division tag as well as heading tag with text in it with the classes as shown below:

html

<!DOCTYPE html>
<html>
  
<head>
    <title>
        GfG Atomic CSS Example
    </title>
    <link rel="stylesheet" 
        type="text/css" href="styles.css">
</head>
  
<body>
    <div class="Bgc(#00FF00)">
        <h1 class="C(#FFFFFF)">
            Geeks For Geeks
        </h1>
    </div>
</body>
  
</html>

Step 3: Define the classes used in the HTML page in the stylesheet and add the required styling corresponding to the name of the class.
```
.Bgc(#00FF00) {
  background-color: #00ff00;
}
.C(#FFFFFF) {
  color: #ffffff;
}
```
As the class name suggests, Bgc(#00FF00) is used to add green (#00FF00) as the background color, and C(#FFFFFF) is used to add white (#FFFFFF) as the color of the text. This example can now be run on a browser.

Output:

Pseudo-classes: These are elements added to a selector in order to specify a particular state. Some of the Pseudo classes with their corresponding suffix maps are as follows:

Pseudo Class	Suffix Map
:focus	f
:active	a
:hover	h
:checked	c

Example 2: In this example a pseudo-class is used with Atomic CSS.

Step 1: Create a HTML document and add the starter code for the website. Create a stylesheet and link it to this HTML document.

Step 2: Add a container class which has the first child division containing the header text.

html

<!DOCTYPE html>
<html>
  
<head>
    <title>
        GfG Atomic CSS Pseudo
        Class Example
    </title>
    <link rel="stylesheet" 
        type="text/css" href="./styles.css">
</head>
  
<body>
    <div class="container">
        <h1 class="D(1):h">
            Geeks For Geeks
        </h1>
    </div>
</body>
  
</html>

Step 3: Define the D(1):h class used in the HTML page in the stylesheet and add the required styling corresponding to the name of the class.

.D(1):h:hover {
  background-color: green;
  color: white;
}

As the class name suggests, D(1) is the first child division inside the container. Adding a hover pseudo class to it, like D(1):hover, and representing it as D(1):h makes it conform to the Atomic CSS syntax. Thus using the :hover pseudo-class, the given styling class is applied whenever the element is hovered over.

Before Hover:

After Hover:

HTML CSS-Misc HTML-Misc CSS

Введение в атомарный CSS с примерами

html

html

РЕКОМЕНДУЕМЫЕ СТАТЬИ