Даю общие советы и перехожу к деталями вашего кода:
При вёрстке интересуйтесь предназначением CSS-свойств. То есть довод использования — просто потому что "так работает" используйте в последнюю очередь (если всё остальное не работает).
К примеру, вы используете свойство direction
. Это свойство предназначено для указания направления текста. В большинстве языков текст пишется слева направо (значение ltr
по умолчанию), но на арабском и иврите текст пишется справа налево и для этого текста указывается direction: rtl;
. Получается, что вы используете это свойство не по назначению.
Осмотрительней используйте абсолютное позиционирование. В идеале его использовать только когда нужно чтобы элементы перекрывали другие и элемент извлёкся из потока отображения. К примеру, модальные окна, выпадающие списки с более сложным отображением, чем стандартный select
и т.д. Также используется для в некоторых рецептах вроде поместить иконку внутри текстового поля. Но в данном случае не вижу в потребности в абсолютном позиционировании.
С большой осторожностью используйте псевдоселекторы (к примеру, first-child;
, only-child
, nth-child
и т.д.). Потому что псевдоселекторы
- игнорируют видимый блок или нет. То есть если вы скроете один из блоков с помощью
display: none
, он всё равно будет учитываться при применении псевдоселектора.
при применении учитывают лишь порядковый номер элемента относительно родителя. То есть псевдоселектор .item:nth-child(even)
работает так "выбрать каждого чётного ребёнка, у которого есть класс item
", а не так "выбрать каждый чётный элемент с классом item
". Иллюстрирую примером:
.item:nth-child(even) {
background-color: red;
}
<div class="container">
<div class="not-item">
One (not item)
</div>
<div class="item">
Two (item)
</div>
<div class="item">
Three (item)
</div>
<div class="not-item">
Four (not item)
</div>
<div class="item">
Five (item)
</div>
<div class="item">
Six (item)
</div>
</div>
Если вы добавите элементы рядом с .item
, вёрстка может сломаться.
Поэтому рекомендую посмотреть, может стоит задавать отдельные классы для особых типов элементов.
В данном случае, я полагаю также, что чат означает, что может быть несколько сообщений подряд от одного пользователя. Поэтому применение стилей только к чётным элементам, кажется неверным.
Изучите flexbox. Расположение элементов с помощью float
, clear
, vertical-align
не обладает такой мощью и не такое гибкое и сопровождаемое.
Изучите CSS-методологию. BEM или SMACSS. Для того, чтобы вы могли легко менять вёрстку, а также если такие же блоки или подобные нужны на других страницах вы бы их без проблем добавляли и меняли. В примере, я буду использовать BEM.
Не используйте безликие или неоднозначные имена вроде .item
. Это же может быть что угодно. Применение этого класса зависит от того, кто в нём родитель и что рядом находится. А это значит, что если где-то добавится блок .item
, то те же стили для него и применятся, что, возможно, будет нежелательно. Относитесь к селекторам также как к переменным. У них должно быть строго определённое предназначение и имя должно чётко его отражать. Если вы назовёте, к примеру, chat-item
, то уже более ясно значение этого блока.
Относитесь к вёрстке как к программированию, для которого важна легкость восприятия, гибкость и сопровождаемость. Также не менее важно соответствие стандартов. Вёрстку портят дублирования кода, старайтесь их избегать. Использование современных препроцессоров с переменными, циклами, условиями делает вёрстку почти неотличимой от программирования.
Результаты
Для каждой серии сообщений создал блок .chat-item
, где будет находиться аватар и одно или несколько сообщений от пользователя.
Для того, чтобы применять стили для инвертирования расположение (для отвечающего) колонки я задал flex-direction: row-reverse;
, что инвертирует порядок расположения элементов.
Здесь использована методология BEM.
Для того, чтобы не создавать дополнительные классы для вложенных элементов при инвертировании я пожертвовал чистотой BEM и добавил селекторы с вложенностью (.chat__item--responder .chat__message
, .chat__item--responder .chat__message-content
). По самой методологии (в идеале) следует использовать только классы без вложенности.
В результате код может выглядеть так:
.chat__header {
text-align: center;
}
.chat__item {
display: flex;
align-items: flex-start;
}
.chat__person-avatar {
border-radius: 50%;
}
.chat__messages {
margin-left: 10px;
}
.chat__message {
display: flex;
align-items: center;
margin-right: 10px;
}
.chat__message-content {
border-radius: 5px;
padding: 7px;
background-color: #ccc;
display: inline-block;
margin-left: 5px;
}
.chat__item--responder {
flex-direction: row-reverse;
}
.chat__item--responder .chat__message {
flex-direction: row-reverse;
}
.chat__item--responder .chat__message-content {
margin-left: 0;
margin-right: 5px;
}
<div class="chat">
<h1 class="chat__header">Chat</h1>
<div class="chat__content">
<div class="chat__item">
<img src="http://placekitten.com/40/50" alt="photo" class="chat__person-avatar">
<div class="chat__messages">
<div class="chat__message">
<div class="chat__message-time">9:03</div>
<div class="chat__message-content">Hi</div>
</div>
<div class="chat__message">
<div class="chat__message-time">9:03</div>
<div class="chat__message-content">How are you?</div>
</div>
</div>
</div>
<div class="chat__item chat__item--responder">
<img src="http://placekitten.com/40/50" alt="photo" class="chat__person-avatar">
<div class="chat__messages">
<div class="chat__message">
<div class="chat__message-time">9:05</div>
<div class="chat__message-content">Hello</div>
</div>
<div class="chat__message">
<div class="chat__message-time">9:07</div>
<div class="chat__message-content">I'm fine. Let's have a dinner today.</div>
</div>
<div class="chat__message">
<div class="chat__message-time">9:07</div>
<div class="chat__message-content">What do you think about it? </div>
</div>
</div>
</div>
</div>