# %%%1%%%

%%%2%%%

* %%%3%%%
* %%%4%%%
* %%%5%%%
* %%%6%%%

## %%%7%%%

%%%8%%%

%%%9%%% %%%10%%%

%%%11%%% %%%12%%% %%%13%%%

%%%14%%%

```html
%%%15%%%
```

%%%16%%%

```css
.item
{
    padding: 4px 10px;
    color: black;
}

.active
{
    font-weight: bold;
    background: #ffc7c7;
}
```

%%%17%%%

%%%18%%% %%%19%%% %%%20%%% %%%21%%%

%%%22%%% %%%23%%%

%%%24%%%

%%%25%%%

%%%26%%%

* %%%27%%%
* %%%28%%%
* %%%29%%%
* %%%30%%%

%%%31%%%

```html
%%%32%%%
```

%%%33%%%

%%%34%%%

```html
%%%35%%%
```

%%%36%%%

```css
.nav__item
{
    padding: 4px 10px;
    color: black;
}

.nav__item_active
{
    font-weight: bold;
    background: #ffc7c7;
}
```

%%%37%%% %%%38%%% %%%39%%% %%%40%%%

>%%%41%%%

>* %%%42%%% %%%43%%%

>* %%%44%%% %%%45%%% %%%46%%%

### %%%47%%%

%%%48%%%

%%%49%%% %%%50%%%

%%%51%%%

%%%52%%% %%%53%%%

%%%54%%%

* %%%55%%%
* %%%56%%%
* %%%57%%%

%%%58%%% %%%59%%%

%%%60%%%

```css
form {}

input
{
    background: red;
}

input[type=submit]
{
    background: buttonface
}
```

%%%61%%%

* %%%62%%%
* %%%63%%%

%%%64%%%

%%%65%%%

```css
.form {}
.field {}
.submit {}
```

%%%66%%% %%%67%%% %%%68%%%

%%%69%%%

```css
.form {}
.form_search {}
.form__field {}
.form__submit-button {}
```

%%%70%%% %%%71%%%

* %%%72%%%
* %%%73%%%
* %%%74%%%

%%%75%%% %%%76%%% %%%77%%% %%%78%%%

%%%79%%% %%%80%%%

## %%%81%%%

%%%82%%%

%%%83%%% %%%84%%%

%%%85%%%

```html
%%%86%%%
```

%%%87%%%

```css
.item
{
    padding: 4px 10px;
    color: black;
}
```

%%%88%%%

```html
%%%89%%%
```

%%%90%%% %%%91%%%

```css
.item
{
    padding: 4px 10px;
    color: black;
}

.snippets .item
{
    color: red;
    font-size: 14px;
}
```

%%%92%%% %%%93%%%

%%%94%%%

%%%95%%%

%%%96%%% %%%97%%%

%%%98%%%

```html
%%%99%%%
```

```css
.nav__item
{
    padding: 4px 10px;
    color: black;
}
```

%%%100%%%

```html
%%%101%%%
```

%%%102%%%

```css
.snippets__item
{
    padding: 4px 10px;
    color: red;
    font-size: 14px;
}
```

%%%103%%% %%%104%%%

Такой подход дает возможность защитить элементы от взаимного влияния друг на друга — элементы всегда являются частью блока. %%%106%%% %%%107%%%

%%%108%%% %%%109%%%

### %%%110%%%

%%%111%%%

%%%112%%%

```css
.nav_hovered .nav__link
{
    text-decoration: underline;
}
```

```css
.nav_theme_islands .nav__item
{
    line-height: 1.5;
}
```

_______________________________________________

%%%113%%%
________________________________________________

## %%%114%%%

%%%115%%%

%%%116%%%

%%%117%%% %%%118%%%

* %%%119%%%
* %%%120%%%

%%%121%%% %%%122%%%

%%%123%%%

%%%124%%%

```html
%%%125%%%
```
%%%126%%%

%%%127%%%

%%%128%%% %%%129%%%

%%%130%%%

```html
%%%131%%%
```

%%%132%%% %%%133%%% %%%134%%%

>%%%135%%% %%%136%%%