How to organize HTML code after BEM?

A

abdabs2014-07-21 11:00:27

HTML

abdabs, 2014-07-21 11:00:27

Studying BEM on ru.bem.info/articles/start-with-project-stub
I came across such feature of BEM that after editing index.bemhtml.js the code in index.html becomes unreadable at all.
Example:

<!DOCTYPE html><html class="ua_js_no"><head><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta charset="utf-8"/><title>Title of the page</title><script>(function(e,c){e[c]=e[c].replace(/(ua_js_)no/g,"$1yes");})(document.documentElement,"className");</script><meta name="description" content=""/><link rel="stylesheet" href="_index.css"/><link rel="shortcut icon" href="/favicon.ico"/></head><body class="page"><div class="head"><div class="layout"><div class="layout__left"><form action="http://yandex.ru/yandsearch"><span class="input i-bem" data-bem="{&quot;input&quot;:{}}"><span class="input__box"><input class="input__control" name="text" value="Find"/></span></span><button class="button button__control i-bem" data-bem="{&quot;button&quot;:{}}" role="button" type="submit">Search</button></form></div><div class="layout__right"><div class="logo"><a class="link link__control i-bem" data-bem="{&quot;link&quot;:{}}" href="http://ru.bem.info"><img class="image" src="http://varya.me/online-shop-dummy/desktop.blocks/b-logo/b-logo.png"/><div class="link__slogan">A new way of thinking</div></a></div></div></div></div><div class="goods"></div><script src="_index.js"></script></body></html>

Prompt tools as it is possible to put this porridge in order.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

SirMustache, 2014-07-21
@abdabs

I use jsbeautifier.org

1

1001001 111, 2014-07-21
@IgorO2

notepad + hands =)
And so any IDE that supports html