Size: a a a

HTML/CSS — русскоговорящее сообщество

2020 August 01

AL

Aleksander Lemyagov in HTML/CSS — русскоговорящее сообщество
Так?

.text {

 color: $color-text-black;
 font-style: normal;
 font-family: $font-family;

 &--tiny {
   font-size: 12px;
   font-weight: normal;
   line-height: 15px;
 }

 &--body-one {
   font-size: 18px;
   font-weight: 500;
   line-height: 22px;
 }

 &--body-two {
   font-size: 16px;
   font-weight: normal;
   line-height: 19px;
 }

 &--body-two-medium {
   font-size: 16px;
   font-weight: 500;
   line-height: 19px;
 }

 &--body-three {
   font-size: 14px;
   font-weight: normal;
   line-height: 17px;
 }

 &--body-three-medium {
   font-size: 14px;
   font-weight: 500;
   line-height: 17px;
 }

 &--heading {
   font-size: 26px;
   font-weight: normal;
   line-height: 31px;
 }

 &--heading-medium {
   font-size: 26px;
   font-weight: 500;
   line-height: 31px;
 }

}
источник

KA

Kenan Ayvazov in HTML/CSS — русскоговорящее сообщество
Aleksander Lemyagov
Так?

.text {

 color: $color-text-black;
 font-style: normal;
 font-family: $font-family;

 &--tiny {
   font-size: 12px;
   font-weight: normal;
   line-height: 15px;
 }

 &--body-one {
   font-size: 18px;
   font-weight: 500;
   line-height: 22px;
 }

 &--body-two {
   font-size: 16px;
   font-weight: normal;
   line-height: 19px;
 }

 &--body-two-medium {
   font-size: 16px;
   font-weight: 500;
   line-height: 19px;
 }

 &--body-three {
   font-size: 14px;
   font-weight: normal;
   line-height: 17px;
 }

 &--body-three-medium {
   font-size: 14px;
   font-weight: 500;
   line-height: 17px;
 }

 &--heading {
   font-size: 26px;
   font-weight: normal;
   line-height: 31px;
 }

 &--heading-medium {
   font-size: 26px;
   font-weight: 500;
   line-height: 31px;
 }

}
можно и так
источник

AL

Aleksander Lemyagov in HTML/CSS — русскоговорящее сообщество
как лучше?
источник

AL

Aleksander Lemyagov in HTML/CSS — русскоговорящее сообщество
практичней
источник

KA

Kenan Ayvazov in HTML/CSS — русскоговорящее сообщество
классами
источник

KA

Kenan Ayvazov in HTML/CSS — русскоговорящее сообщество
представь, у тебя будет миллион параграфов и везде ты будешь данный миксин пихать
источник

KA

Kenan Ayvazov in HTML/CSS — русскоговорящее сообщество
сколько лишнего кода у тебя будет?
источник

AL

Aleksander Lemyagov in HTML/CSS — русскоговорящее сообщество
с Вашей стороны
источник

l

lesha in HTML/CSS — русскоговорящее сообщество
Kenan Ayvazov
представь, у тебя будет миллион параграфов и везде ты будешь данный миксин пихать
с другой стороны, в эти миллион параграфов он будет класс пихать)
источник

l

lesha in HTML/CSS — русскоговорящее сообщество
но да, я бы использовал класс скорее всего
источник

KA

Kenan Ayvazov in HTML/CSS — русскоговорящее сообщество
lesha
с другой стороны, в эти миллион параграфов он будет класс пихать)
ну так одно дело - когда у тебя миллион стилей одинаковых, другой - когда у тебя миллион одинаковых классов
источник

ZA

Zahar Avsievich in HTML/CSS — русскоговорящее сообщество
Boris Slonov
Нормс, я через флексбазис такое шаманил, пока не прочитал это))
+++
источник

AP

Anton Permyakov in HTML/CSS — русскоговорящее сообщество
Aleksander Lemyagov
Так?

.text {

 color: $color-text-black;
 font-style: normal;
 font-family: $font-family;

 &--tiny {
   font-size: 12px;
   font-weight: normal;
   line-height: 15px;
 }

 &--body-one {
   font-size: 18px;
   font-weight: 500;
   line-height: 22px;
 }

 &--body-two {
   font-size: 16px;
   font-weight: normal;
   line-height: 19px;
 }

 &--body-two-medium {
   font-size: 16px;
   font-weight: 500;
   line-height: 19px;
 }

 &--body-three {
   font-size: 14px;
   font-weight: normal;
   line-height: 17px;
 }

 &--body-three-medium {
   font-size: 14px;
   font-weight: 500;
   line-height: 17px;
 }

 &--heading {
   font-size: 26px;
   font-weight: normal;
   line-height: 31px;
 }

 &--heading-medium {
   font-size: 26px;
   font-weight: 500;
   line-height: 31px;
 }

}
убери -medium в отдельный класс
источник

l

lesha in HTML/CSS — русскоговорящее сообщество
Kenan Ayvazov
ну так одно дело - когда у тебя миллион стилей одинаковых, другой - когда у тебя миллион одинаковых классов
но по сути же, класс будет давать столько же стилей сколько и миксин)
источник

AL

Aleksander Lemyagov in HTML/CSS — русскоговорящее сообщество
Anton Permyakov
убери -medium в отдельный класс
типо .text-meduim?
источник

AP

Anton Permyakov in HTML/CSS — русскоговорящее сообщество
lesha
но по сути же, класс будет давать столько же стилей сколько и миксин)
нет
источник

KA

Kenan Ayvazov in HTML/CSS — русскоговорящее сообщество
lesha
но по сути же, класс будет давать столько же стилей сколько и миксин)
нет
источник

AP

Anton Permyakov in HTML/CSS — русскоговорящее сообщество
Aleksander Lemyagov
типо .text-meduim?
да, сейчас у тебя дублируются размеры шрифтов
источник

AL

Aleksander Lemyagov in HTML/CSS — русскоговорящее сообщество
Anton Permyakov
да, сейчас у тебя дублируются размеры шрифтов
Хм. класс .text-meduim будет влиять только на font-weight?
источник

AP

Anton Permyakov in HTML/CSS — русскоговорящее сообщество
Aleksander Lemyagov
Хм. класс .text-meduim будет влиять только на font-weight?
да
источник