From IT Skills
Revision as of 19:47, 29 January 2021 by Waiter (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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

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

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

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

bad things in CSS[edit]

you can use BEM 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]

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]

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

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

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

Pseudo-classes[edit]

: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]

@import in vanila CSS

Webpack[edit]

@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]

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