The Fundamentals

box-shadows

Soft inset: box-shadow: inset 0 2px 4px 0 hsla(0,0%,0%,.2)
Transparent: box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1)
Soft shadow 1: box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.2), 0 4px 12px rgba(0, 0, 0, 0.08);
Soft shadow 2: box-shadow: 0 5px 15px 0 hsla(0,0%,0%,0.15)

position basics

By default, all elements are position:static. This means the element will be positioned according to the order in the HTML structure.
If we set an element's position values to either relative, absolute, sticky, or fixed we can change the top, right, bottom, and left properties.
- For example top: 100px means we position the element 100 pixels from the top of the page

position: absolute

position: absolute has a frame of reference - the body element
- for example, an element with position: absolute; top: 100px; will be positioned 100px from the top of the body element.
If we specify position: relative, absolute, sticky, fixed of a parent element, we can create a new frame of reference.
- Suppose we place position:relative; on a parent element. Now, we give the child element position: absolute; top: 100px;. The child element will be 100px from the top of the parent element because the parent element is the position frame of reference.

block v. inline-block v. inline

inline
- respects left and right margins and paddings, but not top and bottom
- allows elements to sit left and right
- cannot set width and height
- can start on one line and wrap onto the followin line
inline-block
- can set width and height on element
- respects top, bottom margins and paddings
- can start on one line and wraps to a new line
block
- forces a line break after the block element
- enforces whitespace in all directions
- acquires full-width if width is not defined
- respects all margins and paddings
- force a line break after the block element

box-sizing

box-sizing sets how the total the full-width and height of an element is calculated
by default, the width and height of an element are calculated using the following metrics
- actual width: width + padding + border
- actual height: height + padding + border
content-box: if you set the width of the element to 100px - the content is 100px PLUS w/e width you give border and padding
border-box: includes the border and padding in the final calculation of your element's size

Moves

Aligning items within flex

Source: https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/ "Setting the margin property on a flex child will push the child away from that direction. Set margin-left to auto, the child will push right. Set margin-top to auto and the child will push to the bottom." Justify-self or align-self might not get you exactly what you want in a layout where using auto margins might get what you want

Situationals

What is your process for styling elements? a top-down ordered list:

display
position
spacing (margin, padding)
border styles
overflow
width and height
font (family, size, weight)
line-height
color (color and opacity)
background-color
box-shadows
interaction (hover, active, focused)
initial settings (hidden etc.)

When is my layout suitable for an inline element?

How do I make the parent div to be the width and height of its content?

check the parent’s display, is it block or inline-block? Flex or inline-flex?

How do I animate both interactions? Such as hover-in and hover-out?

One way to achieve an animation on both interactions is to define a transition property on both selectors

How do I change the styling on one element when interacting with another?

Try a selector, see https://www.w3schools.com/cssref/css_selectors.asp if you can’t find what you’re looking for

How do I reverse a css transition on uncheck?

Try the element selector with a :not filter - :not(:checked)

What are the default stylings for a unordered list and list items?

no checkbox: list-style: none
no margin: margin: 0
no padding: padding: 0
scroll list: define a height and overflow-x

Rendering styles based on user interaction is slow, how do I optimize this?

Example: using an autocomplete component we have many items. Each item should receive a darker background when a user hovers over an individual item. Currently, the hover is slow, how do I optimize this?
Further details: we are selecting li items via .ul-class-name > li:hover
- The question here, rephrased, the css selector I’ve chosen is slow, what are the performant css selectors? pseudo-classes are the slowest. We’ve combined pseudo-classes with a child selector - this is surely a recipe for slow perf. instead - use a class
To see the reason why certain selectors are slower than others check this link out
- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left

How can I make an element unclickable?

pointer-event: none
Let’s use an example: a button
- There are probably two steps involved - disabling any event handlers and showing a disabled cursor. You can use a pointer-event: none to disable any event handlers (such as an anchor tag) and set the cursor to cursor: not-allowed

How can I style a parent element when its child element is focused?

.parent:focus-within is a new pseudo-class for this purpose - the main function is for accessibility purposes such as tabbing for navigating and use in screen readers Use case: suppose a parent container and an input element with a button. When the input is focused we’d like to change the border of the entire parent. Note: there are no parent selectors in css

