Style are repeating when i am created second block pls check my screenshot and explain it

[senthil177cse]

I have created first column and i have added styles using style manager properties. but when i am dragged the blocks second time styles are repeating what was the issue for that below i have mentioned my custom block code...

this.editor.BlockManager.add('custom_first_block', {
label: '1 Column',
order: 1,
category: 'Layout Block',
editable: true,
draggable: true,
attributes: {
class: 'gjs-fonts gjs-f-b1 gjs-block gjs-one-bg',
},
content: <header><div class="row"><div class="col-12">Hello senthil</div></div></header>,
})

;

[artf]

https://grapesjs.com/docs/modules/Selectors.html#component-first-selectors

[senthil177cse]

Thanks for your reply.. i got it...

i have one more issue also pls...
i have tried to generate css in JSON but i am not getiing bootstrap css while export the getCSS()..
i have attached my screenshot here you can see the "selectors":["col-12"] col-12 is bootstrap class for this bootstrap css style not getting while getCss()...
below i have lis my code....

command(editor) {

                      editor.Modal.setTitle('CSS JSON')
                      .setContent(`<textarea style="width: 100%; height: 250px;">
                      ${JSON.stringify(editor.getCss({json: true}))}
                      </textarea>`)
                      .open();
                  }

[senthil177cse]

@artf Any update of this?