UPD0 (2016-07-19 23-31): судя по всему, первая половина моей статьи — успешно изобретённый велосипед. Спасибо хабравчанам за ссылку на спецификацию
Статья ценна не более, чем вольное описание уже придуманной технологии.

Предыстория

Июльский субботний вечер подходил к концу. Нарубив дров на шашлык, я повесил USB-модем на багету, скомандовал sudo wvdial, развернул браузер и обновил вкладку с открытым гитхабом. Вернее, попытался обновить. Скорость не радовала, и в итоге страница-то обновилась, но явно не хватало какого-то из стилевых файлов; и дело было не в блокировке, поскольку аналогичные проблемы я наблюдал и с другими сайтами, и зачастую они решались просто многократным обновлением страницы. Во всём был виноват перегруз 3G-сети.

Стоп! А как же кэш?

Не важно, узнали ли вы о БЭМ только сейчас, или следите за ним с самого начала, вы, возможно, уже оценили столь полезную методологию. Если вы не знаете, что такое БЭМ, я рекомендую прочитать вам об этом на сайте БЭМ перед тем, как продолжить чтение этой статьи, потому что я буду использовать термины, которые предполагают базовое понимание этой CSS методологии.

Эта статья нацелена на людей, которые уже используют БЭМ и желают использовать его более эффективно, а также на тех, кто хочет узнать о нем больше.

• 404.php
• echo_log.php – Полная новость.
• footer.php
• header.php
• log_list.php – Короткая новость.
• main.css – Все css шаблона.
• module.php – Подключаемые модули и комментарии.
• page.php — Страница открытой новости.
• side.php – Боковая панель.
• t.php – Микроблог.

<?php require_once View::getView('module'); ?> //Подключение модулей.
<?php include View::getView('side'); ?> //Подключение боковой панели с модулями.
<?php echo $site_title; ?> //Заголовок страницы.
<?php blog_navi(); ?> //Панель со ссылками.
<?php echo $footer_info; ?> //Информация в конце страницы.

• Изучите важнейшие аспекты языка PHP и основы объектно-ориентированного программирования.
• Познакомьтесь с базой данных MySQL.
• Управляйте cookie-файлами и сеансами, обеспечивайте высокий уровень безопасности.
• Пользуйтесь фундаментальными возможностями языка JavaScript.
• Применяйте вызовы AJAX, чтобы значительно повысить динамику вашего сайта.
• Изучите основы CSS для форматирования и оформления ваших страниц.
• Освойте продвинутые возможности HTML5: геолокацию, обработку аудио и видео, отрисовку на холсте.

0. Прежде чем думать о названии класса, выберите подходящее название для HTML-элементов

<div class='submit'/> <!-- Чёёё? -->
<input class='submit'/> <!-- Аа, ясно -->

• Вы front-end разработчик, и вам интересно использование шаблонов.
• Вы back-end разработчик, и вам интересно использование шаблонов на front-end’е.
• Вы давно ищете какой-нибудь инструмент для систематизации своей коллекции UI-control'ов, накопившуюся за несколько лет.
• Вы интересуетесь разработкой web-компонентов.
• Вам хочется высказать критические замечания и порекомендовать angularJS.
• У вас есть свободное время и вам интересно почитать об очередном велосипеде.
• У вас нет свободного времени, но вам интересно.
• Вы хороший и любознательный человек.

Эта история началась в далеком 2008 году. В одном из моих проектов для противодействия XSS-атакам я решил использовать BB-коды и начал искать подходящие библиотеки на Java. Хорошенько погуглив, я так ничего ничего и не нашел. Конечно, тогда было и сейчас есть много библиотек для трансляции BB-кодов в HTML, но все они меня не устраивали по одному критерию — невозможность добавлять или удалять тэги. Вспомнив курс "Языки программирования и методы трансляции" (польза от классического образования!) я принялся за реализацию своей собственной библиотеки для парсинга BB-кодов. В результате появился мой самый долгоживущий проект KefirBB.

Котаны!

Вы знаете про Meteor? Ну да — странный вопрос.

Вы знаете про CSS-Modules? Прощай БЭМ.

Вы знаете про SugarSS? Прощай SASS.

Перец из Техаса сегодня принял мой pull-request. И всем этим счастьем теперь можно пользоваться. CoffeeScript, Jade, SugarSS — полный комплект для кошерного кода.