Для чего используют несколько классов в div-ах?

Question

[mutaev_murad]

Вот пример и не только в дивах во всех тегах в ul, a, button, и.тд

<div class="uk-flex uk-flex-middle uk-navbar-content tm-navbar-more uk-visible-large" data-uk-dropdown="{mode:'click'}">
                <div class="uk-dropdown uk-dropdown-flip">

<div class="uk-form-row">
		<button class="uk-button uk-button-primary" value="Войти" name="Submit" type="submit">Войти</button>
	</div>
<a href="#offcanvas" class="uk-navbar-toggle uk-navbar-flip uk-padding-remove uk-hidden-large" data-uk-offcanvas></a>
	</div>

и еще один вопрос:

допустим вот див со списком пишу

Ну этот список я так для примера, привел

<div>
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

вот у меня возникает проблема кому какие стили задавать
list-style: none; для ul задают или для li еще нужно ли здесь padding
уместно ли задавать position: releative
dispaly:inline,inline-block
clear:
both,
ccontent""
after,
before'

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

Answer 1

[entermix]

Для чего используют несколько классов в div-ах?

Чтобы применить несколько классов к 1 елементу

Например:

.text-green{
   color:#00FF00;
}
.text-center{
   text-align:center;
}

<div class="text-green">Текст зеленого цвета</div>
<div class="text-center">Обычный текст размещенный по центру блока</div>
<div class="text-green text-center">Текст зеленого цвета, размещенный по центру блока</div>

Comments

[mutaev_murad]

нет я имею ввиду одному диву например вот так

<div class="text-green text-center" >Текст зеленого цвета</div>

вот так в одном классе тоже пару слов

[entermix]

MOI_NIK_3D: так, а что не понятно? class="text-green text-center" это будет "Текст зеленого цвета, размещенный по центру блока", а не просто текст зеленым цветом

[mutaev_murad]

entermix: Ну смотри, в стилях зададут свойства для класса .text-green{color: green;} но потом и для класса .text-center{****} задают какие то свойства, вот я не понимаю в первом классе нельзя чтоле все это задать для чего и второй там использовать.

[entermix]

MOI_NIK_3D: если делать по вашему принципу, то нужно будет для каждого элемента писать свой класс, а так мы имеем 2 независимых класса, которые можем применять к неограниченному количеству элементов, хотим просто сделать цвет текста зеленым? Применяем .text-green, хотим еще и отцентрировать его? добавляем .text-center, при этом мы не создаем отдельный класс для каждого элемента, а следовательно количество кода не растет, что уже хорошо.

[mutaev_murad]

Спасибо за разъяснение!

[entermix]

MOI_NIK_3D: Не за что

Answer 2

[Константин Бояндин]

1. Несколько классов назначают, чтобы применить к элементу все правила, которые заданы для соотв. классов.

2. Свойство list-style применяют к ul. Совет был дан правильный: открыть руководство (наподобие указанного в ссылке) и просто применять на практике.