Перейти к содержанию
ArtemPitov

Методологии верстки

Рекомендуемые сообщения

Доброго времени суток! 

 

Кто какими методологиями верстки пользуется?  

почитал о BEM довольно интересная методология  

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


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

Фигня этот БЕМ

<ul class="nav">
    <li class="nav__item nav__item_active"><a class="nav__link">One</a></span></li>
    <li class="nav__item"><a class="nav__link">Two</a></li>
    <li class="nav__item"><a class="nav__link">Three</a></li>
</ul>

Я так и не понял смысл в таком подробном написании классов.

 

 

Я сразу смотрю на псд. Если там есть сетка то делаю css типа такого.

/* GRID */

[class*="col-"] {
margin-right: 30px;
float: left;
box-sizing: border-box;
}

.col-2 {
width: 170px;
}

.col-3 {
width: 270px;
}

.col-4 {
width: 370px;
}

....

.col-9 {
width: 870px;
}

.last-col {
margin-right: 0;
}

.pull-right {
float: right;
}

Вообще бутстрапы, бэмы, лессы и саассы идут лесом. Если нужна попиксельная верстка с псд, то от них только гемор. 

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


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

суть БЕМ сделать не зависимые блоки, и хорошо читаемый код, ну не знаю мне поранилась сама логика, кстати Ваш вариант похож на grid 980 =)

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


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

хорошо читаемый код

наверное, потому что бэм расчитан на сложные проекты, где предполагается разработка в команде

 

Вообще бутстрапы, бэмы, лессы и саассы идут лесом. Если нужна попиксельная верстка с псд, то от них только гемор.

бутстрап - фреймворк

бэм - метод

лессы и сассы - препроцессоры

Как это мешает попиксельной верстке?

<ul class="nav">
    <li class="nav__item nav__item_active"><a class="nav__link">One</a></span></li>
    <li class="nav__item"><a class="nav__link">Two</a></li>
    <li class="nav__item"><a class="nav__link">Three</a></li>
</ul>
Это говорит о пространстве имен, блок от элементов отделяется двойным подчеркиванием Изменено пользователем afwollis

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


Ссылка на сообщение
Поделиться на другие сайты
<ul class="nav">
    <li class="active"><a>One</a></li>
    <li><a>Two</a></li>
    <li><a>Three</a></li>
</ul>

Но так же читаемее.  :-)  Да и в css будет будет видно структуру сразу

.nav li {

}

.nav li.active {

}

лучше чем 

.nav__item
{
 
}


.nav__item_active
{
 
}

Кстати на сайте БЭМ, откуда  я скопипастил пример, нет пары тэгу </span>, и они собираются учить нас верстке?  :-D

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


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

наверное, потому что бэм расчитан на сложные проекты, где предполагается разработка в команде

Даже если проект не большой, хорошо читаемый код сохранит не один час на разборку того что там написано 

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


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

Даже если проект не большой, хорошо читаемый код сохранит не один час на разборку того что там написано

Смотря как организован проект с самого начала)) Если бэм, то с бэм надо делать с нуля. Можно и на небольшом, но для внедрения требует времени на изучение и практики, не всегда хватает и того и того.

 

Но так же читаемее. :-) Да и в css будет будет видно структуру сразу

в бэм тоже все читаемо, и есть конкретная логика. блок задает основу, элемент конкретизирует, модификатор изменяет элемент.

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


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

Как вообще можно не любить пиксельную верстку ?

От деталей зависит красота, каждый line-height, padding ... все влияет на это. 

Если делать то качественно, а не говнокодить

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


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

в том же самом бутстрапе можно и попиксельно делать, я согласен с Вами пиксили решают

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


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

 

Как это мешает попиксельной верстке?

 

 Бутстрап мешает, так как все стандартные элементы (заголовки, кнопки, инпуты, таблицы) при попиксельной верстке придется переверстывать.

 Плюс, если например, левая колонка в шаблоне будет шириной 300px а сетка товаров должна быть в 5 колонок по 110px, то придется писать свой код сетки, так как бутстрап подразумевает одинаковые колонки, которых должно быть 2,3,4,6 или 12.

Проще написать с нуля css.

 

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

Насчет LESS  и CASS возможно погорячился, на фоне работы с последним шаблоном http://demo.kulerthemes.com/structure/catalog/view/theme/structure/stylesheet/stylesheet.css.map у которого 25  less-файлов. Все мозги мне вынес.Небольшая правка кнопки превратилась в увлекательный квест  :ugeek:

Изменено пользователем pashast

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


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

А с бутстрапом чтоб было приятно работать - изначально нужно не качать фулл архив, а сделать кастомизацию http://getbootstrap.com/customize/

И тогда все ок )

Изменено пользователем afwollis

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


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

<offtop>ArtenPitov вы у нас в курилке вроде тамады стали :) </offtop>

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


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

