Новая тема   Ответить

 Gromyko
Есть вопрос к гуру верстки

Делаю большой дизай, удалил все наследуемые свойства но файл css весит 46кб. Смотрю код и вижу, что практически все стили состоят из одних и тех же маргинов, падингов, размеров текста, например margin-bottom:10px; повторяется 34раза. Внимание вопрос! Насколько по феншую сделать сразу стили для всех часто повторяющихся свойств и уже в коде делать комбинацию классов?

Например, не писать класс

.style1 {display:inline-block; text-align:left; line-height:28px; margin-right:10px; vertical-align:middle;}

а заготовить классы
.display-inline-block {display:inline-block;}
.text-align-left {text-align:left;;}
.line-height-10 {line-height:10px;}
.vertical-align-middle {vertical-align:middle;}

и комбинировать где надо

<p class="display-inline-block, text-align-left, line-height-10, vertical-align-middle"></p>

В таком случае, файл css будет намного меньше, грузится быстрее, но браузеру сложней сформировать дерево страницы. Или современным браузерам похер? Короче это правильный подход к верстке??

 xcodd
Цитата:

И раздуешь html код почти пропорционально, не?

Вообще, всё разумно в меру.

Поизучай БЭМ методологию:
https://ru.bem.info/methodology/css/

И посмотри код в новом бутстрапе:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css

 Gromyko
в том и вопрос что лучше для скорости загрузки страницы
маленький css файл
или перегруженная css классами страница

чисто мое предположение css файл важнее

 SAV
Gromyko писал:
накой щас вообще париться из-за десятков килобайт?

 zhekats
Вообще, AMP гугловский требует вставлять стили в <style> в хэде. Чтоб уменьшить количество хттп запросов к файлам. Но если проект с множеством разнообразных страниц, то для использования этого метода на каждой странице желательно вставлять только те стили, которые используются на данной странице.
Да, это запарно, но раз ты настолько серьезно относишься к вопросу - то так будет оптимальнее всего. А множить свойства в ЦСС или имена классов в ХТМЛ - тут уже не играет большой роли.

 grush
а дай посмотреть где делаешь?

 sx88
Лучше сделай так: в css файле найди все эти 34 класса, у которых одинаковый margin-bottom: 10px, удали этот стиль у них у всех, а вверху файла css пропиши через запятую все эти классы, по типу:

.head, .content, .preview, .video, .footer и остальные { margin-bottom: 10px; }

В итоге твой margin-bottom: 10px будет прописан 1 раз для всех этих элементов, где он повторяется.

Ну и по этой же аналогии сделай с другими повторяющимися стилями.