deeppines

Можно так же воспользоваться фреймворком, например - https://mjml.io/
Польза в том, что разметка проще чем теги таблицы, плюс автоматическое добавление костылей под разные сервисы.

Можно посмотреть список текущих проблем и решить критичны они для вашего проекта или нет. Ссылка

Тема то вроде как не нова - ссылка
Но под виндой как всегда дополнительные бубны.

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var cleanCSS = require('gulp-clean-css');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function() {
  return gulp.src('./app/sass/**/*.sass')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer()),
    .pipe(cleanCSS()),
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('./app/css'));
});

var reload = browserSync.reload;
var runSequence = require('run-sequence');

gulp.task('pug', function () {
    return gulp.src('source/*.pug')
            .pipe(pug({pretty: true}))
            .pipe(gulp.dest(''))
    });
    
gulp.task('watch', function(){
    $.watch('source/**/*.pug ', function(event, cb) {
            return runSequence('pug', reload);
        });
}

Господи пусть такие дизайнеры плодятся и размножаются!

А теперь по сути.

1) Названия лучше давать на английском.
2) Не злоупотреблять количеством шрифтов - вполне хватит двух или трех (Шрифт для текст, шрифт для заголовков, хитросделанный шрифт для подписи под лого или других декораций)
3) Хоть немного быть в курсе того, что можно сверстать, а что нет - например цвет заголовков градиентом или картинкой - можно реализовать на css, но работать это будет разве что в Chrome.
4) Не обрезать картинки делая их круглыми - используйте маски перекрытия или как то так, в верстке нет кругов только прямоугольники и квадрат как частный случай прямоугольника, но визуально сделать картинку круглой и скажем с бордером можно стилями - при этом исходник картинки будет квадратом или прямоугольником.
5) Используя тени делать их отдельно от изображений.
6) Элементы форм рисовать без фанатизма и стараться оставлять их такими какие отрисовываются браузером, в основном это касается чекбоксов/радиокнопок выпадающих списков, их можно стилизовать, но до сих пор это такие костыли и гемор, что аж горит, а потом горит у бекэндщиков, так как им все это реализовывать через задницу приходится.
7) Прежде чем нарисовать какую то супермега крутую красивую вещицу, спросить верстальщика (если есть возможность) сможет он это реализовать.

Все зависит от задач и инструментов, не все gui дают необходимый функционал. В том же Атоме нормальный gui появился совсем недавно.
Если вам удобно пользоваться инструментом, то пользуйтесь им и нет особой разницы консоль это или gui.

Если используйте Bootstrap, то смело смотрим в документацию и делаем так как в документации.
Для форм в меню есть класс navbar-form который собственно и выравнивает по вертикали форму поиска

Как будет выглядеть на вашем примере.

Отсортировать можно через данный параметр.

В целом странно зачем вам сортировка в линтере, не проще ли сортировать с помощью csscomb уже скомпилированный css, но это так, дело вкуса)

Вопрос более не актуален.
достаточно в опциях прописать events: ['addDir'], read: false