What is the use of position:relative parent and position:absolute child? Position yourself in relation to the nearest ancestor who has position:relative we can specify top, right, left, bottom

How do I make a button fill its parent height?

if you position the parent - position:relative, and the button position:absolute with a height of 100% you’ll achieve the desired effect. Why? absolutely positioned elements are positioning themselves to their nearest parent with a position other than static. Static is the default for all elements. With absolute positioning you say where the element goes position: relative on a parent is saying: “position yourself relative to me if you have position:absolute” see https://css-tricks.com/absolute-positioning-inside-relative-positioning/, https://stackoverflow.com/questions/26979386/css-parents-position-is-absolute-and-childs-position-is-relative-and-vice-ve, and for more details

What’s the difference between block-level and inline-elements?

Block: block level elements take up the available width of a window. These elements inherit width from their parent. If we want to specify width and height, then you should use a block-level element Suppose we want to size some text, we can specify a width and height on the parent and rest the inline element inside the block level element Inline: an inline element is an element that sits on a line. The inline element ignores width, height and min/max-width/height. see: https://www.lifewire.com/block-level-vs-inline-elements-3468615

If creating a card-based feed and are using a border as a spacer between each successive card, you can use a css selector to give all cards except the last card a bottom border i.e. .report-list-item(:not)(:last-child) {padding-bottom: 1px solid some_value}

adding padding to each grid cell? try grid-row gap

How do I increase the clickable area of an anchor tag inside a custom styled button?

Yo! that’s not valid html, don’t nest an anchor inside a button Instead, create an anchor tag that looks and behaves like a button The anchor is an inline element, so you must change the display to be a block element in order to set the width and height. Then use text-decoration, and most importantly text-align: center and line-height: the same height as the height you set the anchor to.

How do I apply a style to an element when another element is interacted with?

Ex: .toggle:checked ~ .switch {/specify styles here/} use the “~” selector

Why relative parent absolute child?

position:relative parent and position:absolute child translates to the following - relative positioning gives you the complete control to absolutely position direct children elements inside of it. put another way: the absolutely positioned elements are positioning themselves in relation to the parent element.

Styling an unordered list and list elements

display: inline-block removes list-style type. Alternatively, you can use float or flex box to achieve some degree of horizontal alignment

When do I use rem, em, and px?

px: change according to browser. A problem for proportionate resizing via zoom in/out with and with accessibility layouts. Respects users desired ratio em: rem: root element sizing - can be converted to px, which the browser does anyways. Use this

What is line-height?

defines the amount of space above and below inline elements; element that are set to display: inline and display:inline-block. Think of it as line-spacing (double spacing or 1.5 spacing)

My elements (or could be text) are wrapping at end of the screen - how can we achieve horizontal scrolling?

People would think that inline-block would be enough, that’s not the case. Inline block only prevents the element from taking up 100% of the width as default. Instead, the element sits inline, and we can set width and height - those properties will be respected First, we need to use overflow-x: scroll and whitespace: nowrap on the parent element. Whitespace is used to control how text wraps in a container. We can also achieve this with flexbox Source: https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6

Transitions don’t apply to the display property

we cannot apply a transition to the display property, however we can use a combination of visibility:hidden and opacity: 0 and animate the opacity and change the visibility

How do I center a span within an inline-block element ?

Situation: center a span within a button (toggle) - semantically, a span is considered phrasing content and okay to be placed within a button, not an anchor though. see: https://stackoverflow.com/questions/18485378/vertically-centering-text-within-an-inline-block

Why is the click event firing on a button when pressing spacebar and enter while focused?

a button accepts the enter and space keys for accessibility, so there’s no need to explicitly listen for those events on an ‘keydown’ event handler, they’re already handled on the click event Source: https://www.quirksmode.org/dom/events/click.html

How do I maintain aspect ratio of an image? Use case: Carousel

Use object-fit: contain with height and width specified. The image will maintain its aspect ratio within the h/w specified
with cover you can lose picture information

sources:

display property

krfong916/all-about-css.md