<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

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

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

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

Подписавшись по 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):

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