Add CSS and JS that is not block-related using BEMHTML

[guidomallee]

Hello!

I've been using the BEM approach for front-end web development a couple of years now (and it's just great!) but only yesterday I started to try out the BEMHTML template language. So far I like it a lot!

There's a couple of things though that I can't yet wrap my head around and can't find anything about in the docs either. So I hope to have some more luck here and hopefully also help others that might be facing the same problems.

Basically I would like to know how to be able to add custom CSS for a webpage that isn't directly block related. For example declarations for webfonts, normalize/reset css code, etc. I would still like to be able to use Stylus as preprocessor and have bem-tools generate and minify this CSS together with my blocks' CSS.

The same question goes for JS. What is the correct way to add JS libraries and custom JS code, preferably maintaining the possibility to have this combined/concatenated with the block level JS?

Thanks! :)

[miripiruni]

Hi, @guidomallee!

Basically I would like to know how to be able to add custom CSS for a webpage that isn't directly block related. For example declarations for webfonts, normalize/reset css code, etc

You can use BEM terms: place CSS/JS to special block or element: mywebfont, common__mywebfont, common__reset, etc.

[tadatuta]

Hi!

If you need to build external libs with your project code you may:

1. Get these libs with some package manager (say bower or npm)
2. Create wrapping blocks for them and use symlink or imports pointing to the place where these libs are installed
3. Add dependencies for blocks as if they were just ordinary.

bower_components/
    some-library/
        dist/
            some-library.min.css
blocks/
    some-library-wrapper/
        some-library-wrapper.styl # @import ../../bower_components/some-library/dist/some-library.min.css
    page/
        page.deps.js # { mustDeps: 'some-library-wrapper' }

As for external scripts/styles you still may include them just as simple HTML tags with following BEMJSON:

{
    tag: 'script',
    attrs: { src: 'path/to/file' }
}

which will generate <script src="path/to/file"></scirpt>.

Or, if you use page block from bem-core library it's possible to add as many scripts and styles as you need in corresponding fields (see https://github.com/bem/project-stub/blob/bem-core/desktop.bundles/index/index.bemjson.js#L5-L10).

PS: We're just finished new version of BEMHTML and Russian documentation for it. English translation is in progress (current estimation of release is next week).

[guidomallee]

Thank you, guys! Some really helpful tips there :)

I'd already figured out the possibility to simply add extra css or js in the page block - very useful!

But I like the proposed approach to simply add extra blocks for css fonts/css normalization/general js code etc. My question though: is there a way to not have any HTML rendered for these css/js-only blocks?

[tadatuta]

is there a way to not have any HTML rendered for these css/js-only blocks?

Sure. Just use deps to include necessary blocks.

[guidomallee]

I see, that was your third option before and probably the best one. Works great! Thank you :+1:

[beinoriusju]

Also see loader block from bem-core common.blocks library.

https://github.com/bem/bem-core/tree/v4/common.blocks/loader