Меня всё мучает один единственный вопрос, смысл бэма понятен.Точно понятен? Смысл как раз избегать дублей.
если элементы по свойствам одинаковые, но в разных блоках.То из этих элементов нужно сделать блок, будет примерно так:
<div class="block">
<div class="btn block__btn"></div>
<div class="text block__text"></div>
</div>
<div class="block1">
<div class="btn block1__btn"></div>
<div class="text block1__text"></div>
</div>const fs = require( 'fs' )
const path = require( 'path' )
const data = {}
const dir = 'src/modules/'
try {
const modules = fs.readdirSync( dir )
modules.forEach( item => {
const module = path.join( dir, item )
if ( ! fs.lstatSync( module ).isDirectory() ) return
const jsons = fs.readdirSync( module ).filter( item => path.extname( item ) === '.json' )
jsons.forEach( json => {
const name = path.basename( json, path.extname( json ) )
const file = path.join( dir, item, json )
data[name] = JSON.parse( fs.readFileSync( file ) )
})
})
} catch (e) {
console.log(e)
}
// далее отправляем данные в PUG (будет глобальный объект jsons)
gulp.task("html", function() {
return gulp.src("src/pages/*.pug")
.pipe(plumber())
.pipe(pug({locals: {jsons: data}}))
.pipe(gulp.dest("dist"))
});$themes = {
default: {
color: black,
bg: white
},
dark: {
color: white,
bg: black
},
}
each-theme()
for theme in $themes
data = $themes[theme]
body._theme-{theme} &
color: data['color']
background-color: data['bg']Стоит ли использовать такую структуру, если верстаешь один?Скорее нет, но это дело привычки и вкуса, в такой структуре нет ничего ужасного, зато ничего лишнего не будет.
Это как же нужно заставить gulp извращаться, чтобы собрать проект?Примерно вот так.
mixin tovar(name, list, kg)
.tovar__item.tovar__item--basis
.tovar__main
.tovar__info
.tovar__title Нямушка #[span= name]
ul.list
each item in list
li
if item.num
span= item.num
| #{item.text}
button.button #[span= kg] кг
// call
+tovar('Название', [{num: 10, text: "порций"}, {text: 'мышь в подарок'}, ], '0.5')
//mixin team(img_src)
span.team-card__photo(style=`background-image: url(${img_src})`)border-radius $border.sm // err
border-radius: $border.sm // goodposition, display, float, margin