Jump to content
Sign in to follow this  
ArtemPitov

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

Recommended Posts

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

 

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

 

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

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

бэм - метод

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

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

<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>
Это говорит о пространстве имен, блок от элементов отделяется двойным подчеркиванием Edited by afwollis

Share this post


Link to post
Share on other sites
<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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

 

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

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

 

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

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

Edited by pashast

Share this post


Link to post
Share on other sites

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

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

Edited by afwollis

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

 

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

 

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

Edited by pashast

Share this post


Link to post
Share on other sites

 

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

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

 

 

 

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

 

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Edited by ArtenPitov

Share this post


Link to post
Share on other sites

 

 

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

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

Share this post


Link to post
Share on other sites

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

 

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

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

 

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

 

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

 

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

 

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

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

Edited by Einshtein

Share this post


Link to post
Share on other sites

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

 

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

 

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.