From IT Skills
Jump to: navigation, search

порядок приоритета задания стилей[edit | edit source]

  • Наименее низким приоритетом обладают встроенные стили браузера
  • Пользовательский стиль в браузере
  • Наследуемые стили от родительских элементов
  • Следующие css-стили заданные во внешних файлах, тут правило важнее (при прочих равных условиях), если файл содержащий правило находится после файла содержащий предыдущее. Это же правило относится и к взаимному расположению правил внутри документа.
  • Далее по стоимости применения селекторов:
    • Теги имеют наименьший приоритет: h1, div, p
    • Классы и псевдоклассы. Селектор: .item { }, :hover { }
    • Аттрибуты [attr=”value”]. Пример: [type=”checkbox”] {}
    • Идентификатор ID – наивысший приоритет. Типа #main { }
  • Еще более высоким приоритетом является задание стиля прямо в style теге:

<div style=”width : 203px”></div>

  • И наиболее высоким приоритетом является стиль с сопроводительным словом !important.

bad things in CSS[edit | edit source]

you can use BEM, CSS modules and other fancy tools & methodologies... are just patches that require strict methodologies and tooling. Not solution for the future... problems ...with CSS on apps •No local variables.•Implicit dependencies.•No dead code elimination.•No code minification.•No sharing of constants.•Non-deterministic resolution.•No isolation.

Selectors[edit | edit source]

The 30 CSS Selectors You Must Memorize

browser reads selectors from right to left, long selectors may give it an extra workload... Use classes for styling, IDs and data-attributes to bind JavaScript

Attribute selector[edit | edit source]

X[attribute] will only select the anchor tags that have a attribute attribute.

a[data-info~="image"][edit | edit source]

The tilda (~) symbol allows us to target an attribute which has a spaced-separated list of values.

Pseudo-classes[edit | edit source]

:any
...
:active
:checked
:focus
:hover
:disabled
...
:first
...
:fullscreen
...
:in-range
:invalid
...
:lang()
...
:link
:not()
...
:nth-child()
:nth-last-child()
:nth-last-of-type()
...
:optional
...
:root
:scope

Modules[edit | edit source]

@import in vanila CSS

Webpack[edit | edit source]

@import and url() are interpreted like import and will be resolved by the css-loader

https://webpack.github.io/docs/stylesheets.html

Sass or Less ?[edit | edit source]

answer: PostCSS with Sass syntax and .css extension!!!