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

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! :)

8 years ago

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.

8 years ago

tadatuta

Hi!

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

Get these libs with some package manager (say bower or npm)
Create wrapping blocks for them and use symlink or imports pointing to the place where these libs are installed
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).

8 years ago

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?

8 years ago

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.

8 years ago

guidomallee

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

5 years ago

beinoriusju

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

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

In order to leave a comment you need to login.