Skip to content

Files

Latest commit

pegaltierpegaltier
Added
Jul 12, 2024
3521612 · Jul 12, 2024

History

History
303 lines (238 loc) · 13.9 KB

utils-css.md

File metadata and controls

303 lines (238 loc) · 13.9 KB

CSS

TOOLS

BEST PRACTIVES

WEBSITES

OSS: TOOLS

LIB

UTIL

TAILWIND

DEVTOOLS

BAD

FUN

BOOTSTRAP

EXAMPLE

STACKING CONTEXT

POSITION

  • https://youtu.be/7CACVgIZQ1k CSS Positioning Crash Course

  • position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

  • by default html elements are position: static; in this case these adjusting properties below will not do anything.

  • after choosing a position then html elements are then positioned using the adjusting properties: top, bottom, left and right. But those adjusting properties will work differently depending on the position value (see below) relative and absolute can also be adjusted using inset-block and inset-inline

OPTIONS

  • position: static; # element is not affected by the adjusting properties. (they are shown in order they are defined, top to bottom, z-index is automaticly defined as 0)

  • position: relative; # element is positioned using adjusting properties relative to its normal position in the view/dom.

  • position: fixed; # element is positioned using adjusting properties relative to the viewport, scroll has no effect.

  • position: absolute; # element is positioned using adjusting properties relative to the nearest positioned ancestor. if multiple elements are absolute at the same position then they are stacked in the order they are written in the html, z-index can be modified to customize the display of those absolute elements, if z-index is defined to less than 0 then statics elements will be shown above

  • position: sticky; # element is positioned relative to its normal position in the view/dom (like relative) and automatically toggle to fixed when a given offset position is met in the viewport

  • learn more:

  • https://www.w3schools.com/css/css_positioning.asp

  • https://stackblitz.com/edit/css-position?file=index.html

SELECTORS

PARENT

CSS parent selector: li:has(> a.active) { /* styles to apply to the li tag */ }

STACKING CONTEXT

DISPLAY

COMMON

  • inline: Displays an element as an inline element (like ). Any height and width properties will have no effect.
  • block: Displays an element as a block element (like

    ). It starts on a new line, and takes up the whole width

  • flex: Displays an element as a block-level flex container
  • grid: Displays an element as a block-level grid container
  • table: Let the element behave like a element

    OCCASIONAL

    inline-block: Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values inline-flex: Displays an element as an inline-level flex container inline-grid: Displays an element as an inline-level grid container inline-table: The element is displayed as an inline-level table

    TIPS

    • The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time. It's recommended to use grid for layout tags and then flex for component level. Because grid can allow simple and powerful adjustement based on the width. Flex will adjust automatically depending on the size so it's perfect for avoiding adjustement issue on small components.
    • it's recommended to use div (section, article, header, footer) for layout, p for text content and then span for component level. Because div and p are block (full width and equivalant to line-break before and after it). Span is inline so your things will stays on the same line. Even better you can avoid span with others specific in-line such as: b,i,em...
    • if you use sass or less it's recommended to use nested css class, it is good practive, however you must avoid to nest to deeply, for instance you should limit this nested to 3 or 4 levels maximum. If you have more you can group it and extract in another nested block. Or move it to another isolated component.
    • to adapt the text based on the container use display flex and overflow hidden and min width 0 on the container or add a wrapper tag to do that then add ellipsis on the span with the text to hide and nowrap on all the spans so span with ellipsiis will be truncated and span without will display the entire text.
    • https://leonardofaria.net/2020/07/18/using-flexbox-and-text-ellipsis-together
    • https://css-tricks.com/flexbox-truncated-text/

    COMPARAISON

    1. Flexbox is One Dimensional, Grid is Two Dimensional
    2. Grid is Container-Based, Flexbox is Content-Based

    GRID

    CSS Grid focuses on precise content placement. Each item is a grid cell, lined up along both a horizontal and a vertical axis. If you want to accurately control the position of items within a layout, CSS Grid is the way to go.

    “It provides a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Authors can then precisely position and size the building block elements of their application into the grid areas defined by the intersections of these columns and rows.”

    FLEXBOX

    Flexbox focuses on content flow rather than content placement. Widths (or heights) of flex items are determined by the content of the item. Flex items grow and shrink according to their inner content and the available space. This is how W3C’s flexbox docs explain the goals of the layout module:

    “Flexbox gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need.”

    SPECIFICITY

    • Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied

    SCORE SELECTOR 0.0.0.0.0 universal (*) 0.0.0.0.1 element or pseudo-element (h1) 0.0.0.1.0 class, pseudo-class, pseudo-element, attribute (.example/:hover/:after/[type="radio"]) 0.0.1.0.0 id (#example) 0.1.0.0.0 Inline style (style="...") 1.0.0.0.0 overrides (!important)

    HELPER

    • margin,padding is like a clock
    • margin: 10px 5px 30px 40px
    • top right bottom left

    RESPONSIVE

    ANIMATION