Каковы хорошие стили CSS для маркеров? - PullRequest
Новая
       7

Каковы хорошие стили CSS для маркеров?

2 голосов
/ 15 февраля 2009

Я считаю полезным определить стили CSS для маркеров, такие как 'hidden' или 'selected', чтобы я мог легко пометить что-то как скрытое или выделенное, особенно при использовании технологии на основе тегов, такой как ASP.NET MVC или PHP. 

.hidden
{
    display:none;
}

.newsItemList li.selected
{
    background-color: yellow;
}

Мне не особо хочется изобретать велосипед здесь , и я хотел бы знать, какие другие вещи, как это, полезны или распространены - или есть ли какие-либо подводные камни, на которые стоит обратить внимание.

Должен ли я смотреть на какие-либо конкретные рамки CSS для других вещей, как это? Плюс есть имя для этого типа класса CSS, по которому я могу искать.

Ответы [ 5 ]

2 голосов
/ 15 февраля 2009

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

При этом я постоянно использую следующее:

  • . Доступность - визуально скрыть элементы, но сохранить их нетронутыми для программ чтения с экрана и таблиц стилей печати
  • .clear - привязано к Easy Clearing
  • .first-child и .last-child - легко назначать стили для первого / последнего элемента в контейнере. Это спасло меня много раз, и я предпочитаю это плохо поддерживаемым: псевдо-селекторы
  • .replace - привязано к Phark IR для замены прозрачного изображения

Наконец, я динамически назначаю .js элементу <html> с помощью 

<script type="text/javascript">if(h=document.documentElement)h.className+=" js"</script>

Это позволит мне определить .js (остаток селектора) стилей для таргетинга только на браузеры с включенным JavaScript.

1 голос
/ 15 февраля 2009

Относительно вашего вопроса о CSS-фреймворках ...

Лично я всегда обнаружил, что W3C имеет самый сложный, но и самый точный ответ на любой вопрос CSS.

После многих лет программирования и игры с CSS / HTML / PHP я согласен с приведенным выше комментарием.

Нет никакого вреда в определении маркера для чего-то, чтобы быть центрированным или выровненным по правому краю, используя что-то по линиям «.center» или «.righths», но имейте в виду, как указано выше, если вы хотите изменить вся ваша работа будет увеличена, потому что вам придется редактировать как CSS, так и HTML.

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

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

1 голос
/ 15 февраля 2009

Вы действительно должны расширять этот список по мере необходимости, вместо того, чтобы запрашивать список общих классов по всем направлениям - у вас будет только раздувание. Если вы хотите не изобретать велосипед, загляните в некоторые CSS-фреймворки ( blueprint или 960 ). В некотором отношении универсальные классы, такие как .center {text-align: center}, имеют некоторый уровень избыточности, но часто они необходимы. Например, следующий шаблон, который слишком распространен, но его следует избегать: 

element.onclick(function(e){ this.style.backgroundColor = 'yellow' }

Это плохо, потому что вы действительно должны использовать: 

element.onclick(function(e){ this.className = 'highlight' }

Последний позволяет вам изменять ваши стили, только касаясь файлов CSS. Но если имя класса CSS имеет только один элемент стиля, вам, вероятно, следует избегать его, потому что не имеет смысла иметь его (.hidden в вашем примере) и вызывать его напрямую: 

element.onclick(function(e){ this.display = 'hidden}
1 голос
/ 15 февраля 2009

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

Я тоже собирался использовать несколько классов маркеров. Я создал один .center для центрирования элементов в теге DIV. Однако меня поразила мысль, что я смотрю на CSS совершенно неправильно. Я рассуждал, что CSS должен определять способ отображения элемента без изменения HTML-страницы. Используя классы маркеров, например, .center, мне пришлось бы изменить ОБА CSS и HTML, если бы я хотел, чтобы тег DIV был выровнен по правому краю в следующем месяце. Поэтому вместо этого я создал класс .latestHeader (DIV должен содержать «последнюю информацию», такую ​​как новость), и в этом классе я установил текст для выравнивания по центру. Теперь, когда я хочу изменить выравнивание текста, я просто изменяю CSS для этого DIV, и мне не нужно трогать HTML.

0 голосов
/ 18 апреля 2009

Я часто нахожу себя держащим два класса во всех моих таблицах стилей: "центр" (который просто применяется text-align: center;, и класс очистки с плавающей точкой, который применяет clear:both;.

Я подумал о добавлении оператора "reset" ко всем моим стилям, но пока не нуждался в этом. Оператор сброса будет выглядеть примерно так: 

*
{
  margin: 0;
  padding: 0;
}

Я использую их достаточно часто, чтобы включить их практически во все. Они достаточно малы, поэтому я не чувствую, что они раздувают код вообще.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...