что то занесло меня, все интересно и познавательный почему бы и нет )

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


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

 Бутстрап мешает, так как все стандартные элементы (заголовки, кнопки, инпуты, таблицы) при попиксельной верстке придется переверстывать.

 Плюс, если например, левая колонка в шаблоне будет шириной 300px а сетка товаров должна быть в 5 колонок по 110px, то придется писать свой код сетки, так как бутстрап подразумевает одинаковые колонки, которых должно быть 2,3,4,6 или 12.

Проще написать с нуля css.

 

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

Насчет LESS  и CASS возможно погорячился, на фоне работы с последним шаблоном http://demo.kulerthemes.com/structure/catalog/view/theme/structure/stylesheet/stylesheet.css.map у которого 25  less-файлов. Все мозги мне вынес.Небольшая правка кнопки превратилась в увлекательный квест  :ugeek:

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

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


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

Страница кастомизации не решит проблему 5 колонок разной высоты. Да она вообще нифига не решит, например это ppJP4ilyJV1ZsD4xxlPwiuWZrgOacn.png

 

Невозможно сделать свои отступы для селекта, чтобы не затронуть при этом другие элементы. Про что-то более сложное, как например изображение фоном для элемента, я вообще молчу.

 

Я не видел еще ни одного красивого шаблона на чистом бутстрапе, который сверстан попиксельно с псд.

Изменено пользователем pashast

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


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

 

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

в бэм строгая структура, за счет этого легкая читаемость. это только с первого взгляда кажется, что каша.

 

 

 

Насчет LESS  и CASS возможно погорячился, на фоне работы с последним шаблоном http://demo.kulerthe...lesheet.css.map у которого 25  less-файлов. Все мозги мне вынес.Небольшая правка кнопки превратилась в увлекательный квест  

 

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

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


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

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

Как раз наоборот.

В случае обычной верстки пришлось бы поправить только один style.css

А в этом случае нужно было править паддинги кнопки в common.less, шрифт в typography.less, положение кнопки в хедере в header.less

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


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

я бы не сказал так о препроцессорах, вот к примеру я недавно познал Styles

у времени

.contact_us
	
	& .title_header
		font-size 18px
		width 100%
		text-align center
		color #297394
		position relative	
	
	& .title_header:after
		content ''
		height 2px
		width 42%
		right 0
		bottom 8px			
		background #3594BD
		position absolute

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

Изменено пользователем ArtenPitov

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


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

 

 

А в этом случае нужно было править паддинги кнопки в common.less, шрифт в typography.less, положение кнопки в хедере в header.less

но ведь файрбаг всегда подскажет куда идти править)))

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


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

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

 

Вся его гибкость знаете когда заканчивается?

Когда вы к своему кастомизированному проекту подключите некий модуль, рассчитанный на стандартный bootstrap. Ибо подавляющее большинство разработчиков модулей и не предполагают, что может быть какая либо кастомизация. особенно если вы вдруг решили отказаться от 12 колонок, к примеру, у вас товаров по 5 штук в ряд на всю ширину.

 

Стандартная сетка - главная его проблема. И для магазина очень неоптимальная. 4 товара в ряд на большом разрешении - крайне неоптимально. а 6 - уже многовато. вот 5 - оптимально! Но "гибкий" бутстрап фиг вам даст реализовать такую задумку без геморроя.

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


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

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

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

Могу ссыль в личку на один такой сайт сбросить

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


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

Einshtein, в двух предложениях, пожалуй, не смогу объяснить.

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

Я не говорю, что нельзя в принципе 5 колонок сделать. Можно, но это уже не бутстрап будет, точнее, не его сетка. И принципы верстки в таком случае будут не по феншую, т. е. не по бутстраповски.

 

Но можно даже и по бутстраповским принципам сверстать, используя  неклассические 10 (бутстраповских!) колонок вместо 12, например. Но... все будет замечательно пока не появится сторонний модуль, предполагающий только 12 колонок. Вот тут то и конфликт.  А так, повторюсь, есть реализации 10-то колоночного бутстрапа.

 

А так, конечно, можно свои стили и т. д. и т. п. Но вся идея сетки бутстрапа при этом рушится. Ну так и зачем он в таком случае нужен если без него только проще верстать? Вы же при этом уже не используете опорную сетку бутсрапа.

 

Да и по другим признакам мне бутстрап не очень нравится. Слишком мало разрешений в его классической реализации: L, M, S, XS.

Конечно, можно создавать свои @media, но это уже не бутсрап будет, ибо бутстрап не подразумевает использование напрямую @media.

 

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

 

А ссылочку кидайте, плиз. С интересом посмотрю.

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


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

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

Изменено пользователем Einshtein

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


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

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

 

По поводу "не по феншую", опенкарт 2 так и сделан, не полностью на будстрапе, а тем боле все ковыряют под себя. Тут как говориться палка с двумя концами и все зависит от конкретного проекта и конкретного макета, а все остальное - это $ за допилы модулей под конкретную не стандартную тему ( Павликов =) )

 

ЗЫ // Да и в принципе если все верстали бы по канонам фреймворков то сайты были бы все сайты как логотип московского метро после ребрендинга ) 

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


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.