Этим вопросом задавался наверно каждый первый верстальщик, когда сталкивался с битриксом. Эта статья будет полезна битрикс программистам, которые отдают верстку другим людям (давайте им ещё ссылку на статью).
В этой статье я расскажу об основах верстки под CMS и статическом контенте битрикса.
Что там по CSS?
Самое первое и главное! Не задавать стили тегам a {display: flex}, для этого объявляйте класс (Исключение html, body). Это чревато тем, что битрикс панель поедет и программист не сможете работать с сайтом нормально.
Никогда не делать большую вложенность .table > .item > a { opacity: 1 } это в целом грубая ошибка при верстке, но тут она окажется фатальной для проекта. У битрикса есть много хороших компонентов, но для полноценной работы некоторые требуют сохранять порядок элементов, например: <div class="my-div"><div id="bx-id"><a href="http://site.ru" id="bx-edit-link"></a></div></div>
Если мы пропишем .my-div > a то ничего не сработает. Также в некоторых компонентах html код создается с помощью js. Тогда кастомизация становится очень трудозатратна. Есть очень много примеров, пиши в комментарии и я сделаю отдельную статью про это.
Не задавайте body класс. Бывает так, что хочешь сделать лучше, но делаешь хуже. В любом другом случае через класс в body можно сократить код, но не в битрикс. В таком случае, придется создать новый header, либо прописать условия для определения страницы и вывода класса в зависимости от того, зашел на неё пользователь или нет
