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 файлы становятся чрезвычайно большой и каждый класс становится весьма специфична

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

.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 2

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

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

Answer 3

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

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

960 grid css framework

Blueprint css framework

Answer 4

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

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

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

Answer 5

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

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

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

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

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

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 цента - от кого-то, кто только что сожжен этим.