CSS Important Rules

  • CSS declarations mark with ! important have the highest priority.
  • But, only use !important as a last resource. It's better to use correct specificites - more maintainable code!
  • Inline styles will always have priority over styles in external stylesheets;
  • A selector that contains 1 ID is more specific than one with 1000 classes
  • A selector that contains 1 class is more specific than one with 1000 elements
  • The universal selector * has no specificy value (0,0,0,0)
  • Rely more on specificity than on the order of selectors.(If your use order and somebody move your css code up or down, if will be a mess)
  • But, rely on order when using 3rd-party stylesheets - always put your author stylesheet last.
  • (0,0,0,0) = Inline, ID, classes elements

Importance Calc of CSS:

first look at Importance:

  • User !important declarations(user settings in browser)
  • Author !important declarations (CSS from developer)
  • Author declarations(CSS from developer)
  • User declarations(User setting)
  • Default browser declarations

Then specificity:

  1. Inline styles
  2. IDs
  3. Classes, pseudo-classes, attribute
  4. Element, pseudo-elements

Then source orders:

  • The last declaration will override all other declarations and will be applied.

CSS dimensions selection logic

  1. Declared value(author declarations)
  2. Cascaded value(after the cascade: calc of stylesheets)(browser default)
  3. Specified value(defaulting, if there is no cascaded value)(initial value, if browser has no deifinition)(or from inheritance)
  4. Computed value(converting relative values to absolute)(convert rem to px)
  5. Used value(final calculations, based on layout)(compare 2,3,4)
  6. Actual value (browser and device restrictions)

CSS Font Units

px - pixel rem - Relative to the font-size of root element

CSS relative Unit Calc

Fonts

  • 150% = 150% of parent's computed font size.(if parent = 16px, result = 24px)
  • 3em = 3 * parent computed font size (if parent = 24px, result = 72px)

lengths

  • 10% = 10% of parent's elements width(if parent = 1000px, result = 100px)
  • 2em = 2 * current element (if current font size is 24px, result = 48px)
  • 10rem = 10* root element font size(if root font size = 16px, result = 160px)

Viewport based

  • 90vh = 90 * 1% of viewport height(90% of viewpoert height)
  • 80 vh = 80 * 1% of viewport width(90% of viewpoert width)

CSS inheritance

  • inherit the value of parent element
  • inherit the computed value, not the declared value in the stylesheet
  • Properties related to text are inherited: font-family, font-size, color, etc
  • margin and padding are not inherited.
  • can use inherit keyword to force inheritance
  • can use initial keyword to reset a property to initial value.

CSS Box model

  • content: text, images(width * height)
  • padding: tranparent are around the content, inside the box
  • border: goes around the padding and the content
  • margin: space bewteen boxes
  • fill area: area that gets filled with background color or background image (content + padding + border)

default model

  • total width = right border + right padding + specific width + left padding + left border
  • total height = top border + top padding + specific height + bottom padding + bottom border

box sizing model

  • total width = specific width in styelsheet
  • total height = specific height in styelsheet

block-level boxes, inline-block boxes and inline boxes

Block-level boxes
  • Block, flex, list-item, table
  • 100% of parent's width
  • vertically, one after
  • box-model applies as showed
Inline boxes
  • content is distributed in lines
  • Occupies only content's space
  • No line-breaks
  • No heights and widths
  • Paddings and margins only horizontal(left and right)
Inline-block boxes
  • A mix of block and inline
  • Occupies only content's space
  • No line-breaks
  • Box-model applies as showed

CSS positions

Normal flow
  • Not floated
  • Not absolutely positioned
Floats
  • Element is removed from normal flow
  • text and inline element will wrap around the floated element
  • Container will not adjusted its height to element(use clear fixes to fix the problem)
Absolute positioning
  • Element is removed from the normal flow
  • No impact on surrounding content or elements
  • We use top, bottom, left and right to offset the element from its relatively positioned container

CSS arhitecture

atomic design, or

BEM - Block Element Modifier
(.bock__element--modifier{})

  • Block: standalone component that is meaningful on its own(ex: recipe)
  • Element: part of a block that has no standalone meaning (ex: info, stats-box)
  • Modifier: a different version of a block or an element
7-1 pattern
  • base/
    Product definitions
  • components/
  • layout/ overall layout
  • pages/
  • themes/ different themes
  • abstracts/ doesn't outputs any css
  • vendors/ third party CSS