Concepts
CSS is a language to define how a website look in a browser. The browser applies style
declarations to selected elements.
Rule is a set of properties associated with a selector.
Style declaration contains the properties and their values.
Specificity means how the browser decides which rule applies if multiple rules have
different selectors, but could still apply to the same element.
Inline styles > IDs > Classes/Pseudo classes/Attributes > Elements/Pseudo elements
Cascading refers to the mechanism that controls how selectors are prioritized. When two
rules with same Specificity apply that the one that comes last in the CSS is the one that will
be used.
Importance > Specificity > Source Order
SASS: Is a CSS Preprocessor which provide additional functionality, including nesting
selectors, variables, inheritance, ans so on. So it is a CSS extension language, you compile it
and generates regular CSS code.
Storing reusable values with variables
Nesting selectors so they are no super long
Partial files to modularize the CSS styles and help keep things easier to maintain (@use)
Reuse groups of CSS declarations with mixins (@mixin - @include)
Functions that are similar to mixins but can prodice a value that can be next used (darken()
- lighten())
Share a set of CSS properties from one selector to another with Inheritance (%... -
@extend)
Control directives for writing complex code using conditionals
box-sizing property:
content-box: by default in the CSS box model, the width and height assigned to an
element is applied only to the element's content box. If the element has any border or
padding, this is then added to the width and height.
border-box tells the browser to account for any border and padding in the values specified
for an element's width and height.
CSS Box model
position: specifies the type of positioning method used for an element:
static (default): elements are rendered in the order they appear in the document flow
absolute: element is positioned relative to its first positioned (not static) ancestor
element
fixed: element is positioned relative to the browser window
relative: element is positioned relative to its normal position, so "left:20px" adds 20
pixels to the element's LEFT position
sticky: element is positioned based on the user's scroll position
display: specifies the display behavior (the type of rendering box) of an element.
block: displays an element as a block element (p or div). It starts on a new line, and
takes up the whole width
inline: displays an element as an inline element (span). Any height and width
properties will have no effect
flex: displays the element as a block-level flex container
inline-flex: displays the element as an inline-level flex container
none: element is completely removed
float: property specifies how an element should float
none (default): element does not float
left: element floats to the left of its container
right: element floats the right of its container
Margin: adds spacing between elements in a container.
Padding: adds spacing between the container and its content.
visibility: specifies whether or not an element is visible.
visible (default) lement is visible
hidden: element is hidden (but still takes up space)
Flexbox
Flexbox Layout provides a more efficient way to lay out, align and distribute space among items
in a container,
The idea is to give the container the ability to expand or shrink its items’ width/height to best fill
the available space (to adapt to all kind of screen sizes).
Flex layout is based on “flex-flow directions”. Items are layed out following either the main axis
(from main-start to main-end) or the cross axis (from cross-start to cross-end).
main axis: the primary axis along which flex items are laid out. It is not necessarily
horizontal; it depends on the flex-direction property.
cross axis: the axis perpendicular to the main axis. Its direction depends on the main axis
direction.
Properties for the container or parent element (flex container):
display: specifies the display behavior (the type of rendering box) of an element.
block: displays an element as a block element (p or div). It starts on a new line, and
takes up the whole width
inline: displays an element as an inline element (span). Any height and width
properties will have no effect
flex: displays the element as a block-level flex container
inline-flex: displays the element as an inline-level flex container
flex-direction: establishes the main (primary) axis of a component defining the direction
flex items (the children) are organized in the flex container.
row (default): left to right in ltr; right to left in rtl
row-reverse: right to left in ltr; left to right in rtl
column: same as row but top to bottom
column-reverse: same as row-reversebut bottom to top
flex-wrap: defines whether flex items are forced onto one line or can wrap onto multiple
lines. If wrapping is allowed, it sets the direction that lines are stacked.
nowrap (default): all flex items will be on one line
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
flex-flow: shorthand for flex-direction and flex-wrap properties.
row nowrap (default)
justify-content: defines the alignment (distribution) along the component’s main direction
(primary axis). It helps distribute extra free space left over when either all the flex items on a
line are inflexible, or are flexible but have reached their maximum size.
flex-start (default): items are packed toward the start line
flex-end: items are packed toward to end line
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line,
last item on the end line
space-around: items are evenly distributed in the line with equal space around them.
Visually the spaces aren't equal, since all the items have equal space on both sides.
space-evenly: items are distributed so that the spacing between any two items (and
the space to the edges) is equal.
align-items: defines how flex items (children) are laid out along the cross (secondary) axis
on the current line: it is the justify-content version for the cross-axis (perpendicular to the
main-axis). if the primary axis is row, then the secondary is column, and vice versa.
flex-start: cross-start margin edge of the items is placed on the cross-start line
flex-end: cross-end margin edge of the items is placed on the cross-end line
center: items are centered in the cross-axis
baseline: items are aligned such as their baselines align
stretch (default): stretch to fill the container (still respect min-width/max-width)
align-content: aligns a flex container's lines within when there is extra space in the cross-
axis, similar to how justify-content aligns individual items within the main-axis. Has no effect
when there is only one line of flex items.
flex-start: lines packed to the start of the container
flex-end: lines packed to the end of the container
center: lines packed to the center of the container
space-between: lines evenly distributed; the first line is at the start of the container
while the last one is at the end
space-around: lines evenly distributed with equal space around each line
stretch (default): lines stretch to take up the remaining space
Properties for the children elements (flex items)
order: controls the order in which flex items are laid out in the flex container.
0 (default): the source order
integer: custom order
flex-grow: defines the ability for a flex item to grow if necessary (max size). how much of
the remaining space in the flex container should be assigned to the item.
0 (default): does not expand at all. Instead, element to be dependent on the size of
the content within it.
positive-integer: custom grow proportion
flex-shrink: defines the ability for a flex item to shrink if necessary (min size)
0 does not shrink.
1 (default): element take up the same amount of space at all times.
positive-integer: custom shrink proportion
flex-basis: defines the default size of an element before the remaining space is distributed
(ideal size)
a-length: (e.g. 20%, 5rem, etc.)
auto (default): use the height or width.
content: sized based on the item's content
flex: shorthand for flex-grow, flex-shrink and flex-basis combined.
0 1 auto (default): does not grow, does not shrink and size looking at the flex item’s
width or height property
align-self: allows the default alignment (or the one specified by align-items of the parent) to
be overridden for individual flex items. In Grid, it aligns the item inside the grid area. In
Flexbox, it aligns the item on the cross axis.
flex-start: cross-start margin edge of the item is placed on the cross-start line
flex-end: cross-end margin edge of the item is placed on the cross-end line
center: item is centered in the cross-axis
baseline: item is aligned such as its baselines align
stretch (default): stretch to fill the container
Grids
Flexible grids with the fr unit
In addition to creating grids using lengths and percentages, we can use the fr unit to flexibly
size grid rows and columns. This unit represents one fraction of the available space in the grid
container.
Gaps between tracks
To create gaps between tracks we use the properties column-gap for gaps between columns,
row-gap for gaps between rows, and gap as a shorthand for both.
Cascade: process of combining different stylesheets (Author, User, Browser) and resolving
conflicts between different CSS rules and declarations when more than one rule applies.
Importance > Specificity > Source Order
Importance: CSS declarations marked with important keyword have the highest priority
Specificity: Inline styles > IDs > Classes/Pseudo classes/Attributes > Elements/Pseudo
elements
Order: Last declaration will override all other declarations
The box-sizing property:
content-box: by default in the CSS box model, the width and height assigned to an element
is applied only to the element's content box. If the element has any border or padding, this
is then added to the width and height.
border-box tells the browser to account for any border and padding in the values specified
for an element's width and height.
Centering
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
So each CSS property has an initial value which is used if nothing else is declared
and if there is no inheritance.
Browsers specify default font size for each page and that's usually 16 pixels,
Percentages and relative values are always converted to pixels in order for the CSS engine to
be able to render the page on the screen.
About percentages, they are measured relative to their parent's font-size if used to specify font-
sizes
and they are measured relative to their parent's width if they're used to specify length.
Now ems are measured relative to their parent's font size if used to specify font-sizes and
they're measured relative to the current font-size if they're used to specify length.
Next, rems are always measured relative to the document's root font-size that I mentioned
before.
And finally, vh and vw are simply percentage measurements of the view port's height and width
respectively.
So inheritance is a way of propagating property values
from parent elements to their children.
that each and every CSS property must have a value.
Even if neither we, the developer nor the browser do specify it.
is if there is a cascaded value.
And if so, then of course, that's the specified value that's used.
Now if there's no cascaded value, then the next question
is if the property can be inherited.
And that depends on each property.
There are some properties that are inherited
and others are not.
So if a property is inherited (eg. line-height), then the value
of that property becomes the computed value
of it's parent element.
Now if it's a property that's not inherited,
like for example, padding, then the specified Value
will become the initial value
As a rule of thumb, properties related to text are inherited
so properties like font family, font size, color, et cetera.
Other properties like margins or paddings
are, of course, not inherited
is that we can use the inherit keyword
to force the inheritance of a certain property.
Box Model
Every element on a webpage can be seen as a rectangle box And each box can have a width, a
height, a padding, margins and a border.
The content of a box is where all the text, images or other content that we specify go. We can
easily define its height and width using the corresponding CSS properties.
The padding is a transparent area around the content, but still inside of the box.
The border for a box, and that border goes around the padding and the content.
The margin is white space that's actually outside the box itself. Margin is space between boxes.
The fill area is the area that gets filled with the background image or the background color of
the box, which also includes the padding and the border, but not the margin.
The width of a box is defined by the right border plus the right padding, plus the specified width,
plus the left padding, plus the left border.
The height of a box is defined by the top border plus the top padding, plus the specified height,
plus the bottom padding, plus the bottom border.
If we set box sizing to border box, the height and the width will be defined for the entire box
including the padding and the border and not just for the content area. So the paddings
and borders that we specify, will of course reduce the inner width of the content area.
The actual total width of a box is equal to the specified width. And the same goes for the height.
Box types determine how boxes are laid out on a page.
Block-level boxes (display property set to block/list-item/table): elements formatted visually as
blocks, take 100% of parent's width, create line-breaks before and after so they are vertically
one after another.
Inline boxes (display property set to inline): their content is distributed in lines, meaning that an
inline box only occupies
the space that its content actually needs so they don't cause line breaks. The height and width
property do not apply, and only horizontal paddings and margins can be specified on inline
elements.
Inline-block boxes (display property set to inline-block): inline boxes which work as a block-level
boxes. They use up only their content space and cause no line breaks. Te box model applies to
them just like in the regular
block-level boxes.
Positioning
The normal flow (position: relative) means that the elements are simply laid out on the page in a
natural order in the code.
Floating (float: left/right) causes an element to be completely taken
out of the normal flow and shifted to the left or right as far as possible, until it touches the edge
of its containing box, or another floated element. Text and inline elements will wrap
around the floated element. Its container will not adjust its height to the element.
Absolute positioning (position: absolute/fixed) means that the element is taken out of the normal
flow but it has no impact on surrounding content or elements at all (it can even overlap them).
The CSS properties top, bottom, left and right to offset it to its
relatively-positioned container.
Stacking contexts determine in which order elements are rendered on the page.
A new stacking context (layer) can be created with the Z-index property
Layers on the bottom of the stack appear at first, and elements higher up the stack appear on
top, overlapping the elements below them.
CSS Architecture
[Link]
[Link]
BEM stands for Block Element Modifier.
A block is a standalone component that is meaningful on its own.
An element is a part of a block and has no meaning on its own.
A modifier is a flag that we can put on a block or an element in order to make a different version
of the regular blocks or elements.
In the 7-1 Pattern we have seven different folders where we put partial Sass files, and then one
main Sass file in which we import all of our partial files into one final compiled CSS stylesheet.
The base folder is where we put the basic product definitions.
The components folder is where we have one file for each component.
The layout folder is where we define the overall layout of the project.
The pages folder is where we have styles for specific pages of the project.
The themes folder if you want to implement different visual themes.
The abstracts folder where we put code that doesn't output any CSS, such as variables or mix-
ins.
The vendors folder is where all third party CSS goes.
Sass