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

Question

Senseich @Senseich

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

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

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

Вопрос задан более трёх лет назад
2035 просмотров

2 комментария

Подписаться 15 Простой 2 комментария

Решения вопроса 2

5 комментариев

Senseich @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
}

Написано более трёх лет назад

Максим @Valter1234

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

Написано более трёх лет назад
Толстый Лорри @Free_ze

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

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

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

Написано более трёх лет назад
Виолетта Морозова @vilka_2009
Максим, хорошая статья, но спорная. Например, очень тронул пункт, где не рекомендуется писать css так:
padding-top: 10px; padding-bottom: 10px; padding-right: 15px; padding-left: 20px;

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

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

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

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

2 комментария

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Средний
Как отсортировать в ХТМЛ по дате рождения от младшего к старшему, а так же, нумерацию их 1,2,3,4. Чтобы можно было потом добавить еще людей?
- 1 подписчик
- час назад
- 19 просмотров
1

ответ
HTML

+1 ещё

Простой
При загрузке картинки этот блок не имеет размера, как исправить?
- 1 подписчик
- 4 часа назад
- 38 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 5 часов назад
- 146 просмотров
1

ответ
CSS

Простой
Как убрать отступ?
- 1 подписчик
- 8 часов назад
- 87 просмотров
2

ответа
HTML

+1 ещё

Простой
Как кодировать кириллицу в поле data?
- 1 подписчик
- 10 часов назад
- 39 просмотров
1

ответ
Вёрстка

Средний
Как правильно вставлять изображения при наличии двух тем оформления сайта?
- 1 подписчик
- 15 часов назад
- 94 просмотра
1

ответ
HTML

+1 ещё

Простой
Как в теге select один символ сделать другого цвета?
- 1 подписчик
- 17 часов назад
- 84 просмотра
1

ответ
CSS

Простой
Как уместить кроссбраузерную поддержку в одну строку?
- 1 подписчик
- 17 часов назад
- 101 просмотр
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- вчера
- 79 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- вчера
- 87 просмотров
2

ответа
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Доработать клиентское приложение для GTA 5 на C#

20 апр. 2024, в 00:51

1000 руб./за проект

Верстка и логика формы выбора билетов в зале для покупки

20 апр. 2024, в 00:43

10000 руб./за проект

Разработать формирование УПД на Java

20 апр. 2024, в 00:28

20000 руб./за проект

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

Answer 1 · 2018-07-24 16:44:50

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

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

Answer 2 · 2018-08-02 17:04:56

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

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

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

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

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

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

Минуточку внимания

Войдите на сайт