Как используется на реальных проектах bootstrap ?

[Аришан]

Здравствуйте. Я начинающий верстальщик. Посмотрел вакансии какие требуются знания для того чтобы стать HTML-верстальщиком, и одним из требований который присутствует в практический каждой вакансии это bootstrap. Начал читать документацию  bootstrap'а понял как он работает но все же остались вопросы которые я хотел бы тут задать и получить на них ответ от специалистов в данной сфере.

И эти вопросы актуальны не только для bootstrap но и для остальных CSS framework'ов (faunadation, semantic UI, skeleton и т.д.)

1. Первый момент который я не понимаю это как в bootstrap использовать готовые стили, ведь они никак не подходят к моему макету ? (перезаписывать, а это правильно, или же все стили которые есть в bootstrap переписывать в самом framework'е, опять же это правильно, так нормальные разработчики делают ?);
2. Предположим что у меня несколько видов карточек на сайте, и первый вид то что есть в bootstrap'e я уже использовал и мне нужно еще несколько видов таких же карточек в итоге мне их нужно создать самому так как первый вид что было в bootsrap я уже использовал ?
3. Так же в вакансиях требуют знание bem'а и тут я не понимаю как верстать в bootstrap'e по bem'у  ведь там совсем нет логики в наименованиях классов(как на практике такое делается)?
4. JS как я понял если мне нужен слайдер или еще что то из интерактивности я просто использую готовое решение от boostrap'a (а на практике так и делают?) ?

С сеткой вроде все понятно.
  

И объясните пожалуйста (если Вам не сложно), как могут быть использоваться эти css framework'и на практике, и к чему мне готовится, так как они много возможности дают хотелось бы знать варианты их применения.

[klierik]

Здравствуйте.

1. Собирайте стили из исходников (SCSS) или перезаписывайте своими поверх стилей фреймворка
2. Используйте модификаторы "class=".card card_modificator""
3. БЭМ — это методология, которая помогает грамотно выстраивать именование классов, писать универсальный самодокументируемый код. БЭМ + Bootstrap отлично совмещаются вместе если придерживайся одно стандарта написания.
4. Да, на практике так и делают. Но не обязательно использовать скрипты Bootstrap, так как они имеют базовый минимальный требуемый набор возможностей. В действительности, как правило, требуются более сложные решения

 

[Аришан]

7 часов назад, klierik сказал:

Здравствуйте.

1. Собирайте стили из исходников (SCSS) или перезаписывайте своими поверх стилей фреймворка
2. Используйте модификаторы "class=".card card_modificator""
3. БЭМ — это методология, которая помогает грамотно выстраивать именование классов, писать универсальный самодокументируемый код. БЭМ + Bootstrap отлично совмещаются вместе если придерживайся одно стандарта написания.
4. Да, на практике так и делают. Но не обязательно использовать скрипты Bootstrap, так как они имеют базовый минимальный требуемый набор возможностей. В действительности, как правило, требуются более сложные решения.
   

  

Спасибо за ответ. 
У меня еще остались вопросы: 
1. Получается когда пишут в вакансиях знание bootstrap это не означает что в проектах будет использоваться все что есть в bootstrap а только то что нужно верстальщику на его усмотрение, и это касается и для других css framework'ов, я не заблуждаюсь сейчас ? (теперь ясно почему их такое количество).  
2. С БЭМ не совсем понятно. Я прочитал и знаю на данный момент только часть методологии БЭМ (только наименование классов), и мне нравится эта методология, но не совсем понятно как использовать в связке с bootstrap, там ведь классы написаны не по БЭМу, получается нужно переписать boostrap для БЭМа ?
3.

Цитата

"Собирайте стили из исходников (SCSS) или перезаписывайте своими поверх стилей фреймворка"

- Перезаписывать я так понимаю нужно взять тот же класс bootstrap'а и задать новый стиль, а за это проверяющий не "поругает" ? 
- scss знаю а вот как из исходников собирать не совсем понял.

[klierik]

16 часов назад, Аришан сказал:

1. Получается когда пишут в вакансиях знание bootstrap это не означает что в проектах будет использоваться все что есть в bootstrap а только то что нужно верстальщику на его усмотрение, и это касается и для других css framework'ов, я не заблуждаюсь сейчас ? (теперь ясно почему их такое количество).  

Когда я провожу собеседования, то ожидаю что бы кандидат хорошо знал инструмент и умел им пользоваться. Это не значит что всё-всё что есть в Bootstrap будет использоваться в одном проекте, но в недолгих, сумарно, очень может быть.

16 часов назад, Аришан сказал:

2. С БЭМ не совсем понятно. Я прочитал и знаю на данный момент только часть методологии БЭМ (только наименование классов), и мне нравится эта методология, но не совсем понятно как использовать в связке с bootstrap, там ведь классы написаны не по БЭМу, получается нужно переписать boostrap для БЭМа ?

Нет, не нужно. Можно использовать классы фреймворка только для его компонентов, а всю остальную часть проекта на базе БЭМ. Любой другой разработчик который знает и то и другое сможет читать и понимать код.

16 часов назад, Аришан сказал:

- Перезаписывать я так понимаю нужно взять тот же класс bootstrap'а и задать новый стиль, а за это проверяющий не "поругает" ? 

Ревьювер не будет ругать за внесение изменений (так как другого способа нет) в стили элемента путём их переписывания (overwrite). Такое делается постоянно (на пример для изменения состояний).

16 часов назад, Аришан сказал:

- scss знаю а вот как из исходников собирать не совсем понял.

SCSS — это не CSS. Вам следует использовать препроцессор что бы преобразовать SCSS в CSS. Значит Вы можете внести изменения в исходники (SCSS) и получить требуемый результат.

[Аришан]

6 часов назад, klierik сказал:

Когда я провожу собеседования, то ожидаю что бы кандидат хорошо знал инструмент и умел им пользоваться. Это не значит что всё-всё что есть в Bootstrap будет использоваться в одном проекте, но в недолгих, сумарно, очень может быть.

Нет, не нужно. Можно использовать классы фреймворка только для его компонентов, а всю остальную часть проекта на базе БЭМ. Любой другой разработчик который знает и то и другое сможет читать и понимать код.

Ревьювер не будет ругать за внесение изменений (так как другого способа нет) в стили элемента путём их переписывания (overwrite). Такое делается постоянно (на пример для изменения состояний).

SCSS — это не CSS. Вам следует использовать препроцессор что бы преобразовать SCSS в CSS. Значит Вы можете внести изменения в исходники (SCSS) и получить требуемый результат.

О спасибо что смогли найти время ответить на мои глупые вопросы, что бы я без Вас делал. 
Я прочитал что Вы проводите курсы по повышению квалификации, можно узнать примерную цену ?

 

Теперь я работаю через Gulp и npm и папка boostrap-scss находится в папке node_modules (который разумеется в удаленный репозиторий Git'а не попадает) и получается я не могу изменить исходники в boostrap-scss в папке node_modules так как другой разработчик не получит их в таком случае мне как быть, как будет правильнее ?

[klierik]

2 часа назад, Аришан сказал:

Я прочитал что Вы проводите курсы по повышению квалификации, можно узнать примерную цену ?

В данный момент курс полный. Если хотите я дам Вам знать когда будет следующий набор.

2 часа назад, Аришан сказал:

Теперь я работаю через Gulp и npm и папка boostrap-scss находится в папке node_modules (который разумеется в удаленный репозиторий Git'а не попадает) и получается я не могу изменить исходники в boostrap-scss в папке node_modules так как другой разработчик не получит их в таком случае мне как быть, как будет правильнее ?

У Вас есть 2 варианта:

1. Вынесите исходники в проект из node_modules/ (нормальная ситуация)
2. Ознакомьтесь со статьей, в которой описан процесс как гибко использовать Bootstrap в проекте