Как изменить CSS, когда требования изменяются?
Предположим, что мне дают требование для генерации нескольких страниц, которые имеют таблицы на них. Исходное требование - чтобы все таблицы составили 500 пкс.
Я записал бы свой CSS следующим образом:
table
{
width: 500px;
}
Это будет применяться через управление по всем таблицам. Теперь, что, если они изменяют требование так, чтобы некоторые таблицы составили 600 пкс. Что лучший способ состоит в том, чтобы изменить CSS? Если я даю классы таблиц так
table.SizeOne
{
width: 500px;
}
table.SizeTwo
{
width: 600px;
}
Или есть ли лучший способ для меня иметь дело с изменениями как это?
8 ответов
Ваше предложение действительно требует, чтобы вы добавили класс ко всем вашим таблицам, как существующим, так и новым, широким; хотя вы говорите «несколько страниц» и, таким образом, можно предположить, что есть только несколько таблиц.
Если вы можете рассматривать таблицы размером 500 пикселей как стандартные, а 600 пикселей как исключения, то, вероятно, будет более полезно продолжить установку значений по умолчанию:
table
{
width: 500px;
}
table.Wide /* or a more semantic class name */
{
width: 600px;
}
НАИЛУЧШИМ методом было бы изменение таблиц в зависимости от того, кем являются их родители. Например, определенные страницы должны иметь разные идентификаторы, например:
<body id="contacts">
<table>
<tr>
<td>Content</td>
</tr>
</table>
</body>
Таким образом, в вашем CSS будет:
table {
width: 500px;
}
#contacts table {
width: 600px;
}
Преимущество этого подхода в том, что вы полностью работаете в CSS, без необходимости добавлять что-либо в свои HTML-файлы. . Добавление классов для чего-то вроде этого просто сделает ваш код более неуправляемым в будущем.
Если ваш HTML-код не был написан с учетом правильного каскадирования, вам гораздо лучше добавить правильные идентификаторы к элементам, чем добавлять классы только к таблицам. Вознаграждение намного больше за работу, которую вам придется проделать.
Лично мне нравится использовать классы, названные в честь того, с чем я работаю, например навигации или содержимого. Если вы используете имена классов для указания размера, это похоже на обходной способ создания встроенных стилей. Человек, входящий и смотрящий на css, на самом деле не знает, с чем они работают.
вы можете определить классы, которые переопределяют основные настройки, используя класс body (класс, заданный для тега body) или так далее. Например, если общая ширина вашей таблицы установлена на 100, а на определенной странице (с bodyclass 'page2') вам нужно, чтобы ширина была 50px, вы можете сделать это так
table{
width: 100px;
}
.page2 table {
width :50px;
}
Таким образом, второй класс будет перекрывать первый для единственной страницы, которая имеет bodyclass = "page2", а на всех остальных ширина будет 100.
Хорошей практикой является установка имени класса для тела на основе раздела.
Мне это кажется не столько вопросом CSS, сколько изменением требований и CSS ... или, более конкретно, отслеживанием требований в контексте CSS ...
Это будет применяться ко всем таблицам. Теперь, что, если они изменят требование так, чтобы некоторые таблицы были 600 пикселей.
Это требование не означает, что «некоторые таблицы имеют ширину 600 пикселей», и если это так, вам нужен лучший способ выявления требований.
Вместо этого, вероятно, это будет что-то вроде «таблицы на странице HR« Каталог персонала »будут иметь ширину 600 пикселей». Сделайте так, чтобы правило CSS отражало именно это!
body#staff-directory table {
width:600px;
}
... или «таблицы результатов поиска будут иметь ширину 600 пикселей»:
table.search-results {
width:600px;
}
Вы можете закатить глаза и подумать: «Но ведь у меня так много похожих правил CSS!» но однажды они уже передумали, так что не удивляйтесь, когда они сделают это снова!
Эти «избыточные» правила пригодятся, когда клиент снова изменит требования и скажет «Таблицы на странице HR« Каталог персонала »будут шириной 600 пикселей; таблицы результатов поиска будут шириной 800 пикселей и все другие таблицы имеют ширину 500 пикселей ».
Теперь эти убогие, не описательные атрибуты CSS« Размер1 »и« Размер2 »выстрелили вам в ногу.
Я бы написал его:
table
{
width: 500px;
}
и использовал контроль версий, например SVN. То, что вы предлагаете, делает все невероятно сложным. Или без контроля версий:
table
{
/*width: 500px;*/
width: 600px;
}
Добавление множества классов, на мой взгляд, противоречит цели CSS.
Я бы дал им классы с осмысленными именами вместо SizeOne и SizeTwo, но да, это лучший подход.
Если у вас есть несколько разных макетов для всей страницы, вам может быть полезно создать несколько классов макетов и прикрепить их к своему телу (или другому содержащему тегу):
<body class="wide">
<!-- stuff -->
<table>...</table>
</body>
Затем в вашем CSS:
table {width:500px} /* defaults for all tables regardless of class */
body.wide table {width:600px} /* overrides for specific layouts */
body.slim table {width:300px}
Это похоже на расточительство времени, и для это будет просто таблица, но если вы также стилизуете изображения, блоки div и т. д. по-другому, вы можете сэкономить много разметки HTML.
#wrapper {width:500px;padding:20px 10px}
body.wide #wrapper {width:600px}
body.slim #wrapper {width:300px;padding:10px 5px}
table {width:500px} /* defaults for all tables regardless of class */
body.wide table {width:600px} /* overrides for specific layouts */
body.slim table {width:300px}
img {width:500px}
body.wide img {width:600px}
body.slim img {width:300px}
99% вашего HTML остается неизменным (очень полезно, если вы извлекаете это из базы данных и не хотите адаптировать его каждый раз, когда вы его используете), вы просто меняете класс тела.