-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
60 lines (58 loc) · 5.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>БЭМ — будущее фронтенд разработки</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="all">
</head>
<body class="page">
<div class="header">
<h1 class="logo"><a href="#">Полный БЭМ</a></h1>
<ul class="menu">
<li class="menu__item"><a class="menu__link link" href="#">О методологии</a></li>
<li class="menu__item"><a class="menu__link link" href="#">Узнать больше</a></li>
<li class="menu__item"><a class="menu__link link" href="https://ru.bem.info">bem.info</a></li>
</ul>
</div>
<div class="headline">
<div class="headline__content">
<h2 class="headline__header">Методология БЭМ</h2>
<p class="headline__subheader">БЭМ расшифровывается как Блок-Элемент-Модификатор.</p>
<p>Методология БЭМ – это набор паттернов и способ описывать действительность при помощи кода и размышлять о сущностях вне зависимости от того, на каком языке программирования реализуется проект.</p>
<p>На основе этой методологии разработаны подходы к вёрстке и технические решения, которые позволяют быстро создавать новые страницы и легко поддерживать уже существующие.</p>
<p>
<input class="button button_view_action" type="submit" value="Узнать подробнее">
<input class="button" type="submit" value="Заказать консультацию">
</p>
</div>
<form class="form headline__form">
<h3 class="form__header">Задайте свой вопрос</h3>
<input class="form__input" type="text" value="имя">
<input class="form__input" type="text" value="email">
<textarea class="form__textarea" value="Ваш вопрос">Ваше сообщение</textarea>
<input class="button button_view_action" type="submit" value="Отправить">
</form>
</div>
<div class="content">
<div class="content__header">
<h3>БЭМ-методология была разработана в Яндексе для решения следующих задач:</h3>
</div>
<div>
<ul class="list">
<li class="list__item">Типовые проекты должны разрабатываться быстро, но жить долго. Необходимо уметь за короткий срок создавать проект, архитектура которого позволит без труда поддерживать и развивать его долгие годы.</li>
<li class="list__item">Над проектом работает много людей. Необходимо эффективно организовывать работу команд: как из двух разработчиков, так и из десятков.</li>
<li class="list__item">Масштабируемость команд. Добавление новых людей в команду должно улучшать её производительность. Рациональнее максимально быстро вводить новых разработчиков в курс дела и выделять им собственные зоны ответственности. Чтобы с одним и тем же кодом можно было работать долгое время и разным составом команды, код должен быть хорошо структурирован.</li>
<li class="list__item">Повторное использование кода. Работа над каждым новым проектом или элементом интерфейса не должна начинаться с нуля. Если внутри компании прежде уже выполнялась похожая задача, необходимо максимально эффективно задействовать имеющийся код. У кода не должно быть контекстной зависимости, его должно быть легко переносить из одного места в другое.</li>
</ul>
</div>
</div>
<div class="footer">
<h1 class="logo"><a href="#">Полный БЭМ</a></h1>
<ul class="menu">
<li class="menu__item"><a class="menu__link link" href="#">О методологии</a></li>
<li class="menu__item"><a class="menu__link link" href="#">Узнать больше</a></li>
<li class="menu__item"><a class="menu__link link" href="https://ru.bem.info">bem.info</a></li>
</ul>
</div>
</body>
</html>