@Saulin

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

Начал осваивать css и параллельно делать сайт и постоянно путаюсь в своем css коде. По мере разрастания кода все сложнее становится в нем ориентироваться, находить нужное место и исправлять недочеты. Может быть есть какие-то правила структурирования или алгоритмы, которые упрощают жизнь в этом плане? Заранее благодарен!
  • Вопрос задан
  • 156 просмотров
Решения вопроса 4
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Как писал Компьюций,
В программировании примерно 30% времени уходит на собственно программирование, а остальные 70% – на придумывание имён переменных и функций.

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

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

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

Так же можно просто писать по алфавитному порядку от a до z
Ответ написан
wapster92
@wapster92 Куратор тега CSS
Люблю трилогию ME
БЭМ, css in js - для продвинутых, имеются тонкости.
Ответ написан
daemonhk
@daemonhk
ПсиХоПат
1. Не больше 3х уровней вложенности - .wrap .header .logo{}
2. Давать понятные имена, связанные с сущностью (.news, . article, .orders) или, хотя бы, просто писать на английском, а не .knopka или .zakaz
3. БЭМ не панацея, ибо конструкции вида .news-items__item выглядят вырвиглазно, но хотя бы почитать стоит
4. LESS или SASS помогут вам, не сомневайтесь
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
sniggering_deus
@sniggering_deus
Mother is a god in the eyes of a child.
Я в своих проектах использую - CSS переменные и компонентный подход.

Препроцессоры не использую. Работаю без них. БЭМ конечно не панацея, но узнать его поближе, как и другие методологии будет хорошим решением.

Чтобы код было легче поддерживать, я разбиваю сайт на компоненты, например меню/блоки/футер/профиль. Каждый компонент в своём .css файле. В связке с независимыми именами для классов, получается классная инкапсуляция. В итоге у меня на странице может быть 20 разных карточек, со своим дизайном и структурой, и ничего не сломается.

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

Также будет полезно:

1. Называйте адекватными именами элементы.
2. Используйте - минимальную вложенность.
3. Попробуйте - компонентный подход.
4. Почитайте про метод - DRY.
5. Разбивайте код внутри файла с помощью - Комментариев.
6. Откажитесь от инлайн стилей.
7. Не используйте - !important.
8. Почитайте об разных методологиях. Некоторые из них полезны.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы