Здравствуйте
Задумался о том что пора разобрать CSS код в несколько тыс. строк на отдельные компоненты.
Пишу по БЭМ, есть идея организовать следующим образом :
- Блок
- Правила отображения на странице (параметры сетки, flex/float св-ва, position)
- => Иморт файла в котором лежат оставшиеся св-ва блока и св-ва его элементов/модификаторов
Т.е :
mailStyles.lessspoiler.sliderItem{
.col();
.size(12);
position: relative;
display: none;
opacity: 0;
transition: all 1s linear;
font-family: 'Arial', Regular, serif;
@import 'sliderItem.less';
}
sliderItem.lessspoiler&__previewPic{
img{
}
}
&__social{
position: absolute;
top: 20px;
right:30px;
display: flex;
color: @color_white_opacity_50;
}
&__dateAndCapture {
color: @color_white;
position: absolute;
bottom: 50px;
left: 10px;
&_d, &_m, &_y{
font-family: inherit;
color:inherit;
font-size: 13px;
}
&_capture{
font-family: inherit;
color:inherit;
font-size: 18px;
margin: 10px 0 0 0;
line-height: 23px;
}
&_date{
display: flex;
}
}
Как видно, в
main файле больше стилей чем предполагает желаемая структура... Но и просто подвесить их в
sliderItem.less без селектора нельзя... Компилятор негодует...
Может кто подскажет для галп таска какую-нибудь конструкцию..
Или посоветует другую реализацию такой структуры..
Вобщем жду любой дельный совет и заранее благодарю за участие !
Простой
Средний