Как вы организуете CSS в своем проекте?

Вы хотите использовать каскадный характер CSS и способы наследования правил.

Кодируйте сначала самые общие случаи, а затем меняйте конкретику.

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

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

/* 
This is the CSS index page. It contains no CSS code but calls the other sheets
*/
@import url("main/reset.css");
@import url("main/colors.css");
@import url("main/structure.css");
@import url("main/html-tags.css");
@import url("main/sign-up-sign-in.css");
@import url("main/pagination.css");
@import url("main/menu-items.css");
@import url("main/teachers-list.css");
@import url("main/footer.css");
@import url("main/misc-custom-sections.css");
@import url("main/error-messages.css");

Удачи в поиске собственного стиля.

Я использую один шаблон masterheet template.css, который стилизует мой основной шаблон. Для любого сайта, который требует отдельного стиля, который не может быть покрыт основным шаблоном, я либо помещаю его в заголовок сайта, если он короткий, либо создаю новый лист для этого случая.

В идеале я хочу, чтобы файл template.css был гибким, чтобы охватить большинство случаев.

Я попал в похожие ситуации.

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

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

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

<link rel = "stylesheet" type = "text/css" href = "styles.php" />

, чтобы заголовок этого файла возвращал его с типом содержимого text / CSS, и этот файл

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

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

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

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

Мне помогает то, что я фактически создал псевдопространства имен для своего CSS. Я знаю, что CSS 3 поддерживает пространства имен, и это упрощает задачу, но, поскольку некоторые браузеры не поддерживают это, я делаю следующее:

1. Создавайте папки и файлы, относящиеся к вашему проекту (я использую стиль пространства имен Java)
   • Например, /css/com/mydomain/myprojectname/globalheader.css.
2. Затем я использую имена классов, которые соответствуют расположению файловой системы.
   • Например, <div id = 'header' class = 'com-mydomain-myprojectname-globalheader-topClass'>
3. Используйте разделители и хорошие комментарии в вашем файле css
   • Например, / * ---------------------------- начало раздела ссылок --------------- ----- * /
4. Используйте PHP или что-то еще, чтобы загрузить эти файлы и объединить их в одну таблицу стилей при загрузке (вы можете кэшировать полученные листы, если вы действительно умен. Соглашение о пространстве имен предотвратит конфликты между именами классов.

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

поддерживать файлы css НАМНОГО проще, если вы сможете вовлечь всех в работу с правильным использованием каскадирования и свести свои сильные стороны к минимуму.

Убедитесь, что элементы наследуют стили и что переопределения не слишком тяжелые, чтобы ваш CSS не свалился с ума. Таким образом, вы позволяете себе иметь только 2 или 3 таблицы стилей для макета / базовых стилей и переопределений. Если вы установите жесткие уровни контроля над тем, что попадает в таблицы стилей макета / основы, и будете регулярно заходить, чтобы переоценить то, что находится в таблице переопределений, чтобы увидеть, что можно переместить на базу, а что можно упростить, вы освободитесь чтобы позволить людям обходить их по своему желанию, но также и для сохранения контроля над ползучестью.

Вот моя теория ...

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

Второй подход хорош до того момента, когда вы начнете задавать вопросы ... Я имею в виду:

Должен ли стиль фона для этого div находиться в файле graphic.css или layout.css?

Должен ли стиль шрифта идти в fonts.css или в макете, когда доходит до ширины P?

Если поле для заголовка с div положения значка переходит в файл graphic.css, layout.css или fonts.css (было бы проще использовать одно и то же объявление для значка, текста и позиции .. .)?

Потом вы поняли, что в этом подходе что-то не так.

Сейчас я комментирую. МНОГО.

template.css -

/* ////// Headers ////// */
#header {
    width: 1004px;
    height: 243px; /* 263H-20MARG=243H */
    padding: 20px 0px 0px 0px;
    background-color: #000000;
    background-image:url('../images/redset/top1-bk.png');
    background-repeat:no-repeat;
    background-position:right top;
    clear: both;
}

/* logo */
#logo {
    background-image:url('../images/redset/wh-logo.png');
    background-repeat:no-repeat;
    width:327px;
    height: 263px;
    float: left;
    margin: -20px 0px 0px 0px;
}
#logo a {
    width:327px;
    height:263px;
}

/* Top menu & Banner */
#menuybanner {
    text-align: center;
/*  margin-right: 65px; optional*/
}
#bannerz {
    height: 152px;
    width: 653px;
    text-align: left;
    margin-right: 24px;
    /* optional: width: 100%;
    margin: 0px */
}
#bigmenu {
    text-align: left;
    margin: 18px 0px 14px 74px;
}

#bigmenu img {
    margin: 0px 22px 0px 0px;
}

Первоначально это было бы в трех разных CSS: макет, графика и текст. Теперь я знаю, что все делают.

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

a, .b, .c, .d, #f, #2 { background-color: black; }

Их действительно сложно раскрыть. Конечно, если вам нужно это сделать, продолжайте, но я имею в виду, иногда они просто группируются просто так, чтобы быть более загадочным ... как Moodle ... хахаха.

Надеюсь на помощь.

Увидимся.