Хороший пример структурированного CSS файла?

Question

[Senseich]

Всем привет! Хочется услышать и увидеть примеры от опытных верстальщиков, как правильно начинать CSS файл и структурировать его.
Я имею ввиду, что за чем идет: вначале стили для html, body , потом для a, p, ul li потом для h1-h6 . Хотелось бы хороший пример с хорошей структурой, т.к. я раньше в основном правил чужую верстку, а если и делал с нуля, то просто действовал по принципу что вижу, то и пишу в CSS )) Решил наконец сделать с нуля и четко всё структурировать.

Поделитесь господа! Я думаю, это и начинающим очень пригодиться, потому что как оказалось это стопорит при верстке с нуля, имхо )

Comments

[Dymok]

имхо, лучше использовать препроцессор и разделять стили по файлам

[Senseich]

Dymok, возьму на заметку, но мне больше интересно, как правильно начинать css файл, т.е.какие начальные стили прописывать надо, а какие не надо )

Answer 1

[Сергей delphinpro]

Вот реальный файл

/*!
 * Main styles
 *
 * @author     delphinpro <[e-mail]>
 * @copyright  copyright © 2018 delphinpro
 * @license    licensed under the MIT license
 */
//==
//== Config & mixins
//== ======================================= ==//
$DEV_MODE: true;
@import "vrhythm.cfg.scss";
@import "grid.cfg.scss";
@import "../../node_modules/bs-grid-system/source/scss/bs-grid";
@import "../../node_modules/vrhythm/source/mixins/rhythm";
@import "main.cfg.scss";
@import "mixins.scss";
@import "../../node_modules/tiny-slider/src/tiny-slider";
//==
//== Global styles
//== ======================================= ==//
@import "webfonts.scss";
@import "vendor/normalize";
@import "base/global.scss";
@import "base/grid-system.scss";
@import "base/page.scss";
@import "base/site.scss";
@import "base/table.scss";
@import "base/input.scss";
@import "base/uploadbox.scss";
@import "base/buttons.scss";
@import "base/checkbox.scss";
@import "base/radio.scss";
@import "base/radio-button.scss";
@import "base/radio-panel.scss";
@import "base/controls-group.scss";
@import "base/form-field.scss";
@import "base/auto-height.scss";
@import "base/transitions.scss";
//==
//== Blocks
//== ======================================= ==//
@import "blocks/availability.scss";
@import "blocks/availability-details.scss";
@import "blocks/back-link.scss";
@import "blocks/benefit-block.scss";
@import "blocks/block-heading.scss";
@import "blocks/breadcrumb.scss";
@import "blocks/btn-close.scss";
@import "blocks/callback-link.scss";
@import "blocks/checked-list.scss";
@import "blocks/ci.scss";
@import "blocks/clear-link.scss";
@import "blocks/document-list.scss";
@import "blocks/download-link.scss";
@import "blocks/email-link.scss";
@import "blocks/entry-item.scss";
@import "blocks/expert-consult.scss";
@import "blocks/goods-attributes.scss";
@import "blocks/heading.scss";
@import "blocks/icons.scss";
@import "blocks/info-text.scss";
@import "blocks/logo.scss";
@import "blocks/paginate.scss";
@import "blocks/phone-link.scss";
@import "blocks/phone-with-icon.scss";
@import "blocks/phone.scss";
@import "blocks/popular-links.scss";
@import "blocks/price.scss";
@import "blocks/print-link.scss";
@import "blocks/section.scss";
@import "blocks/service-description.scss";
@import "blocks/services.scss";
@import "blocks/share-block.scss";
@import "blocks/show-all.scss";
@import "blocks/smenu-box.scss";
@import "blocks/smenu.scss";
@import "blocks/tags.scss";
@import "blocks/unordered-list.scss";
@import "blocks/worktime.scss";
@import "blocks/zoom.scss";
//==
//== Blocks
//== ======================================= ==//
@import "blocks/about-us-section.scss";
@import "blocks/article-section.scss";
@import "blocks/benefits.scss";
@import "blocks/carousel.scss";
@import "blocks/cart.scss";
@import "blocks/delivery-map.scss";
@import "blocks/delivery-partners.scss";
@import "blocks/delivery.scss";
@import "blocks/footer.scss";
@import "blocks/header.scss";
@import "blocks/help-me.scss";
@import "blocks/load-more.scss";
@import "blocks/nav-catalog.scss";
@import "blocks/nav.scss";
@import "blocks/navbar.scss";
@import "blocks/news-section.scss";
@import "blocks/panel.scss";
@import "blocks/params-panel.scss";
@import "blocks/payment-block.scss";
@import "blocks/search.scss";
@import "blocks/catalog-table.scss";
@import "blocks/catalog-grid.scss";
@import "blocks/time-range.scss";
//==
//== Components
//== ======================================= ==//
@import "components/spin.scss";
@import "components/selector.scss";
@import "components/tabs.scss";
@import "components/hamburger.scss";
@import "components/fixed-bar.scss";
@import "components/step-indicator.scss";
@import "components/complete-screen.scss";
@import "components/ordering.scss";
@import "components/order-complete.scss";
@import "components/summary.scss";
@import "components/goods.scss";
@import "components/basket-contains.scss";
@import "components/basket-goods.scss";
@import "components/basket.scss";
@import "components/icon-complete.scss";
@import "components/big-order-form.scss";
@import "components/feedback-form.scss";
@import "components/modal.scss";
@import "components/vue-scrollbar.scss";
@import "components/mobile-menu.scss";
@import "components/gallery.scss";
//==
//== Page specific classes
//== ======================================= ==//
@import "pages/home.scss";
@import "pages/articles.scss";
@import "pages/catalog.scss";
@import "pages/product.scss";
@import "pages/terms.scss";
@import "pages/services.scss";
@import "pages/news.scss";
@import "pages/feedback.scss";
@import "pages/page404.scss";
//==
//== Helpers & other classes
//== ======================================= ==//
@import "base/helpers.scss";
@import "base/printer.scss";

Comments

[Senseich]

Круто конечно ) а можно глянуть файл где находятся самые начальные стили, что то вроде такого:

* { 
margin: 0;                            
padding: 0;                            
}

html { height: 100%; }                         
body {                                       
      font: 12px/18px Arial;                       
       height: 100%;}                                        
       
a {              
   color: blue;
   outline: none;
   text-decoration: underline;                 
}
a:hover {                           
	text-decoration: none; 
}

p {
	margin: 0 0 18px 
}

img {
	border: none ;
}

h1, h2, h3, h4, h5 {
    font-weight: 700;
    color: #000
}

[Максим]

Добрый день!
Алексей уже ответил на вопрос, но все же хочу сделать важное отклонение от самого вопроса. А именно на хабре есть прекрасный перевод правил по оформлению css/html файлов.

[Толстый Лорри]

А чем Blocks от Components у вас отличаются?

[Сергей delphinpro]

Толстый Лорри, стили от vue-шных компонентов. я их так подключаю, не в vue файлах

[Виолетта Морозова]

Максим, хорошая статья, но спорная. Например, очень тронул пункт, где не рекомендуется писать css так:

padding-top: 10px;
padding-bottom: 10px;
padding-right: 15px;
padding-left: 20px;

А рекомендуется писать сокращенно.
padding: 10px 15px 10px 20px;

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

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

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

Answer 2

[Виолетта Морозова]

Senseich, в принципе, ты на верном пути. Но, как порекомендовал, Алексей используй normalize или ему подобные файлы, и то что ты написал выпадет из основного файла css.

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

Будет так: сначала стили для html, body, потом для общего центровщика - wrapper, потом стили по стайл-гайду - все как у тебя: заголовки, параграфы, списки, ссылки, кнопки, изображения. Порядок тут не особо важен и скорее зависит от дизайна и того, как ты будешь верстать. Но закономерность можешь проследить в моем перечислении:
1) сначала идут заголовки: всегда и везде в тексте сначала идет заголовок.
2) потом параграфы: когда ты что-то читаешь после заголовка всегда идет параграф.
3) потом в обычной статье мы можем что-то перечислить как сложно-сочиненным предложением, так и распределив перечисление в список, поэтому после параграфов идут списки.
4) потом дополнить статью мы можем ссылками
5) а ссылки можем сделать в виде кнопок
6) а может и в виде картинки
7) а может картинка - это не ссылка, подумаешь ты и поставишь стили для нее раньше ссылок. Но вдруг она когда-нибудь будет ссылкой, поэтому лучше стили для картинок поставить после ссылок, чтобы, если что, переопределить стили ссылки.

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

Comments

[Senseich]

Виолетта Морозова, спасибо за объемный ответ, то что нужно, ещё бы примерчик реальный ) Ещё хотел узнать, если использовать бутстрап, там вроде есть уже нормалайз или я что-то путаю?

[Виолетта Морозова]

Senseich, не знаю - не юзаю бутсрап. Но наверняка есть, ведь он рассчитан на людей не особо связанных с версткой, что они просто скачают фреймворк и начнут делать разметку. Так что, думаю должны быть обнуляющие стили (нормалайз и т.п.)