Как не пересекаться с именами классов в bootstrap?

Question

[GrimmAS]

Тренировался верстать сам, сверстал пару макетов и решил, что пришло время познакомиться с бутстрапом.
Моя проблема в том, что я начинаю понимать лучше какую-то вещь, когда ее использую, чем через обучалки, книги. Хоть и при таком способе самообучения приходится первое время терпеть боль и самоунижение от того, что ничего не получается.

Выбрал для себя интересный макет и хочу попробовать свои стили+использование бутстрапа. Там как раз есть то, что удобнее сделать бутстрапом и то, что удобнее сделать ручками.

Как стоит называть свои классы, чтобы случайно не использовать класс, используемый бутстрапом?
Мои варианты:
добавлять префикс my. "My-class"
Использовать нижнее подчеркивание. Глянул глазами код, в Bootstrap нет классов с нижним подчеркиванием. "_class"

Простите за такой глупый вопрос на таком серьезном ресурсе. Я ток учусь.

Comments

[Сергей Тутуков]

Нужно определить для чего нужен тебе bootstrap? Ты будешь использовать хотя бы 50% его функционала (модальные окна, навигацию, табы, аккордион, ...)?
- Если да, то тебе нужно открыть bootstrap стили править их (или сделать это сразу на сайте). И лучше через эти стили верстать.
- Если нет, то скачай то что тебе нужно (модалку, сетку, ...) и не используй его.

Answer 1

[Павел Никитин]

Попробуй разработать свой собственный framework, начни с собственной документации, заранее сформируй интуитивно понятную систему префиксов, можно в одну букву, к примеру:
l - layout
m - module
f - form
i - item
n - navigation
и тд.

Префикс желательно писать через дефис, класс через нижнее подчеркивание, зависимый дочерний класс - через двойное подчеркивание модификатор - через дефис.

Таким образом классы получаются очень емкие и уникальные, к примеру меню будет иметь вид:

<ul class="n-m">
        <li class="n-m__i">
            <a class="n-m__i_a n-m__i_a-a">
                button 1
            </a>
        </li>
        <li class="n-m__i">
            <a class="n-m__i_a">
                button 2
            </a>
        </li>
    </ul>

n - префикс навигации
n-m - класс меню
n-m_i - дочерний класс меню
n-m_i__a - ссылка в меню
n-m_i__a-a - класс активной ссылки

Comments

[GrimmAS]

Очень хороший ответ, благодарю. В принципе, можно сделать какой-нибудь шаблончик для некоторых вещей. Мини-фреймворк получится :D

[Anton Bobylev]

Хозяин-барин, конечно, но читаемость у таких классов никакая. n-m_i__a-a? серьёзно? Тот кто будет поддерживать это после вас голову себе сломает.

Answer 2

[Anton Bobylev]

Используйте namespace. Это достаточно распространенная практика для изоляции стилей.

Comments

[Михаил]

Никогда не слышал про namespace в css, что-то новое?

[Anton Bobylev]

Михаил: это паттерн, вот почитайте: https://github.com/jareware/css-architecture/blob/...

Answer 3

[iBird Rose]

ну раз тока начинаешь учиться тогда прочти https://ru.bem.info/ и сразу начинай называть классы так. тогда точно с бутсрапом не пересечешься в плане классов

Comments

[Сергей Тутуков]

Конечно вы можете сказать, что я не прав.
Но использовать 2 разным методологий в проекте это плохая практика.