4 сообщения в этой теме

Сделал для себя учебную верстку по бесплатному макету. Вопросы на которые, возможно, мне смогут дать ответы более опытные верстальщики:
- Постарался соблюсти принцип БЭМ для именования классов. Верно ли я применяю?
- К сожалению, не удалось сделать, чтобы макет абсолютно соответсвовал PixelPerfect, особенно это заметно в тексте. Тестировал в Chrome 55.0.2883.87 (Windows 10). Подскажите на примере какого-нибудь блока в чем я делаю ошибки
- Так же хотелось бы прочесть любую конструктивную критику

Небольшое отступление, добавлю обязательно еще мобильный вариант и слайдеры, это в процессе. Хотелось бы узнать ошибки на том этапе, что выполнен.

Исходники https://github.com/oleg-tgn/html-template-beautiful-things
Демо https://oleg-tgn.github.io/html-template-beautiful-things/

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
9 часов назад, stelmah.taganrog сказал:

- Постарался соблюсти принцип БЭМ для именования классов. Верно ли я применяю?

Я бы себе не забивал бы голову такими правилам. Из каскадных таблиц сделать язык программирования не получиться, посему и такая структурированность излишне. Но это лично моё мнение.

А в целом не плохо для учебного проекта.

Правда можно добавить различные focus/hover плюшки.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
12 часа назад, stelmah.taganrog сказал:

- Постарался соблюсти принцип БЭМ для именования классов. Верно ли я применяю?

Бегло просмотрел, вроде бы разметка выдержана в бэм нотации.

2 часа назад, BrusSENS сказал:

Я бы себе не забивал бы голову такими правилам.

На своих проектах эмпирическим путем проверена польза бэм. Если методология завезена в проект ради принципа , то согласен - излишне.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
2 часа назад, by chris сказал:

Если методология завезена в проект ради принципа , то согласен - излишне.

Я собственно это и имел ввиду)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас

  • Похожие публикации

    • Автор: Анонимный
      Помогите корректно составить верстку. Есть готовый код ниже:
      <div class="wrapper"> <div class="header"> HEADER </div> <div class="content"> <button> START </button> </div> <div class="footer"> AUTHOR </div> </div> Нужно что бы у header класса была высота 30% окна браузера, у контента 60%, а у футера 10%. Кроме этого у них у всех должны быть вертикальные выравнивания. Почему-то ничего не получаеться. Не растягиваются блоки по высоте, растягиваются по контенту и в итоге не занимают все окно браузера! Если кто может написать корректный HTML/CSS код, напишите плиз! На крайняк можно использовать Bootstrap.
    • Автор: WebNewbe
      Здравствуйте. Верстал макет, нужно было подключить табы(первый раз с ними работаю). Подключил, вроде все как надо сделал, ничего не произошло. Решил в отдельном файле проверить,в итоге все равно ничего, уже голова не варит, мб я что-то очевидное не вижу?
       
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> .wrapper .active { color: red; } .tab_item { display: none; } .tab_item:first-child { display: block; } </style> </head> <body> <div class="wrapper"> <div class="tabs"> <span class="tab">Вкладка 1</span> <span class="tab">Вкладка 2</span> <span class="tab">Вкладка 3</span> </div> <div class="tab_content"> <div class="tab_item">Содержимое 1</div> <div class="tab_item">Содержимое 2</div> <div class="tab_item">Содержимое 3</div> </div> </div> <script> $(".tab_item").not(":first").hide(); $(".wrapper .tab").click(function() { $(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active"); $(".tab_item").hide().eq($(this).index()).fadeIn() }).eq(0).addClass("active"); </script> </body> </html>