Артем Каюн

Влияет. Каждый файл это дополнительный запрос.
Но раскидывая стили по файлам удобнее за ними следить и править.
Что же делать? Правильно. Раскидывать по файлам, и работать с ними. А при загрузке на сервер пропускать через сборщик проектов (к примеру gulp), который объединит все css файлы в один, а так же сожмет их

1. Теги в HTML принято писать строчными буквами.
2. Меню нужно делать через маркированные списки ul - li
3. Тег font является устаревшим и не рекомендуется к использованию.
4. В CSS нужно делать отступы. Каждое новое правило с новой строки. Иначе эту кашу даже рассматривать не хочется.

Нужно в компоненте имплементировать OnInit и в методе ngOnInit запустить этот скрипт.

gulp

Вы можете использовать специально созданный для этого токен APP_INITIALIZER
Благодаря нему приложение не будет стартовать пока не получите данные.
Делается это примерно следующим образом.
Регистрируете в провайдерах глобальный сервис и этот токен

providers: [
  GlobalService,
  {
    provide: APP_INITIALIZER,
    useFactory: (service: GlobalService) => () => service.init(),
    deps: [GlobalService], multi: true
  }
],

Сервис примерно такой

@Injectable()
export class GlobalService {
    data: any;
    constructor(private http: Http) { }
    init(): Promise<any> {
        var promise = this.http.get('src/data.json').map(res => res.json()).toPromise();
        promise.then(data => this.data = data);
        return promise;
    }
}

И потом получаете к примеру в корневом компоненте свои данные

export class AppComponent {
  constructor(private service: GlobalService) {
    console.log(service.data);
  }
}

Живой пример

В emmet есть встроенные фильтры, которые указываются в конце строки после |.
Это странно, но многие про них не знают.
В вашем случае нужно использовать сразу два фильтра: bem и jade.

article.post>.__header+.__content+.__footer|bem|jade

Это развернется в привычный JADE

article.post
              .post__header
              .post__content
              .post__footer

Настроить вывод фильтров можно здесь:

Preferences -> Package settings -> Emmet -> Settings - User

Вот пример настройки:

{
  "syntaxProfiles": {
    "html" : {
      "filters" : "html, bem"
    }
  },
  "preferences": {
    "bem.elementSeparator":"__",
    "bem.modifierSeparator":"--",
    "bem.shortElementPrefix":"-"
  }
}

Еще есть отличная штука Bemto

Есть вот такой вот калькулятор. И абстрагироваться лучше от размера основного текста, чем от максимально большого заголовка.

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

Ну делай рандом на js и добавляй к элементам стиль

As of jQuery 1.9, all the handlers for the jQuery global Ajax events, including those added with the .ajaxStart() method, must be attached to document.

https://api.jquery.com/ajaxStart/

Не нужно загрязнять глобальный объект своими переменными. Вы их потом перебрать не сможете.
Гораздо лучше создать заранее контейнер под них, например объект или массив.

По объекту вы сможете пробежаться с помощью цикла for..in, по массиву с помощью for или forEach.

var maps = {};

maps["marker" + 0] = ...;
maps["marker" + 1] = ...;

for (var prop in maps) {
    console.log(maps[prop]);
}

Как минимум, потому что Вы нигде не вызываете функцию. Плюс, возможно, вы подключаете скрипт в хеде, и он пытается отработать, когда еще не выстроен DOM, в связи с чем элемент с айди 't' еще отсутствует на странице. Виндоу онлоад же выполняет Ваш скрипт только после полной загрузки страницы и её рендера средой выполнения.