Дайте советы по оптимизации css кода?

Question

[Saulin]

Начал осваивать css и параллельно делать сайт и постоянно путаюсь в своем css коде. По мере разрастания кода все сложнее становится в нем ориентироваться, находить нужное место и исправлять недочеты. Может быть есть какие-то правила структурирования или алгоритмы, которые упрощают жизнь в этом плане? Заранее благодарен!

Answer 1

[Антон Усачев]

Как писал Компьюций,

В программировании примерно 30% времени уходит на собственно программирование, а остальные 70% – на придумывание имён переменных и функций.

Это же справедливо и для верстки.

Правильным подходом было бы понимать логику и поведение будущего проекта, чтобы не плодить лишних сущностей и предотвратить их нехватку в будущем. На край, обеспечить простое масштабирование и добавление. Т.е. нужно предусмотреть всё или создать условия для этого.

Из инструментария.
1. Хорошо бы перейти на BEM от нашего всеми любимого Яндекса.
2. Использовать препроцессоры css типа less или sass, что значительно упрощает как чтение, так и редактирование css.
3. Поисковые системы, в которых можно найти ответ на вопрос.
4. Youtube с профильными уроками.
5. Светлая голова, которая может подсказать правильные решение и подход.
6. Инструмент вроде map для любимого IDE.
7. Сам IDE, который в разы упрощает жизнь. Варианты, лучшие на мой вкус: Brackets, Atom, WebStorm.

Comments

[Антон Усачев]

Пока это всё писал, уже ответов накидали. =)

[WapSter]

Антон Усачев, за то все верно и объемно)

Answer 2

[WapSter]

БЭМ, css in js - для продвинутых, имеются тонкости.

Answer 3

[Максим]

К примеру если использовать препроцессор то можно разбить ваш css на компоненты ..к примеру header описывать в header.scss или footer описывать в footer.scss а сборщиком собирать эти все файлы-компоненты в один файл после чего его минифицировать прогонять через autoprefixer и т д

Так же можно просто писать по алфавитному порядку от a до z

Answer 4

[Одиночка Айс]

1. Не больше 3х уровней вложенности - .wrap .header .logo{}
2. Давать понятные имена, связанные с сущностью (.news, . article, .orders) или, хотя бы, просто писать на английском, а не .knopka или .zakaz
3. БЭМ не панацея, ибо конструкции вида .news-items__item выглядят вырвиглазно, но хотя бы почитать стоит
4. LESS или SASS помогут вам, не сомневайтесь

Comments

[Виталий Першин]

1. Не больше 3х уровней вложенности - .wrap .header .logo{}

Вложенности вообще быть не должно, за исключением, когда без неё просто невозможно.

3. БЭМ не панацея, ибо конструкции вида .news-items__item выглядят вырвиглазно, но хотя бы почитать стоит

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