Стоит ли использовать инлайн стили или обязательно создавать класс/id?

Question

[Думай Головой]

Всем привет!

Часто при вёрстке возникает такая проблема: например в сервисе есть куча форм, и там имеются textarea полностью одинаковые по стилям, только различается высота. Так вот: неужели хорошей практикой будет плодить сущности в виде отдельных (дополнительных) классов/id для каждой из них, писать лишние css строки, когда проще задать им эту высоту в инлайн стилях в самом html? Что-то вроде
<textarea style="height: 100px">

А также иногда встречаются такие противные блоки, у которых в макете есть уникальный вертикальный отступ, отличный от вертикального отступа остальных таких же блоков, и опять же стоит дилемма - неужели нужно создавать для него отдельный (дополнительный) класс/id, когда проще прописать внутри блока margin-top

Или есть ещё способ?

Answer 1

[Андрей Павленко]

Да, лучше создать отдельный id или класс.
Почему?
Да потому, что потом не будет возникать вопросов: "а как этот блок позиционируется", да и проследить проще в одном файле, чем искать потом в десятках других.
Вот даже сейчас рефакторю проект, и сталкиваюсь с этой проблемой - все сделано нормально в общем файле, а некоторые свойства прописаны с помощью style. И этот код и дублируется в разных файлах, и изменяется немного, да и не всегда быстро можно найти, в котором же именно файле генерируется это свойство (особенно если это смесь html, js, php)...

Comments

[Думай Головой]

Андрей Павленко
Тогда другой вопрос - как это именовать? .textarea-height-100?

[Думай Головой]

Ведь класс для стилей у них уже есть, допустим form-textarea

[Андрей Павленко]

Думай Головой: это не лучшее решение. Уже если так смотреть, то лучше немного .link, а потом прописываете в css правило .textarea+.link

[Думай Головой]

Андрей Павленко
А при чём тут слово link?

[bro-dev]

Думай Головой: Выяснить причину почему именно этот элемент отличается от других оставшихся, эту разницу охарактеризовать 1 словом, вот вам и название класса. А вообще это странно почему так какой то конкретный элемент отличаться должен, скорее всего логика нарушена.

[Думай Головой]

Роман Бережнов
Там разные textarea допустим слева, а справа 3-5 полей-инпутов вертикально. И textarea должна зависеть от того, какую высоту занимает правый блок с полями.

Answer 2

[andreyqin]

Все просто - для таких блоков вы выделяете общий класс, в который пишите стили, встречающиеся у всех подобных элементов, а уже уникальные стили определяете в нужном контексте.

Например (с использованием less):

.form-input {
    width: 200px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    border: 1px solid #eee;
}

.form1 {
    .form-input {
        margin-top: 20px;
    }
}

.form2 {
    .form-input {
        width: 210px;
    }
}

Ни в коем случае не пишите стили в разметке - это плохая практика. И не используйте id в стилях - это тоже плохая практика, так как id увеличивает специфичность правила, которое потом приходится переопределять с помощью !important, на больших проектах это может выйти боком.

Comments

[Думай Головой]

Да, про дурную практику я знаю и про специфичность, думал может такие ситуации это исключение из правил)

Answer 3

[Ксения Михайлова]

Если у вас высота формы зависит от высоты соседней колонки - то, возможно, стоит использовать джаваскрипт для задания высоты.