<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Верстка по БЭМ методологии

Верстка по БЭМ методологии

BEM – это методология, разработанная в яндексе, расшифровывается, как:

Блок__элемент_модификатор

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

Блоки состоят из элементов, но не обязательно – например, блоки-контейнеры не содержат элементов. У блоков или элементов могут быть модификаторы – сущности, отвечающие за внешний вид, поведение или состояние.

Какие правила необходимо соблюдать, делая верстку по БЭМ методологии?

  1. Придумывая название блоку или элементу, ответьте себе на вопрос – Что это? (карточка: card)
  2. Имя элемента соответствует схеме: имя-блока__имя-элемента (через двойное подчеркивание).
  3. Давая имя модификатору, ответьте на вопрос – Какой?
  4. Имя модификатора отделяется от блока или элемента одним подчеркиванием: имя-блока_модификатор или имя-элемента_модификатор.
  5. В стилях блока с элементами не должны присутствовать свойства, влияющие на внешнее окружение и размеры (отступы, границы, позиционирование). Создайте внешний блок-обертку, которому и будете задавать опасные свойства.
  6. Не используйте в качестве селекторов названия тегов и id, только классы. Это дает взаимозаменяемость тегов, без необходимости изменять названия селекторов.

Пример верстки блока статистики:

Верстка по БЭМ методологии.

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

<div class="stat">..элементы..</div>

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

HTML код

<div class="statistics">
  <div class="container">
    <div class="stat">
      <div class="stat__item">
        <div class="stat__count">32</div>
        <div class="stat__text">web projects</div>
      </div>
      <div class="stat__item">
        <div class="stat__count">100</div>
        <div class="stat__text">happy client</div>
      </div>
      <div class="stat__item">
        <div class="stat__count">10</div>
        <div class="stat__text">award winner</div>
      </div>
      <div class="stat__item">
        <div class="stat__count">55</div>
        <div class="stat__text">cup of coffee</div>
      </div>
      <div class="stat__item">
        <div class="stat__count">35</div>
        <div class="stat__text">logos</div>
      </div>
    </div>
  </div>
</div>

CSS код

.statistics {
    background-color: #5d1900;
}

.container {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

.stat {
    display: flex;
    flex-wrap: wrap;
}

.stat__item {
    width: 20%;
    padding: 60px 25px;
    border-left: 1px solid #ab5131;
    text-align: center;
    color: #fff;
}

.stat__item:last-child {
    border-right: 1px solid #b5eae0;
}

.stat__count {
    margin-bottom: 10px;
    font-size: 70px;
    font-weight: 700;
    line-height: 1;
}

.stat__text {
    font-size: 14px;
    text-transform: uppercase;
}

Необходимость в БЭМ верстке

Если вы фрилансер и один работаете над проектом, то нет особой необходимости верстать по БЭМ. Обязательный навык БЭМ верстки – требование, которое исходит от работодателя, в размещаемых вакансиях на позицию верстальщика и front-end разработчика.

Для тех, кто ещё только начинает изучать верстку, посмотрите мой видео-курс "Вёрстка сайта с нуля 2.0".

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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