Отсебятина Статьи Проекты
Облако тегов
Web CMS CSS htaccess HTML Javascript MySQL Php Безопасность Мониторы Новостная лента Оптимизация Ошибки Разработка сайта Часы Юзабилити оптимизация ошибки

Использование классов в CSS

Отсебятина от 12 октября 2008 года.    Теги: CSS


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

Основная идея классов - придать одинаковый вид одинаковым элементам, сокращая код. Классы облегчают верстку, улучшают читаемость кода. Но иногда я замечаю, что разработчики создают отдельные классы для отдельных элементов. С одной стороны — это удобно, когда список затрагиваемых свойств довольно большой, но часто разработчики создают класс для одного элемента с парой свойств. Это неверно, на мой взгляд:


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

Правильно:

<head>
 ...
 <style type="text/css">
  .divclass {
   color: #00ff00;
   font: bold 11pt Arial;
   text-indent: 15px;
   background: url('img.gif') no-repeat;
   padding: 25px 5px;
   position: abolute;
   top: 40%;
   left: 20%;
   opacity: 0.5;
 }
 <style>
 </head>
<body>
 <div class="divclass">
 </div>
...


<head>
...
</head>
<body>
 <div style="font: 11pt Arial; color: #cfcfcf;">
 </div>
...


<head>
 ...
  .divclass {
   color: #00ff00;
   font: bold 11pt Arial;
  }
 <style>
</head>
<body>
 <div class="divclass">
 </div>
 <div class="divclass">
 </div>
 <div class="divclass">
 </div>
 <div class="divclass">
 </div>
...


<head>
 ...
 <style type="text/css">
  .mytbl TD {
   padding: 5px;
  }
 <style>
</head>
<body>
 <table class="mytbl">
  <tr>
   <td></td>
   <td></td>
   <td></td>
  </tr>
 </table>
...




Не правильно:
<head>
 ...
 <style type="text/css">
  .divclass {
   font-size: 11pt;
  }
 <style>
</head>
<body>
 <div class="divclass">
 </div>
...
Оставить сообщение






Любое копирование должно сопровождаться ссылкой на сайт.
Если вам что-то не понравилось — сообщайте.
Кича Владимир
x
Мне не нравится этот сайт, удалить его