<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Пример БЭМ верстки на flexbox

Пример БЭМ верстки на flexbox

На примере формы из реального тестового задания, я покажу вам, как верстать по БЭМ, используя flexbox. Вы спросите: "Почему обязательно верстать по БЭМ + Flexbox?" Это требование исходит от работодателя. Цитата из ТЗ: "Старайтесь верстать без фреймворков (желательно на flexbox), просто и понятно: избегайте громоздких конструкций и лишнего кода, используйте методологию БЭМ."

Фрагмент макета секции с формой


Пример БЭМ верстки на flexbox.

Мои правила верстки

  1. Разделить макет на логические секции
  2. Каждую секцию начинать с тега section
  3. Отделять секции и CSS правили друг от друга, пустой строкой
  4. Каждому тегу присвоить класс
  5. Название класса для блока или элемента, отвечает на вопрос - Что это?
  6. Имя модификатора отвечает на вопрос - Какой?

HTML разметка

Сначала я делаю разметку, определяю вложенность блоков и придумываю названия классам. В представленном ниже коде, у нас имеются два строчных тега - h2 и input. Строчные теги - это головная боль и причина стресса, у начинающих верстальщиков. Почему? Они очень плохо себя ведут - пытаются занять всю доступную ширину, не дают установить цвет фона и размеры у всего блока.

<section class="info">
    <div class="info__icon"></div>
    <h2 class="info__title">Личная информация</h2>
    <div class="info__form">
        <form>
        <input class="info__input info__input_long" placeholder="ФИО">
        <input class="info__input info__input_short" placeholder="Год рождения">
        <input class="info__input info__input_long" placeholder="Место проживания">
        <input class="info__input info__input_long" placeholder="Skype">
        <input class="info__input info__input_long" placeholder="E-mail">
        </form>
    </div>
</section>

Что в таком случае делает плохой верстальщик? Он оборачивает строчные элементы в блочные теги div и все нужные свойства задаёт тегу обертке. Дочерние строчные элементы, наследуют эти свойства. А стоит ли городить огород из лишнего кода? Как поступит грамотный верстальщик? Он переопределит строчный элемент в блочный или строчно-блочный, в CSS правилах.

display: block; // для тега input
display: inline-block; // для тега h2

Логика вложенности и названия блоков

Мы видим секцию с личной информацией, так и называем класс секции - info. Секция состоит из трех дочерних элементов:

иконка // название класса info__icon
заголовок // info__title
форма // info__form

Пример БЭМ верстки на flexbox.

Суть в названии классов по БЭМ, состоит в принадлежности дочернего элемента к родителю. Нельзя назвать элемент, icon. Это не просто какая-то иконка, а иконка из секции info.

Дочка и родитель в одном лице

Блок info__form, у нас особенный - он вложен в секцию info, но в тоже время, содержит поля формы. Название этому явлению - многоуровневая вложенность. Блок с формой, несет чисто оберточную функцию для инпутов, чтобы легко можно было задать внешние отступы. Ведь строчные инпуты ведут себя, как дети (кем они и являются), совсем не слушаются. Причем второй инпут, короче всех остальных и отличается только шириной.

Задаем один класс для всех инпутов с одинаковыми свойствами, кроме ширины - info__input. Обычным инпутам, добавим модификатор info__input_long, а короткому инпуту - модификатор info__input_short. Напомню, что модификатор по БЭМ, должен отвечать на вопрос - Какой?

<div class="info__form">
    <form>
    <input class="info__input info__input_long" placeholder="ФИО">
    <input class="info__input info__input_short" placeholder="Год рождения">
    <input class="info__input info__input_long" placeholder="Место проживания">
    <input class="info__input info__input_long" placeholder="Skype">
    <input class="info__input info__input_long" placeholder="E-mail">
    </form>
</div>

CSS правила для модификаторов

.info__input_long {
    width: 520px;
}


.info__input_short {
    width: 320px;
}

CSS код

В HTML разметке создается грубая структура сайта, в CSS, мы уже размещаем элементы, согласно макету. Сегодня, мы не будем касаться внешнего вида, а сосредоточимся на позиционировании элементов. В нашей секции, два флексовых контейнера. Надо сказать, что использование флексов, при расположении всех элементов по одному в строке, очень сомнительно. Единственная получаемая польза - это свойство justify-content, выравнивающее по центру, флекс элементы. Могу сказать в своё оправдание, что, затея с флексами бессмысленная, в контексте только этой секции. Настоящий макет для верстки, обычно имеет больше разнообразия.

.info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 77px;
    height: 100%;
}


.info__form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    margin-top: 50px;
}

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.