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

Я оказался в аналогичных ситуациях.

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

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

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

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

, имейте заголовок того файла, возвращают его с типом ТЕКСТА/СОЕЕРЖИМОЩО х¦йл¦ CSS и имеют тот файл

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

A является хорошим решением в целом для сокращения головной боли развития и загрузки страницы наверху. B, вероятно, требует Вас, также установка соответствующих дат истечения срока файла, чтобы не иметь браузер просто игнорирует любые новые стили, которые Вы хотите генерировать в данный момент в пользу того, что было загружено во время последнего посещения. Так как можно обычно выполнять то же самое в B, как Вы можете путем простого наличия статической таблицы стилей и динамично записанных имен класса/ИДЕНТИФИКАТОРА элемента, это обычно - не идеальное решение если при выполнении чего-то действительно странного.

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

Вы хотите использовать в своих интересах каскадную природу CSS и способов, которыми наследованы правила.

Кодируйте сначала наиболее общие случаи и затем измените специфические особенности.

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

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

/* 
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");

Удача, находящая Ваш собственный стиль.

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

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

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

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

1. Создайте папки и файлы, относящиеся к Вашему проекту (я использую стиль пространства имен Java),
   • Например,/css/com/mydomain/myprojectname/globalheader.css
2. Затем, я использую имена классов, которые отображаются на местоположение файловой системы
   • Например <идентификатор отделения ='header' класс ='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; }

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

Надеюсь, вам поможет.

Увидимся.