Как изменить CSS при изменении требований? - PullRequest
Новая
       4

Как изменить CSS при изменении требований?

7 голосов
/ 17 июня 2010

Предположим, у меня есть требование создать несколько страниц, на которых есть таблицы. Первоначальное требование для всех таблиц должно быть 500px.

Я бы написал свой CSS следующим образом: 

table
{
    width: 500px;
}

Это будет применяться по всем направлениям для всех столов. Теперь, что если они изменят требование так, что некоторые таблицы будут 600px. Какой лучший способ изменить CSS? Должен ли я дать таблицы классов так 

table.SizeOne
{
    width: 500px;
}

table.SizeTwo
{
    width: 600px;
}

Или есть лучший способ для меня справиться с такими изменениями?

Ответы [ 8 ]

12 голосов
/ 17 июня 2010

Ваше предложение требует, чтобы вы добавили класс ко всем вашим таблицам, как существующим, так и новым, широким;хотя вы говорите «несколько страниц», и, таким образом, можно предположить, что таблиц всего несколько.

Если вы можете рассматривать таблицы 500px как стандартные и 600px как исключения, то продолжение установки по умолчанию, вероятно, будетбыть более полезным: 

table
{ 
    width: 500px; 
} 

table.Wide /* or a more semantic class name */
{ 
    width: 600px; 
}
6 голосов
/ 17 июня 2010

Для меня это не вопрос CSS, а вопрос об изменении требований и CSS ... или, точнее, прослеживаемости требований в контексте CSS ...

будет применяться через доску для всех столов.Теперь, что если они изменят требование так, что некоторые таблицы будут 600px.

Это требование не просто скажет, что "некоторые таблицы имеют ширину 600px", и если это так, вам нужен лучший способ для выявления требований.

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

body#staff-directory table {
    width:600px;
}

... или "таблицы результатов поиска будут иметь ширину 600 пикселей.": 

table.search-results {
    width:600px;
}

Вы можете закатить глаза и подумать "Но тогда у меня так много похожих правил CSS! "но они уже однажды передумали, так что не удивляйтесь, когда они сделают это снова!

Эти «избыточные» правила пригодятся, когда клиент снова изменит требования и скажет «Таблицы на странице« Каталог персонала »HR будут иметь ширину 600 пикселей; таблицы результатов поиска будут иметь ширину 800 пикселей, а все остальные таблицы будут иметь ширину 500 пикселей». Теперь эти непристойные, не описательные атрибуты CSS «Size1» и «Size2» ударили вас по ноге.

6 голосов
/ 17 июня 2010

Лично мне нравится использовать классы, названные в честь того, с чем я работаю, например, навигация или контент. Если вы используете имена классов для указания размера, это похоже на обход встроенных стилей. Человек, входящий и смотрящий на css, не знал бы, над чем он работает.

5 голосов
/ 17 июня 2010

вы можете определять классы, которые переопределяют базовые настройки, используя класс body (класс, указанный для тега body) или около того. например, если общая ширина вашей таблицы установлена ​​на 100 и на определенной странице (с bodyclass 'page2'), вам нужно иметь ширину 50px, вы можете сделать это как 

table{
 width: 100px;
}

.page2 table {
 width :50px;
}

так что второй класс будет перезаписывать первый для единственной страницы, которая имеет bodyclass = "page2", а ширина в любом другом месте будет 100.

Рекомендуется устанавливать имя класса для тела на основе раздела.

5 голосов
/ 17 июня 2010

Я бы дал им классы со значимыми именами вместо SizeOne и SizeTwo, но да, это лучший подход.

1 голос
/ 17 июня 2010

Если у вас есть несколько разных макетов по всей странице, вам может быть полезно создать некоторые классы макетов и прикрепить их к своему телу (или другому содержащему тег): 

<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-кода остаются неизменными (очень полезно, если вы извлекаете это из базы данных и не хотите адаптировать его каждый раз, когда используете его), вы просто меняете класс тела.

0 голосов
/ 17 июня 2010

НАИЛУЧШИМ методом было бы изменить таблицы, основываясь на том, кто их родители.Например, определенные страницы должны иметь разные идентификаторы, например: 

<body id="contacts">
  <table>
    <tr>
      <td>Content</td>
    </tr>
  </table>
</body>

Таким образом, в вашем CSS будет: 

table {
  width: 500px;
}

#contacts table {
  width: 600px;
}

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

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

0 голосов
/ 17 июня 2010

Я бы написал: 

table
{
    width: 500px;
}

и использовал бы контроль версий что-то вроде SVN.То, что вы предлагаете, делает вещи невероятно сложными.Или без контроля версий: 

 table
    {
        /*width: 500px;*/
         width: 600px;

    }

Добавление большого количества классов по моему мнению побеждает объект CSS.

...