Mary Солнечная

Посмотрите как устроены css-иконки, например, в бутстрапе. Что-то наподобии
.icon-th-list {
background-position: -264px 0;
}
и вообще - посмотрите хелп по background-position. Это полезно :-)

Есть много способов.

• Вы можете использовать иконочный шрифт, например FontAwsome
  
• Вы можете использовать спрайты
  
• Можите вставить как background-image из спрайта
  
• и др.
  
  

Но без вырезания картинки, используйте готовые иконочные шрифты или собирайте кастомные IconMoon

bootstrap - navbar используй
bootstrap - navbar
bootstrap - navbar - на русском

БЭМ - это такая методология вёрстки от Яндекса. Она подразумевает разбиение страниц на отдельные смысловые блоки (комментарий, пост, заголовок, футер, форма, инпут и т.п.). Каждый блок может состоять из других блоков. Основная идея - как можно больше повысить возможность повторного использования уже написанных блоков, для чего используются модификаторы. Плюс, БЭМ подразумевает отказ от каскадных стилей, потому что они препятствуют повторному использованию.
Например, на странице есть два разных заголовка (например, отдельно в статье, и отдельно во врезке). Как все привыкли делать это? есть код заголовка:
<h1 class="header">Заголовок</h1>
И мы ставим эти заголовки в текст статьи и во врезки:

<article class="article">
    <h1 class="header">Заголовок</h1>
    <p>Текст текст текст</p>
</article>
<aside class="incut">
    <h1 class="header">Заголовок</h1>
    <p>Текст текст текст</p>
</aside>

Тогда обычно мы используем каскад, чтобы стилизовать заголовок во врезке:

.header {font-size: 2em; padding-bottom: 1.5em;}
.incut .header {text-decoration: italic;}

Всё хорошо, но теперь мы не можем просто перенести эти стили заголовка во врезке в другое место, потому что эти стили привязаны именно ко врезке (классу incut). Плюс, что ещё хуже, если к элементу привязано несколько различных стилей, образующихся подобными каскадными правилами, то перенести такой внешний вид в другое место становится очень трудоёмко. А также, из-за большей специфичности каскадных стилей, их сложнее "перебить" новым стилем.
БЭМ предлагает отказаться от каскадных стилей и создавать отдельные стили-модификаторы:

<article class="b-article">
    <h1 class="b-article__header">Заголовок</h1>
    <p>Текст текст текст</p>
</article>
<aside class="b-article b-article__incut">
    <h1 class="b-article__header b-article__header_incut">Заголовок</h1>
    <p>Текст текст текст</p>
</aside>

.b-article__header {font-size: 2em; padding-bottom: 1.5em;}
.b-article__header_incut {text-decoration: italic;}

Чем больше проект, тем выгоднее использование подобной методологии. На маленьких и средних проектах БЭМ может быть избыточен. Хотя вот была статья habrahabr.ru/company/yandex/blog/234905 про использование в маленьких проектах.

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

Ну вот. Получилось не в двух словах, но менее подробно качественно описать БЭМ не получится, имхо.

Попробую просто:
API для сайта — это скрипт (как правило), который принимает запросы (по методам GET (site.ru/api.php?a=b), POST) и отдаёт не обычный HTML для браузеров, а результат запроса в определённом формате (XML, JSON, php serialize()-ed).
Соответственно предназначен он не пользователям, а скрипту со стороннего сайта/сервиса/программки, который посылает эти GET/POST запросы, получает результат и как-то использует данные. Посылает он запросы естественно не просто так, а чтобы выполнить определённое действие (напр. как действия которые выполняют пользователи сайта через браузер).

Пользователям-программистам он нужен для интеграции с другими сайтами/сервисами программами, или автоматизации некоторых действий, создав программку для вашего сайта. Соответствено нужен он обычно только очень популярным сайтам/сервисам.