components

Вёрстка (HTML/CSS)

Компонентная вёрстка

Компонентная верстка - создание малых и независимых компонентов, которые могут быть применены в разных местах

Многократно используемый CSS-компонент может размещаться в различных частях дерева DOM и не требует использования только определенных типов элементов

Компоненты должны иметь все необходимое для определенной части пользовательского интерфейса и фокусироваться на одном элементе

Каждый компонент должен быть изолирован, то есть он должен быть независим от других компонентов

---

Технология BEM ( block, element, modifier ), разработанная ребятами из Яндекса, представляет собой способ информативного именования CSS-классов, чтобы сделать их более понятными для других разработчиков

Смысл BEM заключается в том, чтобы рассказать другим разработчикам больше о том, что делает фрагмент разметки только от своего имени

Прочитав некоторый HTML-код с некоторыми классами, можно понять, как связаны элементы

• что-то может быть просто компонентом
• что-то может быть дочерним элементом этого компонента
• а что-то может быть вариацией или модификатором этого компонента

Схема именования CSS-классов:

.block { ... }
.block__element { ... }
.block--modifier { ... }

где

• .block представляет класс компонента
• .block__element представляет класс потомка элемента класса .block
• .block--modifier представляет другую версию класса .block

^{Здесь использованы двойные, а не одиночные дефисы и подчеркивания
Причина этого в том, что в имени самого блока может быть использован дефис или подчеркивание}

/* Блок */
.site-search { ... } 

/* Элемент */
.site-search__field { ... } 

/* Модификатор */
.site-search--full { ... } 

---

1

.person {}
.person__hand {}
.person--female {}
.person--female__hand {}
.person__hand--left {}

---

2

html

<nav id="nav">
    <ul class="main-nav">
        <li>
            <a href="#">Main-item 01</a>
	    <ul class="dropdown">
	        <li><a href="#">Sub-item 01</a></li>
		<li><a href="#">Sub-item 02</a></li>
		<li><a href="#">Sub-item 03</a></li>
		<li><a href="#">Sub-item 04</a></li>
            </ul>
        </li>
        <li><a href="#">Main-item 02</a></li>
        <li><a href="#">Main-item 03</a></li>
        <li><a href="#">Main-item 04</a></li>
    </ul>
</nav>

css

:root {
    --hover-back: #457;
    --menu-back: #bbc;
}
html {
    font-family: Arial;
    font-size: 16px;
}
.main-nav {
    font-size: 0;
    line-height: 0;
    background: var(--menu-back);
    padding-left:0;
}

.main-nav > li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: 1rem;
    line-height: 1rem;
    border-left: 2px solid #fff;
}

.main-nav > li:hover .dropdown {
    opacity: 1;
    visibility: visible;
}

.main-nav > li:hover > a {
    color: #fff;
    background: var(--hover-back);
}

.main-nav > li > a {
    display: block;
    color: var(--hover-back);
    padding: 20px 30px;
    transition: background .5s ease;
    text-decoration: none;
}

.main-nav a:hover {
    color: #fff;
    background: var(--hover-back);
}

.dropdown {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 100%;
    width: 100%;
    background: #dde;
    border: 2px solid #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease;
    padding-left: 0;
}

.dropdown > li {
    border-bottom: 1px solid #fff;
    list-style-type: none; 
    list-style-position: outside;
}

.dropdown > li:last-child {
    border-bottom: 0;
}

.dropdown > li > a {
    display: block;
    padding: 1rem;
    text-decoration: none;
    color: #555;
}

---

3

html

<figure class="overshadow">
  <img src="https://images.pexels.com/photos/450038/pexels-photo-450038.jpeg"
       alt="Welcome"
       class="overshadow__image">
  <div class="overshadow__shadow">
    <div class="overshadow__text">Welcome</div>
  </div>
</figure>

css

.overshadow {
    position: relative;
    width: 50%;
    margin: 0 25%;
    box-sizing: border-box;
}

.overshadow__image {
    display: block;
    width: 100%;
    height: auto;
}

.overshadow__shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: .5s ease;
    background-color: #003030b0;
    transform: rotate(30deg) scale(0.5);
}

.overshadow:hover .overshadow__shadow {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.overshadow__text {
    font-family: Arial;
    color: white;
    font-size: 5vmin;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

---

4

html

<section class="component" mess="Welcome">
  <figure class="component__figure component__figure--1">
  </figure>
</section>

css

body, html {
    margin: 0;
}

.component {
    height: 100vh;
    margin: 0;
    text-align: center;
}

.component:after {
    content: attr(mess);
    font-family: Arial;
    font-size: 7vmin;
    font-weight: bold;
    color: #550;

}

.component__figure {
    height: 50%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    margin: 0 0 1rem 0;
}

.component__figure--1 {
    background-image: url("https://images.pexels.com/photos/1089168/pexels-photo-1089168.jpeg");
}
.component__figure--2 {
    background-image: url("https://images.pexels.com/photos/371589/pexels-photo-371589.jpeg");
}

---

4️⃣ Forms

html

<form action="#" class="form-wrap">
	<div class="form-col">
		<input type="text" placeholder="Name">
	</div>
	<div class="form-col">
		<input type="email" placeholder="Email">
	</div>
	<div class="form-col">
		<input type="password" placeholder="Password">
	</div>
	<button type="submit">Submit</button>
</form>

css

.form-wrap .form-col {
	margin-bottom: 15px;
}

.form-wrap input {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	border: 1px solid #000;
}

---

• Быстрый старт