Правильно ли так прописывать свои стили в Bootstrap 3?

Question

[vasil77]

Верно ли так прописывать свои классы в Bootstrap 3?
Например к первому вложенному div'у в row, применим свой класс

<div class="row">
    <div class="col-md-3 my_style"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
<div>

Если не верно, то приведите примеры, как будет верно применить свой класс к элементу.

Answer 1

[Александр]

Всё верно

Comments

[vasil77]

Спасибо, а то один товарищ твердит, что это крайне дурная практика так делать. А как верно, не говорит :)

[Илья Герасимов]

vasil77, это плохая практика так делать, легко поломать сетку (добавив рамку, отступ или еще что-то такого), но как модификатор для внутренних элементов пойдет

[vasil77]

Илья Герасимов, а можно пример, как правильно будет?

[Илья Герасимов]

<div class="col-md-3"><div class="my_style">...</div></div>

повторно используем my_style в любом из контейнеров, не опираясь и не озираясь на прописанные размеры col-md-3. Это если у нас какие-то свои опции контейнера, если нам нужен просто модификатор, то как ты предложил пойдет, но обернуть колонки рамкой, добавить внутренних отступов будет нельзя

[vasil77]

Илья Герасимов, спасибо, я тоже подумал об этом варианте!

[Александр]

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

Answer 2

[Евгений Вольф]

Если не верно, то приведите примеры, как будет верно применить свой класс к элементу.

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

Comments

[vasil77]

т.е вы имеете ввиду сделать так?

<div class="row">
    <div class="col-md-3">
       <div class="my_style"></div>
    </div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
<div>

[Евгений Вольф]

vasil77, можно так, а можно например так:

<div class="row">
    <div class="col-md-3 my_style"> <!-- тут Ваш класс -->
    </div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
<div>

[Евгений Вольф]

vasil77, ааа... я понял, не сразу разглядел Ваш код (хотя изначально вообще не видел код :)) )... Я думал, у Вас примерно такой вариант:

div.class1 .row .col-md-3:first-of-type {
    border: 1px solid red;
}

Это для примера, у Вас разумеется будет как-то "по своему". И такой подход тоже имеет право на жизнь.

Answer 3

[Илья Герасимов]

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

Comments

[vasil77]

под модификатором вы имеете ввиду например цвет текста, бэкграунд, размер шрифта и т.д т.е характеризует внешний вид?

[Илья Герасимов]

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