CSS - общие классы

Question

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

Это следующие

.clear { float: none; clear: both; }
.fl_l{ float: left; }
.fl_r{ float: right; }
.ta_l{ text-align: left; }
.ta_r{ text-align: right; }
.no_td:hover { text-decoration: none; }

Какие похожие классы вы используете? Вы когда-нибудь видели эту технику в других проектах?

Answer 1

Извините, что опубликовал ответ на такой старый вопрос, но я думаю, что это плохая идея. Может быть, для определенного набора проблем, это отвечает всем требованиям. Я думаю, что CSS - это то место, где должна быть информация о стиле. Делая то, что вы предлагаете, вы, по сути, просто используете атрибут style в html и, следовательно, смешиваете контент с информацией о стиле. Это плохая идея, потому что если однажды вы решите полностью изменить стиль, вам придется войти и обновить HTML, удалив большинство классов.

Например, если у вас есть такой HTML-код (скажем, для аннотации, которая много раз используется на странице):

<p class="abstract ta_l mb10">
    Lorem ipsum dolor set.
</p>

И однажды вы решили изменить то, как выглядит это резюме: например, вы больше не хотите, чтобы оно было «выровнено по тексту: оставлено» и без полей снизу (это, вероятно, то, чем будет mb10 ... Вы уже видели, что это используется раньше), вам придется зайти и изменить HTML.

Теперь умножьте это на 10 элементов, которые вы должны изменить. Что если бы это было 50? Что делать, если вы делали полный редизайн? Дрожь .

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

Вместо этого, если у вас есть такой HTML-код:

<p class="abstract">
    You should sign in or something!
</p>

и CSS вроде этого:

.abstract {
   margin-bottom: 10px;
   text-align: left;
}

Вы можете просто изменить это одно правило на следующее:

.abstract {
  text-align: right;
  margin-bottom: 0;
}

и будь готов! Для всех 50 элементов!

только мои 2 цента - от кого-то, кто только что сгорел от этого.

Answer 2

да, если вы не используете общие классы, как вы, тогда ваши CSS-файлы становятся очень большими, и каждый класс становится очень специфичным

некоторые другие общие классы ...

.split { float: left; width: 50%; }
.center { text-align: center: margin: auto; display: block; }
.bold { font-weight: bold; }
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }

Answer 3

Мне нравится держаться подальше от того, что вы описываете как общие имена классов, сохраняя как можно больше информации, связанной со стилями, от HTML.Как упомянул Хантер, это означает, что списки селекторов могут иногда становиться длинными, но я не считаю это проблемой.

Если бы я использовал общее имя класса для очистки чисел с плавающей запятой (единственный из примеровучитывая то, что я обычно мог бы), я бы чаще всего использовал что-то вроде .group - к группе слов, по крайней мере, добавлена ​​небольшая семантика (группа вещей, которые, вероятно, принадлежат друг другу).Это было предложено Дэном Седерхолмом.

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

Answer 4

У каждого свои предпочтения, и это также зависит от характера вашего приложения. Тем не менее, я лично склонен повторно использовать base.css, который я портирую из приложения в приложение, в качестве компонента начального стиля. В ней я также реализую операторы Эрика Мейерса для сброса CSS, которые значительно упрощают разработку в браузерах.

Если вы действительно заинтересованы в том, чтобы узнать, как формируются профессиональные CSS-фреймворки, то, вероятно, стоит загрузить и просмотреть следующее:

960 сетка css framework

Blueprint css Framework

Answer 5

Восстановление потока после плавающего элемента:

.clearfix:after 
{
    clear:both;
    content:".";
    display:block;
    height:0;
    line-height:0;
    visibility:hidden;
}