Вопрос о препроцессоре less + БЭМ?

Question

[Alibek Kulseitov]

На днях окунулся в мир препроцессоров. Гуглил, читал и смотрел видео уроки но нужных ответов так и не нашел. Я понимаю что препроцессоры - это сила, по этому горю желанием познать и использовать их)

Интересуют следующие моменты:

1) Представим что есть некая папка base

base/                          
    ├── base.less      
    ├── bootstrap-reset.less                  
    ├── fonts.less
    ├── normalize.less

В файле base.less у меня прописаны стили для body, нулевые padding и margin у input и заголовков и тд.
Мне интересно вот что:
1.1) а что если в файле base.less будет всего один класс с синтаксисом less а остальные классы будет просто css. Разумно/правильно ли это?
1.2) а что если вообще не будет синтаксиса less, будет просто css но формат less. Тому пример normalize.less в репозитории бутстрапа. Почечему он формата less если в нем чистый css? Есть ли смысл делать формат less а в нем будет чистый css?

2) Вопрос касательно бэм + less.
По БЭМ каждый блок должен иметь свой файл. Например navbar.less, header.less, footer.less и тд.
Но тут такой момент а что если в navbar.less скажем будут уникальные картинки и скрипты?
То это надо будет создавать папку:

components/navbar/                          
    ├── navbar.less      
    ├── navbar.js
    ├── nav-icon-1.png
    ├── nav-icon-2.png

Я правильно понимаю логику? Насколько это удобно и практично?

3) Представим есть папка components где лежат все наши компоненты типа navbar, heade, footer, productItem и тд
Но ведь это компоненты. А где лучше всего хранить стили страниц? Ведь каждая страница уникальная со своими отступами и фонами.

4) Как написать на less desktop first на бутстраповской сетке?
Я так понимаю лучше не трогать родные стили бутстрапа и переписывать их а сделать новые значения медиа запросов с параметрами max-width? Это будет называться mixin-нами? можно пример?

Comments

[Сергей delphinpro]

1) По первым пунктам. Совершенно нормально. Пусть все файлы будут .less
2) Компонентная структура удобна и практична (но я ее не использую)
3) В вопросах организации файлов вы совершенно свободны. Делайте как вам удобно. Может быть даже изобретёте мега-удобную структуру и её возьмут на вооружение все разработчики =)
4) В бутстрапе есть все необходимые миксины: media-breakpoint-up, media-breakpoint-down, media-breakpoint-only, media-breakpoint-between

[Alibek Kulseitov]

Сергей, Спасибо =)

Answer 1

[Сергей ZSA]

Пред P.S. Для начала я очень надеюсь что вы используете normalize в своих проектах

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

.footer {
    color: #fff;
    a {
        font-size: 24px;
    }
}

развернется в .footer {color: #fff;} .footer a {font-size:24px} это просто пример, я думаю вы понимаете в чем плюс такого подхода, а если еще работать с & то вообще все хорошо и удобно как по мне. Также использование переменных и миксинов тоже очень и очень порой помогает.
Итог - никто вас не наругает за то, что у вас чистый css в less файлах, но стремитесь less узнавать и упрощать свой код, как раз используя возможности less (надеемся что многое скоро будет в чистом CSS, но до этого надо дожить)

2. Каждая страница уникальна - да, на каждой странице есть свои компоненты, этим страницы и уникальны. Из компонентов страница и строится. Нет компонентов - нет страницы. Если у вас один проект с множеством страниц - у вас в любом случае будет одинаковый (ну или примерно одинаковый) подвал, также, возможно, меню, шапка и тп. Все зависит от проекта и части каждой страницы будут формироваться из одних и тех же блоков, за стилизацию которых будут отвечать файлы .less те самые (ну конечно потом все собирается в один css и как бы он за все отвечает, но вы поняли меня, надеюсь). И из-за этого как раз я ваш вопрос не понял. На любой странице проекта будет компонент, который вы уже верстали и вы просто используете его снова, просто скопировать-вставить, а не верстаете снова с 0.

Или вы пытаетесь сделать какой-то костяк общих компонентов, при этом постоянно работаете с лендингами абсолютно разного дизайна? Тогда ваш вопрос понятен и вам не стоит пытаться тягать в абсолютно разные проекты одни и те же файлы. Запаритесь так переписывать каждый раз все стили. Для каждого проекта свой костяк файлов, которые для него нужны. Конечно, какой-то один, может два, а может 3 файла у вас будут одинаковыми на всех проектах, где у вас общие стили, которые вы используете всегда (у меня к примеру миксины, кнопки ну и конечно тот же normalise)

3. А вы пробовали адаптивить страницы вообще без бутстрапа, а просто руками? Попробуйте, тогда ваш вопрос решится сам собой, иначе вы пытаетесь подгрузить бутстрап, использовать при этом его не будете, зато загрузите свой .css файл итоговый абсолютно не нужным кодом, который только место будет занимать.

Также почитайте, что такое миксины. Если вы просто будете писать @media (max-width: 767px) это не миксин, а просто медиа-выражение. Миксины - совсем другая вещь.

Comments

[Alibek Kulseitov]

Спасибо за развернутый ответ!) Да я знаю как less работает) по этому и хочу его использовать в проектах.
Насчет лендингов вы правы, лучше без лесса там обходиться и лишней запарки.
Адаптировать страницы без бутстрапа сложно будет потому что сетка очень удобна и практична)
А насчет того что в бутстрапе куча лишних стилей я их просто делаю так)

// Reset and dependencies
//@import "normalize.less";
@import "print.less";
//@import "glyphicons.less";

[Сергей ZSA]

Алибек Кулсеитов, а в чем проблема на лендингах использовать less? Вполне удобно тоже. На счет адаптивности не знаю. Я сам делаю без проблем вроде.