parliament Posted January 29, 2016 Report Share Posted January 29, 2016 Доброго времени суток.Прошу критики в свой адрес по поводу сверстанного макета. Нашел его на просторах нашего форума верстка Сразу походу если Вы не против я спрошу: не могу понять vertical-align? как верстать, чтобы sidebar и content были равной высоты начал определять стили для a:visited все ссылки указывающие на # приняли статус посещенных. Как вернуть им статус линк? Я даже на хост сайт выложил а они все виситед. почему когда, я задаю бэкграунд у боди при помощи картинки-полоски, вырезанной с макета, появляются всякие артефакты и бока. Ну т.е. ясно, что у нее ведь высота ограничена и, вот у меня градиент здесь в фоне, когда высота страницы становится больше высоты картинки... бац черная полоса)) В общем вопрос ясен, как правильно поступать? Quote Link to comment Share on other sites More sharing options...
abrahadabra Posted January 29, 2016 Report Share Posted January 29, 2016 такое ощущение, что этот макет уже где-то встречался. Значит поругать… ок, попробуем.Градиент на фоне в данном случае не обязательно делать картинкой, можно именно градиентом.Навешивать стили на тэги имеет смысл тогда, когда все тэги должны выглядеть именно так. Условно говоря, h1 { font-size: 32px; } — это нормально. span { color: #900; } — уже не очень. Даже когда это #content h1 span { color: #900; } Ссылки должны реагировать на наведение. Особенно в главном меню.Надпись в футере неправильно прилипла к контенту. По вопросам.не могу понять vertical-align?с ходу что-то не получилось найти, но есть классная статья на css-live.ru, где эта тема разобрана детально. Рекомендую. начал определять стили для a:visited все ссылки указывающие на # приняли статус посещенных. Как вернуть им статус линк? Я даже на хост сайт выложил а они все виситед.ну а как определяется, посещена ли ссылка? По адресу. как верстать, чтобы sidebar и content были равной высотыПравильный способ — flexbox. Но если поддерживать ископаемые браузеры, то display: table-cell почему когда, я задаю бэкграунд у боди при помощи картинки-полоски, вырезанной с макета, появляются всякие артефакты и бока. Ну т.е. ясно, что у нее ведь высота ограничена и, вот у меня градиент здесь в фоне, когда высота страницы становится больше высоты картинки... бац черная полоса)) В общем вопрос ясен, как правильно поступать?делать градиент градиентом. Quote Link to comment Share on other sites More sharing options...
parliament Posted January 29, 2016 Author Report Share Posted January 29, 2016 такое ощущение, что этот макет уже где-то встречался. Значит поругать… ок, попробуем.Градиент на фоне в данном случае не обязательно делать картинкой, можно именно градиентом.Навешивать стили на тэги имеет смысл тогда, когда все тэги должны выглядеть именно так. Условно говоря, h1 { font-size: 32px; } — это нормально. span { color: #900; } — уже не очень. Даже когда это #content h1 span { color: #900; } Ссылки должны реагировать на наведение. Особенно в главном меню.Надпись в футере неправильно прилипла к контенту. По вопросам.не могу понять vertical-align?с ходу что-то не получилось найти, но есть классная статья на css-live.ru, где эта тема разобрана детально. Рекомендую. начал определять стили для a:visited все ссылки указывающие на # приняли статус посещенных. Как вернуть им статус линк? Я даже на хост сайт выложил а они все виситед.ну а как определяется, посещена ли ссылка? По адресу. как верстать, чтобы sidebar и content были равной высотыПравильный способ — flexbox. Но если поддерживать ископаемые браузеры, то display: table-cell почему когда, я задаю бэкграунд у боди при помощи картинки-полоски, вырезанной с макета, появляются всякие артефакты и бока. Ну т.е. ясно, что у нее ведь высота ограничена и, вот у меня градиент здесь в фоне, когда высота страницы становится больше высоты картинки... бац черная полоса)) В общем вопрос ясен, как правильно поступать?делать градиент градиентом. Спасибо. Понял так нужно больше классов определять? Quote Link to comment Share on other sites More sharing options...
Sergey_K_2015 Posted January 30, 2016 Report Share Posted January 30, 2016 Спасибо. Понял так нужно больше классов определять? Если придерживаться методологии БЭМ, то классами нужно все определять. И стили задавать только классам. У такого подхода масса достоинств:при стилизации элемента обращение происходит только к одному селектору;быстрее рендерится страница;четкая структура файлов для css/js;реиспользование кода в любых частях страницы;понимание, к какому файлу стилей относится данный элемент;разделение классов для стилизации и js;не используется каскад стилей.Это достоинства, приводимые в описаниях данной методологии. От себя я бы добавил еще и то, что при правильном определении имен классов нет необходимости в комментариях, т.к. и так все видно.Для примера возьмем Ваше главное меню: <div id="wrap_menu" class="clearfix"> <ul id="nav"> <li><a href="/"><span class="first">Home</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Support</span></a></li> <li><a href="#"><span>Carrers</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span class="last">Contact</span></a></li> </ul> </div> Смотрим его стилизацию (я сами стили заменил многоточиями, т.к. для понимания сути этого достаточно):#nav { ...}#nav li { ...}#nav li a span { ... }#nav a { ...}#nav .last { ...}и аналогичное меню с заданными классами:<nav class="main-header--nav main-header--mobile"> <ul class="main-menu clearfix"> <li class="main-menu--item"><a class="main-menu--link link" href='#>about</a></li> <li class="main-menu--item"><a class="main-menu--link link" href="#">projects</a></li> <li class="main-menu--item"><a class="main-menu--link link" href="#">gallery</a></li> <li class="main-menu--item"><a class="main-menu--link link" href="#">houses</a></li> <li class="main-menu--item"><a class="main-menu--link link" href="#">general plan</a></li> <li class="main-menu--item"><a class="main-menu--link link" href="#">location</a></li> </ul></nav>и вариант его стилизации:.main-menu { ... &--item { ... &:last-child { ... } } &--link { ... &:hover { ... } &:active { ... } }}Вопрос: для чего нужен такой уровень вложенности: #nav li a span?Единственное, что приходит в голову - это то, что автору хочется как-то для себя структуризировать CSS файл, чтобы было визуально видно, какому элементу задается стиль. Но ведь этого можно добиться по другому. В моем примере стили описаны четко и понятно и нет никакой вложенности (правда такой вид наблюдается при работе с препроцессором Less, но он очень прост в освоении). Теперь остальные замечания:1. Зачем использовать <div class="header"> <div id="footer">? Есть же теги <header><footer><nav> и т.д.2. Зачем использовать такие классы: class="first", class="last" если есть псевдоклассы :first-child, :last-child.3. Зачем использовать для стилизации идентификаторы? Оставьте их для использования в скриптах. 1 Quote Link to comment Share on other sites More sharing options...
parliament Posted January 30, 2016 Author Report Share Posted January 30, 2016 Спаны,которые есть у меню, а как раз из-за них пришлось определить классы last и first вместо псевдоклассов они определялись для того что бы сделать разделители как на макете, ну т.е . уже чем блок меню и шире чем текст, ну и для того что бы при наведении затемнение было в пределах одного пункта по всей площади пункта. Да цель благородная была, я ее как видите не добился)))) Что касается БЭМ, то я предположил, что нужно HTML/CSS понять сначала. Ведь еще 5 лет назад люди с успехом верстали без БЭМ.Вас же, Sergey_K_2015, благодарю за широкий отзыв. Все-все замечания учту Quote Link to comment Share on other sites More sharing options...
Sergey_K_2015 Posted January 30, 2016 Report Share Posted January 30, 2016 Спаны,которые есть у меню, а как раз из-за них пришлось определить классы last и first вместо псевдоклассов они определялись для того что бы сделать разделители как на макете, ну т.е . уже чем блок меню и шире чем текст, ну и для того что бы при наведении затемнение было в пределах одного пункта по всей площади пункта. Да цель благородная была, я ее как видите не добился)))) Что касается БЭМ, то я предположил, что нужно HTML/CSS понять сначала. Ведь еще 5 лет назад люди с успехом верстали без БЭМ.Вас же, Sergey_K_2015, благодарю за широкий отзыв. Все-все замечания учтуНу, если не заморачиваться уровнями вложенности, можно же было сделать таким образом: (a:first-child span),(a:last-child span).Не нужно засорять код HTML лишним содержимым. Семантика не на последнем месте. Это же и касается <header><footer><nav> и прочих тегов.Я так же, как и Вы нахожусь в стадии обучения. БЭМ использую не потому, что это модная фишка, а потому, что мне так реально удобнее верстать. Я почитал материалы по теме и нашел для себя много интересных вещей. Тут главное найти плюсы для себя, а к остальным вещам можно относиться без фанатизма (это же не религия в конце концов). Лучше сразу учиться правильной технике, чем потом переучиваться. По моим ощущениям, трудно на первых двух макетах. Задолбаешься придумывать имена классов, потом это происходит автоматом. Quote Link to comment Share on other sites More sharing options...
parliament Posted January 30, 2016 Author Report Share Posted January 30, 2016 (edited) сделать таким образом: (a:first-child span),(a:last-child span). В моем случае применение этих селекторов отменяет бордеры вообще#nav a:first-child span { border-left:none;}#nav a:last-child span { border-right:none;}вобщем не смог победить и соорудил костыль))) Edited January 30, 2016 by parliament Quote Link to comment Share on other sites More sharing options...
andrey7287 Posted January 31, 2016 Report Share Posted January 31, 2016 @Sergey_K_2015 В приведенном примере БЭМ используется не правильно. Через "--" задаётся модификатор (main-menu--open), а элемент через "__" (main-menu__item). И не стоит всем элементам давать классы, становитесь заложником технологии. Quote Link to comment Share on other sites More sharing options...
alejandro13 Posted January 31, 2016 Report Share Posted January 31, 2016 В Вашей верстке у логотипа какой-то дополнительный фон, которого не должно быть по макету.Внутри блоков с контентом междустрочный интервал у Вас явно меньше, чем должен быть.Опять же исходя из макета, фон у блока с навигацией явно имеет другие цвета и ссылкам надо дать хоть какой-то ховер - text-decoration:underline, например. Ну и в форме поиска я бы цвет тексту белый дал, а не черный) Quote Link to comment Share on other sites More sharing options...
parliament Posted January 31, 2016 Author Report Share Posted January 31, 2016 В Вашей верстке у логотипа какой-то дополнительный фон, которого не должно быть по макету.Внутри блоков с контентом междустрочный интервал у Вас явно меньше, чем должен быть.Опять же исходя из макета, фон у блока с навигацией явно имеет другие цвета и ссылкам надо дать хоть какой-то ховер - text-decoration:underline, например. Ну и в форме поиска я бы цвет тексту белый дал, а не черный) Вот же действительно я и не подумал. Спасибо) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.