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

[ArtemPitov]

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

 

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

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

[pashast]

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

<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;
}

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

[ArtemPitov]

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

[pantagruel964]

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

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

 

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

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

бэм - метод

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

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

<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>

Это говорит о пространстве имен, блок от элементов отделяется двойным подчеркиванием Змінено 30 грудня 2015 користувачем afwollis

[pashast]

<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

[ArtemPitov]

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

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

[pantagruel964]

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

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

 

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

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

[Гість]

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

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

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

[ArtemPitov]

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

[pashast]

 

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

 

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

 Плюс, если например, левая колонка в шаблоне будет шириной 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:

Змінено 30 грудня 2015 користувачем pashast

[Гість]

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

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

Змінено 30 грудня 2015 користувачем Гість

[RGB]

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

[ArtemPitov]

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

[ArtemPitov]

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

 Плюс, если например, левая колонка в шаблоне будет шириной 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]

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

 

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

 

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

Змінено 30 грудня 2015 користувачем pashast

[pantagruel964]

 

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

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

 

 

 

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

 

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

[pashast]

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

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

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

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

[ArtemPitov]

я бы не сказал так о препроцессорах, вот к примеру я недавно познал 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

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

Змінено 30 грудня 2015 користувачем ArtenPitov

[pantagruel964]

 

 

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

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

[sitecreator]

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

 

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

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

 

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

[Einshtein]

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

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

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

[sitecreator]

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

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

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

 

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

 

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

 

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

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

 

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

 

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

[Einshtein]

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

Змінено 30 грудня 2015 користувачем Einshtein

[ArtemPitov]

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

 

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

 

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