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

Question

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

/******* HEADER STYLES  *********/








/********* MAIN SECTION STYLES  ***********/













/********** FOOTER  ***************/











/*********** MEDIA QUERIES  **********/

Answer 1

Это очень субъективная тема, но я рад взвесить ее. Каждый разрабатывает свой собственный стиль организации кода, и большинство на удивление территориально (этот ответ, скорее всего, будет отвергнут теми, кто просто не согласен с моими предпочтениями ... _sigh _)

В любом случае, хотя большинство людей предпочитают стандартный стиль:

#someID{
    width: 200px;
    height: 50px;
}
#nutherID{
    width: 150px;
    height: 30px;
}

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

#someID{width:200px;height:50px;border:1px solid red;}
#nutherID{text-align:center;color:blue;}

Я делю свой CSS на разделы, как и вы, но я также делю свои страницы на div/ разделы / все.Я хочу иметь возможность быстро найти нужный мне раздел css.Таким образом, мои ярлыки, как вы показали выше, будут описаниями разделов (например, ***** About *****, ***** Some other section description ***** и т. Д.) Та же идея, что и у вас, но более разбитая.

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

***** GLOBAL *****
*{position:relative;box-sizing:border-box;} /* Here come the down-votes... */
.bgBlack{background:black;}
.bgWheat{background:wheat;}
.taCenter{text-align:center;}
.taRight{text-align:right;}

Наконец, мне нравится использовать отступы для отображения вложенности:

.about-outer{width:100%;height:500px;}
    .about-inner{border:1px solid #ccc;}
        .about-inner p{font-size:1.3rem;}

Мои $ 0,02 ...