markup examples

css.css

/* <div class="main-header">...</div> - плохо */
.main-header:after,
.main-header .top-panel-inner:after,
.main-menu-list:after,
.wrapper:after,
.main-footer .footer-inner:after,
.category-title:after,
.products-list:after,
.checkout-form:after,
.product-title:after,
.product-toppanel:after,
.product-gallery:after,
.product-order-form:after,
.blog-detail-wrap:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}

/* <div class="main-header g-cleared">...</div> - хорошо */
.g-clearer,
.g-cleared:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}

gistfile1.js

/**
 * Поиск текста по вложенным элементам. Пример верстки:
 *
 * <code>
 *     <input type="text" class="js-search-query" />
 *     <ul class="js-search-source">
 *         <li>Днепропетровск</li>
 *         <li>Киев</li>
 *         <li>Москва</li>
 *     </ul>
 * </code>
 *
 */
$('.js-searchable-block').delegate('.js-search-query', 'keyup', function (event) {
	var q = $(event.currentTarget).val().toLowerCase();

	$(event.delegateTarget).find('.js-search-source').map(function(index, el) {
		var $el = $(el);
		var $hidableEl = $el;
		if ($el.data('search-hide-parent')) { // мы можем настроить через этот параметр поведение
			$hidableEl = $el.parents($el.data('search-hide-parent'));
		}

		$hidableEl.toggle($el.text().toLowerCase().indexOf(q) >= 0);
	});
});