Jump to content

Структура CSS-кода


workerbeeviii
 Share

Recommended Posts

В общем, как я понял, никто CSS-код просто списком не пишет, а разделяют на блоки по каким-либо признакам. Например, сначала блок Structure, а потом еще что-то и т. д.

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

Edited by workerbeeviii
Link to comment
Share on other sites

В общем, как я понял, никто CSS-код просто списком не пишет, а разделяют на блоки по каким-либо признакам. Например, сначала блок Structure, а потом еще что-то и т. д.

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

Стараюсь группировать блоки таким образом:


/* Глобальные стили, сбросы */
body, html { ... }
a { ... }
/* здесь перечислены _все_ элементы для которых необходимы стартовые стили */

/* Стили для единичных элементов, например стиль <b class="g-bigElement">...</b> */
.g-<name> {

}

/* Общие классы для блоков, которые применяются повторно */
.b-<block_name> {

}

/* #layout - главная обертка */
#layout {

}

/* #header */

/* #nav */

/* #middler */

/* #sidebar */

/* #footer */

/* ID остальных эл-ов */

UPD. Забыл добавить глобальные классы .g-, которые нельзя назвать блоками (стили для единичных элементов не связанных в структуры).

Edited by Ялекс
Link to comment
Share on other sites

что-то типа того:


/* Clear
-----------------------------------------------------------------------------*/
{сброс стилей}

/* Header
-----------------------------------------------------------------------------*/
{шапка сайта}

/* Middle
-----------------------------------------------------------------------------*/
{контентная часть. хотя ее тоже можно разбить}

/* Sidebar Left
-----------------------------------------------------------------------------*/
{левый блок}

/* Sidebar Right
-----------------------------------------------------------------------------*/
{правый блок}

/* Footer
-----------------------------------------------------------------------------*/
{футер}

в принципе тоже самое что и у Ялекса )))

Link to comment
Share on other sites

И у меня аналогичное представление стилей: сначала сброс, потом общие стили, а потом по структуре кода - шапка, контент, сайдбары, подвал, но увы когда стилевой файл становится, не то чтобы большим, но и не очень маленьким 50kb+ то приходится пользоваться поиском

Link to comment
Share on other sites

Ялекс, мдяя, у вас похоже авторский метод структурирования. А отдельные блоки для списков, форм не делаете?

Я улавливаю нотки сарказма… или мне показалось?

Уверяю вас, ни капельки сарказма, только благодарности. :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy