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

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

Поделитесь господа! Я думаю, это и начинающим очень пригодиться, потому что как оказалось это стопорит при верстке с нуля, имхо )
  • Вопрос задан
  • 1976 просмотров
Решения вопроса 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Вот реальный файл
/*!
 * Main styles
 *
 * @author     delphinpro <delphinpro@gmail.com>
 * @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";
Ответ написан
vilka_2009
@vilka_2009
Верстаю
Senseich, в принципе, ты на верном пути. Но, как порекомендовал, Алексей используй normalize или ему подобные файлы, и то что ты написал выпадет из основного файла css.

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы