DEV Community: mikkel250

CSS notes and references

mikkel250 — Mon, 04 May 2020 01:21:56 +0000

CSS

These are my notes from the fantastic (free!) course on CSS in the Frontend Masters' bootcamp. Definitely check it out, I wish I'd known about it when I was starting out.

Basics

All html elements are boxes. A great way to see what you are doing is to give elements borders. Then you can see exactly how large they are and where they lay on the page.

Parents and children:
The property of a parent will affect the children (for the most part, depending on the selector, e.g. most font properties), unless they are overridden:

<div><h1>Hi</h1></div>

with the style of:

div {
  color: blue;
}

will make the text color of the h1 blue.

Specificity
The more specific the selector, the higher precedence it will have.

You can chain classes together without a space to increase specificity:

.main-brand.title-5 {
  color: red;
}

.main-brand {
  color: green;
}

In the above, the first selector (with two classes) will be applied, even though it is higher in the cascade (literally higher in the file), because it has two classes, and is therefore more specific.

The ID selector takes the highest precedence and will override any other selector.
The !important flag will override anything else, including ID's.
For these reasons, it's generally better not to use either ID or !important - use classes (by adding a second class or combine classes and tags) to get more specific so they can then be overridden later if necessary without too much effort (or using ID's or !important). It makes styling much easier if everything uses one class, and occasionally two classes (if necessary).

Descendant Selectors
Another trick that can be used if there aren't that many elements on a page, or if they are fairly deeply nested, is combining type selectors (but it's generally easier to just add a class). To do this, chain the selectors together with spaces:
div ul li { color: red; } will only select an li element that is inside a ul element, that is inside a div.
However, using descendant selectors is not very specific (another reason to use classes), but can be made more so with the > symbol:

/* selects ANY paragraph that inside ANY div, no matter how deeply nested */
div p {
  color: red;
}

div > p {
  /* will only select a p tag directly inside a div (first child) */
}

The reason to avoid using these is if someone ever changes the structure of the page (or the tags), your CSS will break. A class can remain on any element, regardless of type, at any position on the page.

Specificity is calculated
Note that the specificity is based on number values, which can be researched for more granular control if necessary, but the broad strokes are that CSS specificity can be thought of in the following order (lowest to highest specificity):

Type selctors (tags: h1) and Pseudo elements ::before
Classes .main, attributes [type="radio"], and Pseudo Classes :hover
ID selectors #hero-image
Inline styles always override any external style sheets.
!important overrides everything else.

To learn more, Emma Bostonian wrote a great article on it at https://dev.to/emmabostian/css-specificity-1kca
This includes the math for how to calculate specificity which can be helful if you're having trouble.
Another great resource is the 'specifishity' chart at http://www.standardista.com/css3/css-specificity/

Pseudo Classes
These come after the selector, with no space, and a colon at the beginning. They are most commonly used for interactivity (things like links):

a:hover {
  color: red;
}

Other handy Pseudo Classes
:focus
:visited
:active
:checked
:first-child
:last-child
:nth-child(3) put in the child number in the parentheses
...and more that can be googled.

Pseudo elements
Not as frequently used, but handy to know.
The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

div::before {
  content: "before";
}
div::after {
  content: "after";
}

<div>
  before
  <!-- Rest of stuff inside the div -->
  after
</div>

Layout

CSS is used not just to style elements but to lay out the page how it should look.

Block level elements always start on a new line and automatically span the width of their containers (think: building block).

Inline elements (e.g. the a, em, and strong tags) only take up the amount of space required to hold their content: the <a>hello</a> tag will only take up exactly the amount of space to enclose the word 'hello'.
Another noteworthy feature of inline elements is that padding and margins can only be added to the sides, not the top and bottom.
This property can be manually changed by using display: block;

Using the property display: inline-block; does not add a line-break after the element, so the element can sit next to other elements, and allows to set a width and height on the element. In practice, this method is commonly used to get items to appear in a row as opposed to a column, as in a navbar with a ul.

To make sure the document is always correctly sized to the window with no overlap or scrollbars is:

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

Display properties
All tags have a default display property, that then can be overridden using CSS.
block spans the entire width of the container.
inline is only as large as its text.
inline-block is a hybrid of the previous two. The browser will place the tag inline, but will still allow you to control the height, width, padding, and margins (whereas an inline element does not allow any modifications to the height propery).
flex and inline-flex are similar to block in that they affect the tags around them like block (covered in depth later).
grid and inline-grid are more advanced display modes like flex (covered later), but only supported by relatively modern browsers.
table will make something act like a table (even if it's not a table). Generally, it's better to use <table> in the HTML for this.

Width and Height

Width
Using percents is an easy way to divide up the width of a page or section (because the math is easy to do in your head), and the percentage will be relative to the size of the container.

Height
Elements/boxes have a height property as well, but a generally good practice is to not set the height property manually, but to set the height and use auto for the width, which will allow it to resize and be responsive. Another reason is that setting the height manually won't allow for the container to expand if, say a bunch of content is added after originally styling it.
One exception is when a div contains only an image, since there is no other content to give the element height, it must contain a height in order for the image to appear (i.e. if you have a 300px image, set the container to 300px).

Margin and Padding

Padding is around the content, up to the border.
Margin is the spacing between the border and the next element.
By default, the width property does not include border and padding (just the content), so it's very handy to declare at the top of every CSS file:

* {
  box-sizing: border-box;
}

This will make it so that all width measurements include both the padding and the border.

To quickly center all content within the parent, use margin: 0 auto;. The shorthand here is: margin: top/bottom, left/right;, but it can also be set with 4 values - Top Right Bottom Left (TRBL, mnemonic 'TRouBLe'), and is the equivalent of margin: 0 auto 0 auto;

Float and Clear

Floats will move an element to the side of the page, and the next element will 'stick' to the side that has the open space.
Floats feature rows and cells. Rows clear the floats on the cells. The source order determines the display, and is fairly limited as to options. All cells are equal heights.
One thing to note is that if there other elements below the next one, they will never be higher than the height of the preceding element, no matter how large the screen size (e.g. if box 1 is floated left, and two more boxes, box 3 will never be higher on the page than box 2).
float: left;, and float: right; are how they are declared.
If you float, then you need to clear!
There is an 'incantation' (aka a formula) that is commonly used to make sure that the parent element that contains any floats will not have elements that end up outside the container (clearing the floats). It is:

parentSelector::after {
  content: "";
  display: table;
  clear: both;
}

If you need to rearrange the columns for some reason, this can be accomplished with another incantation:

[class*="col-"] {

Flexbox

Flexbox only works with parents and children, known as the flex container and items respectively. It does not work with descendants or ancestors beyond parents/children. A common use case is using a ul to make a navbar.
Most changes to flex are made on the parent container, not the items themselves.
The main axis is the direction of the flexbox: for columns, it's up to down, and for rows it's left to right. The cross axis is the dimension perpendicular to the main axis.
For some older browsers, prefixes are required, so check canIuse.com to see if it's necessary.

All properties can be found here: https://static.frontendmasters.com/resources/2017-10-03-responsive-web-design-flexbox-css-grid/Flexbox-and-CSS-Grid-Properties-Cheat-Sheet.pdf

Some useful properties are:
On the container
display: flex; set on the container to make the items go into a row.
flex-flow: column; to change this to a stacked list.
flex-flow: row wrap; manually sets the items in a row, and wrap them to new lines.
flex-flow: nowrap; will prevent the items from ever wrapping to a new line.
flex-direction: row-reverse; will reverse the order of the elements.

justify-content has a number of properties that can be set, and controls the way the items are laid out, some of which are:

justify-content: flex-start; sets the items to hug the left side of the container.
justify-content: flex-end; sets the items to hug the right side of the container.
justify-content: center; centers the items in the container.
justify-content: space-around; sets evenly sized spaces on the left and right of each of the items, including the start and ending items.
justify-content: space-between; sets an even amount of space only between items. justify-content: space-evenly; will evenly space everything.

align-items: will align the items on the cross axis to the flex-direction. It has the flex-end, flex-start properties.
There is also flex-center, which centers them in the parent, and stretch which will modify the height of anything that doesn't explicitly have a height set to fit the parent. It also has a neat feature where all elements that doesn't explicitly have a height set will stretch to match the height of the tallest element that does have a height set.

Centering with flexbox
To make sure everything stays centered (text inside the items, and the items themselves), set

.centered-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

and no matter what the width or height of the parent, the items and content will stay centered.

Manipulating the items
Shorthand
The shorthand property for this is to use flex: followed by the values for Grow Shrink Basis, or they can be written out individually.
flex-grow: value; where the value is how much the unit will grow relative to the other units as the screen size changes. The default is that they all resize equally.

flex-shrink: value;, is the same as the above, but for when the items are shrinking.
flex-basis: value; is the width of the items, where the values are some unit of measure (commonly percentages or viewport units). Never use width on flex items, use flex-basis instead.

Order
Using order you can individually override align-items using align-self, definitely worth looking at more:

.box-1 {
  align-self: flex-end;
  order: 5; /* the higher the number the earlier direction it will appear */
}

On the items:
flex-basis: 10%; will override the default box sizing and set it to roughly 10% of the total size of the container instead.

Patterns for writing CSS

Write all of the default styles for multiple elements first, then add the specific styles for each element in their own selectors futher down in the file. E.g. if you have a number of button types on a page/site, and you want them all to have similar properties (size, font, border, etc.), then write those general rules for all buttons, then add the specific (or override) styles later in the CSS file (ideally with comments):

.ex-btn {
  background-color: #eee;
  border: 2px solid #aaa;
  padding: 4px 15px;
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;
}

.ex-btn-warn {
  /* inherits from .ex-btn */
  /* above comment shows where to look for default styles */
  color: white;
  background-color: crimson;
  border-color: darkred;
}

.ex-btn-success {
  /* inherits from .ex-btn */
  color: white;
  background-color: limegreen;
  border-color: green;
}

Another neat trick to quickly change styles is to right click on the element and choose 'inspect element'. In the devtools, you can turn styles on or off, and in the 'This Element' box, even add styles. Once it looks the way you want, you can just copy and paste the code from the 'This Element' box into the editor, which allows for quick iteration.
In the 'Computed' tab, it will show the exact values of the content, paddding, border, and margins. The values can be clicked on and modified directly as well.
There's even a color dropper tool that can be used to find out a color on a page (in Firefox at least, in Chrome it shows up in the popup when using 'inspect element')

Interesting properties:
There is a a text-decoration: overline property (a line above like underline).

Resources

https://htmlcheatsheet.com/css/
https://frontendmasters.github.io/bootcamp/css
https://frontendmasters.com/bootcamp/introduction-css/

list of all css properties:
https://meiert.com/en/indices/css-properties/
https://css-tricks.com/nerds-guide-color-web/

Tools:
BrowserStack at https://www.browserstack.com/ can test your CSS for compatibility across browsers.
ColorZilla extension lets you pick colors you see on screen and will give you the hex, rgb, etc. color values.

Functions in Sass

mikkel250 — Mon, 04 May 2020 01:04:00 +0000

The final piece of the puzzle is functions.
Defining a function in Sass is similar to the syntax for a mixin:

// a variable that holds a value for use later
$w: 2px;

// defining the function
@function double($x) {
  @return 2 * $x;
}

.thin-border {
  border-width: $w;  // results in a 2px border-width
}
.thick-border {
  border-width: double($w); // results in a 4px border-width
}

Using function and combining them with other features of Sass, such as conditionals, allows for great flexibility when coding your CSS.

Hope you enjoyed this series! If you want more details and experience practicing the syntax with exercises, check out the course on which these notes are based here at Frontend Masters, and big thanks to them and Mike North such great material!

Reusing style with mixins

mikkel250 — Mon, 04 May 2020 00:59:52 +0000

There are a few different ways to extend styles with Sass, some of which have been covered in this series already. We'll cover some new concepts by first going over each and how they behave in order to understand the new syntax and why it might be used.

include

The first way to extend a style is using a mixin and using @include to bring it into other styles:

// using @include
@mixin danger {
  background: red;
  color: white;
}

.btn-danger {
  @include danger(); // note parentheses even if no arguments are passed in
  padding: 2px;
}

.alert-danger {
  @include danger();
  width: 100%;
}

// compiles to CSS
.btn-danger {
  background: red;
  color: white;
  padding: 2px;
}

.alert-danger {
  background: red;
  color: white;
  width: 100%;
}

Note that the things that are common to both (defined in the mixin) are included in both CSS rules, which is not particularly DRY and could end up bloating your CSS file.

extend

The second way to is by using @extend. You can define the common elements in a 'parent' style rule and add specific tweaks as needed:

// using @extend
.danger {
  background: red;
  color: white;
}

.btn-danger {
  @extend .danger;
  padding: 2px;
}

.alert-danger {
  @extend .danger;
  width: 100%;
}

// compiles to CSS
.danger,
.btn-danger,
.alert-danger {
  background: red;
  color: white;
}
.btn-danger {
  padding: 2px;
}

.alert-danger {
  width: 100%;
}

This method works great, and results in much DRYer code and smaller CSS files. The problem with this method is if @extend is used in different places, and someone changes the danger style, it will affect the entire app wherever @extend was used, and this may not be immediately clear that would be the case, especially if the styles are spread out over different files and partials throughout the app.

Introducing: Placeholder

In order to deal with this potential problem with @extend, Sass has a way to let everyone working on the app know that a style is meant to be extended: placeholders.

// with placeholders
%danger {
  background: red;
  color: white;
}

.btn-danger {
  @extend %danger;
  padding: 2px;
}

.alert-danger {
  @extend %danger;
  width: 100%;
}

The compiled CSS looks the same as the previous example using @extend on a regular class, but it lets everyone know that danger is meant to be extended and to check before making changes. Using placeholders and extend are a great way to pass in style rules that don't require any variables.

There are some caveats to note when using @extend.
First, if there are multiple layers of nesting in your Sass (especially if each layer has multiple selectors in it), using @extend can cause the size of your CSS to blow up very quickly because nearly every permutation of each selector will be created in the compiled CSS, so keep an eye on it and consider breaking out classes into separate rules if this happens. The takeaway: be careful with nesting, and don't nest too deep, even if it means making your Sass file a bit longer, and a bit more work for you at the outset. The final product will have better performance and happier users.
Second, always use placeholders with @extend, even if it means having to create a separate class and bringing in @extend there, because this will avoid unintended changes later. I.e. if you wanted to create a parent .danger class, do it like so:

// with placeholders
%danger {
  background: red;
  color: white;
}

.danger {
  @extend %danger;
}

BEM CSS Architecture and Sass

mikkel250 — Mon, 04 May 2020 00:53:22 +0000

BEM

BEM is a way of architecting your html in such a way that you can use a conventional set of classes in your CSS to style your pages using a system/convention. The way I think about it is that you group sections of the page together in a way that makes sense, and apply flags or toggles to the html in order to apply styles to it.

BEM stands for Block Element Modifier:

Block: a standalone entity, meaningful on its own (e.g. header, container, menu, checkbox, input, button).
Element: a part of a block that has no standalone meaning and is semantically tied to its block (e.g. menu-item, list-item, header-title).
Modifier: a flag on a block or element, used to change appearance and/or behavior (e.g. disabled, highlighted, checked, size-big, color-yellow).

There is a convention for BEM elements: double underscores after the block name indicates you're defining an element inside a block, and double dashes mean that you're defining a modifier. In the label element below is an example of an element inside a block (textfield__label).

<div class "textfield">
  <label for="first-name" class="textfield__label">
    First Name
  </label>
  <input name="first-name" type="text" class="textfield__input" />

The use of this convention prevents collision with other elements because it is unlikely that another element will have the same class. Sass makes building these easier because of the ability to use the parent selector.

.textfield {
  &__input {}
  &__label {}
  &__validation-error {}
}

Continuing with the html example from above, the html would then look something like this:

<div class "textfield textfield--state--validated">
  <label for="first-name" class="textfield__label">
    First Name
  </label>
  <input name="first-name" type="text" class="textfield__input" />
  <span class="texfield__validation-error">
    Must be two characters or longer
  </span>
</div>

Note that because the parent selector can only be used once, there is a specific way to write the rules for the block element itself, which is why the textfield appears after the parent selector in the modifiers below:

.textfield {
  &.textfield--state-error {}
  &.textfield--state-validated {}
}

Sass Data Structures

mikkel250 — Mon, 04 May 2020 00:46:08 +0000

Lists

A list is an ordered collection (aka an array) separated by either spaces or commas, but it's best to pick one stick to it. Mixing spaces and commas will end up creating lists within lists, which may not have been intentional. The syntax looks very similar to a property list, and is intended to mirror CSS, which, for example, will have a mix of space and comma separated values for multiple shadows, which can be read about here.
Lists are NOT zero indexed, they are one indexed.

The @each loop is a handy way to iterate through lists because it is a bit more flexible than a for loop: it will run once for each item in the list, regardless of size. The syntax for lists below creates a new block comment for each item in the list inside the foo class:

// lists
$myList: 0 0 2px #000;
// results in [0, 0, 2px, #000]

// if a comma was added, and more values with spaces:
$myList: 0 0 2px #000, 1 2 3;
// results in [0, 0, 2px, #000, [1, 2, 3]]

.foo {
  @each $i in $myList {
    /* #{$i} */
  }
}

nth

nth is another familiar term from programming, which is a method on a list that has two parameters: the list of values (array), and the item to pluck out (i.e. the nth index). Note that like lists, nth is NOT zero indexed, it is one indexed. Note that in some cases, the parentheses are optional, but for clarity and to avoid unexpected results, it may be best to default to using them:

$gradients:
(to left top, blue, red),
(to left top, blue, yellow);

.foo {
  // sets the linear gradient to the second item 
  background: linear-gradient(nth($gradients, 2));
}

// sets the background to the second item in the gradients list

Maps

Maps are key: value pairs, like objects in JS or hashmaps in many other languages. They resemble CSS property value combinations, which, after all, are key: value pairs themselves.

$myMap: (
  dark: #009; light: #66f;,
);

@mixin theme-button($t) {
  /* Theme: #{$t} */
  color: map-get($myMap, $t);
}

.btn-dark {
  @include theme-button("dark");
}

// CSS
.btn-dark {
  /* Theme: dark */
  color: #009;
}

Sass Control Flow

mikkel250 — Mon, 04 May 2020 00:42:30 +0000

If Else

Sass gives more control flow than CSS, beginning with the form of @if and @else. Based on the results of the control flow, the Sass will compile to different CSS based on the conditions.

@mixin foo($size) {
  font-size: $size;
  @if $size > 20 {
    line-height: $size;
  } @else {
    // @else shown as syntax demo, no need for it here
  }
}

.small {
  @include foo(14px);
}
.large {
  @include foo(24px);
}

// compiles to CSS
.small {
  font-size: 14px;
}
.large {
  font-size: 24px;
  line-height: 24px;
}

If you work with any other programming language, this should look familiar, just note that there are no parentheses around the condition following the @if keyword.

For loops

Sass also provides a for loop that can be used for control flow and automate repetitive tasks. Some things to note are that for loops can be either inclusive or exclusive, depending on how it is written. Using through is inclusive. Using to is exclusive.

@for $i from 1 through 5 {
 // inclusive
}

@for $i from 1 to 5 {
 // exclusive
}

The syntax of how to create style rules for different font sizes for the various h tags based on some simple math is shown below. On the second line of the example below, the #{$i} is interpolation, which tacks on the value of i after the h.

@for $i from 1 through 5 {
  h#{$i} {
    font-size: 5rem - $i*0.75rem;
  }
}

// compiles to CSS 
h1 {font-size: 4.25rem;}
h2 {font-size: 3.5rem;}
h3 {font-size: 2.75rem;}
h4 {font-size: 2rem;}
h5 {font-size: 1.25rem;}

Another good application of a loop might be if a grid system is used, a more DRY method could use a loop to generate the values instead of repeatedly writing the measurement values, and later being able to change the values once and have them reflected everywhere.

Each

Another loop which can be used is @each, which is used to iterate over lists, which will be covered in the next installment in this series. The syntax is:

@each $i in $myList {
  /* your code */ 
}

Sass Functions

mikkel250 — Mon, 04 May 2020 00:38:49 +0000

Functions in Sass

The full list of functions is available in the Sass docs. Only the ones likely to be frequently used will be covered here.
The builtin functions are written in C, and so performance concerns are not a big factor when deciding whether to use them. Functions that are written by us as developers do not necessarily share this trait, so it's something to bear in mind when writing and using your own functions. More on functions:
https://sass-lang.com/documentation/at-rules/function
and the complete list of built-ins:
https://sass-lang.com/documentation/modules

Note that an entire series on just colors could be written, so use Google to find out more about colors if necessary. A good place to start would be https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color

Color functions

Creating color

rgb($red, $green, $blue);
rgba($red, $green, $blue, $alpha);
red($color);
green($color);
blue($color);
mix($color1, $color2, [$weight]);

The above are pretty self-explanatory given the function names and variable names, but research them if needed, to learn more. Some of the more complicated functions are outlined below to get an idea of how functions work.

adjust-hue

adjust-hue(#63f, 60deg)

adjust-hue takes the initial color as as the first argument, and the degrees of rotation (clockwise around the color wheel) as the second (the 'deg' is optional, but helpful for remembering later that this value is degrees on a circle).

darken and lighten

darken($color, $percent);
lighten($color, $percent);

Note that the percent value is not multiplicative. In other words, we are subtracting 20% from its brightness value. We are not decreasing its current brightness value by multiplying the current value by 20% and subtracting the product. It is a scale of 0-100.

saturate and desaturate

desaturate($color, $percent);
saturate($color, $percent);

Color saturation is essentially how much of a channel is mixed into a particular color. A color saturated to 100% is very vivid, whereas a color with 0% saturation would be grey scale.

Sass Mixins and Arguments

mikkel250 — Mon, 04 May 2020 00:36:42 +0000

Mixins

Mixins are a way to define styles that can be reused. The declaration block of the mixin is merged into the your main file by way of @include, and best practice is to keep them separate from styles in partials, like variables (e.g. _mixins.scss), and included after the variables partial. An example of how it would be used:

// inside the _mixins partial
@mixin alert-text {
  background-color: #f00;
  color: white;
  font-variant: small-caps;
}

// in the main scss file
.error-text {
  @include alert-text;
}

Mixins: arguments

Using variables allow for parameterization in Sass, much like a function in JS:

// inside the _mixins partial
@mixin alert-text($color) {
  background-color: $color;
  color: white;
  font-variant: small-caps;
}

// in the main scss file
.error-text {
  @include alert-text(blue);
}

The above has the same effect as the previous example, but now the background color can be chosen when it is included, which allows for much greater flexibility.

Default Argument values

Defining default values for arguments is done by using a colon and the value:

// inside the _mixins partial
@mixin alert-text($color: #f33) {
  background-color: $color;
  color: white;
  font-variant: small-caps;
}

// in the main scss file
h1 {
  @include alert-text(blue);
}
h2 {
  @include alert-text($color: green);
}
h3 {
  @include alert-text();
}

In the case above, the h3 would have the default color of #f33.
The arguments can also be passed in using the key: value syntax, as in h2 above, which will allow the arguments to be passed in any order, which is handy when there are a few different parameters with default, and only one or two need to be changed (or if you forget in what order they were defined). If this style is not used to pass in the arguments, then they must be passed in the same order as when the mixin was defined.

Null as default value

A really useful aspect of default values is defining the default as null, which results in the value being completely omitted from the compiled CSS if it is not passed in with the arguments. So, it can be thought of in this case as an optional value that is only applied if it's passed into the @include .

// inside the _mixins partial
@mixin foo($opacity: null) {
  color: #333;
  opacity: $opacity;
}

// in the main scss file
.btn {
  @include foo();
}
.other-btn {
  @include foo(0.5);
}

// compiled CSS
.btn {
  color: #333;
}
.other-btn {
  color: #333;
  opacity: 0.5;
}

Mixins: passing in a declaration block

Another neat thing that can be done with mixins is that the @content directive can be used to pass in additional values when it is included in the main scss file (almost like a callback in JS):

// inside the _mixins partial
@mixin foo($color) {
  color: $color;
  .inner {
    @content
  }
}

// in the main scss file
.btn {
  @include foo(#c69) {
    // note the curly braces
    // this is what will appear in compiled CSS where @content appears above
    color: red;
  }
}

// compiled CSS
.btn {
  color: #c69;
}

.btn .inner {
  color: red;
}

Sass Imports and variables

mikkel250 — Mon, 04 May 2020 00:29:21 +0000

Imports

CSS allows imports, but requires a new round-trip HTTP request, which can be a performance concern. Sass handles this differently.

Files that have the underscore in front of their names are known as "partials", which are designed to be imported into other .scss files. They will not become their own CSS files after Sass is compiled. Import is not limited to partials, it can be pointed to other .scss files, folders, or even libraries by pointing it to the appropriate node_modules folder, and importing.
Import statements are written as @import, and the name of the file or library in quotes, followed by a semicolon. No file extension is necessary, and the paths are relative.

@import '_variables';

Variables

Variables are declared using the dollar sign at the beginning of the name, followed by a colon, and the value. E.g.

$error_color: #f00 !default;

In the example above, !default translates to "if error color has not been defined elsewhere." So if the variable $error_color has been assigned previously, it will not override it.
Note that the exclamation point is not a negation operator -- it has a different definition in Sass than it does in most programming languages.

Variable Scope and Manipulation

Note that, similar to let in JavaScript, variables are only available in the scope in which they are defined (the curly bracket set) and its children, but variables defined inside a child scope are not available in the parent.
Simple arithmetic can also be used with variables, and Sass will handle typical unit conversion for you, as long as it's possible (e.g. rem to pixel cannot be converted because of how rem are calculated, but percent to decimal works fine).

Types

There are 5 types in Sass:

Numbers (10, 200px, 50%, 14pt)
Colors (#FFF, rgb(255, 0, 0), red)
Strings ("a.png", url("a.png"))
Booleans (true, false)
Lists (e.g. border-radius has several space-delimited values in a specific order, which is a list. Similar to an array in JS)
Maps (key: value pairs similar to objects in JS)

String Interpolation

Interpolation in Sass uses the octothorpe and curly braces: #{hue(green)}
Comments have another feature handy for debugging, which is that they can be used along with interpolation, and the output can be viewed in the CSS file to see what values are actually being used after compilation. Note that block level comments must be used for them to appear in the CSS file:

/*
Error color is #{error_color}
Hue is #{hue(green)}
#{2px * 2}
#{2rem * 2px}
*/

compiles to:

/*
Error color is #f00
Hue is 120deg
4px
*/

There are few limits to what can be used with interpolation, and if it's not possible, it won't compile to valid CSS, so it can be checked in the manner outlined above. If nothing appears for the interpolated value, it cannot be interpolated. It won't throw an error and break your CSS, but nothing will appear where the interpolated value was supposed to be (as in the last line of the comment block in the example above), so best to find a workaround or hard code it.

Combining imports and variables

To maintain separation of concerns and fewer lines of code in the main Sass stylesheet, separate partials (files beginning with underscore) can be created to hold all variables (and other things, covered later), and then imported into the main file, which gives access to everything defined in the partials. An example of how this might work well would be a team defining a specific palette of colors in a _variables.scss file, and then universal variable names can be used in the stylesheet without having to remember the specific color (e.g. primary, secondary, accent, primary_border, etc.). If a change is needed, changing it once in the variables partial will then be immediately applied to the entire app.

Getting started with Sass: nesting and parent selectors

mikkel250 — Mon, 04 May 2020 00:21:53 +0000

What is Sass? It is a preprocesser that adds some extra syntax options and functionality on top of CSS, and then it compiles the .scss file to a standard CSS file that will be used in the final web page/app. The way I think about it is that Sass is an enhancement to CSS that gives you extra tools (logic, functions, variables, mixins) and syntax that reads a bit more like other programming languages.

These are my notes on the basics of syntax and functionality (i.e. learning to write Sass), from Mike North's fantastic course and I won't really be covering much in terms of setup. The official docs are a good place to start if you want to learn more than what's covered here: https://sass-lang.com/documentation

Installing and file types

Just briefly touching on this topic, you'll want to add Sass to your project or system (globally) using NPM or Yarn, or use Google for other methods. I'd recommend using the .scss file extension because it's backwards compatible with standard CSS, so to convert an existing project to Sass, all that's needed is to change the file extension, but you can Google 'Sass file extensions' to find out more about this topic.

Nesting

Styles can be nested by declaring them within the block (i.e. before the closing curly brace) of the parent selector, and compiles to CSS as if the selectors are parent, then a space, then child.

.container {
  // styles for the container
  .left-area {
    // styles for the left-area children of container
  }
}

/* compiles to CSS as */
.container .left-area {
  /* styles for the left-area children of container */
}

Another neat feature of Sass is it allows inline comments, but they will not compile to the final CSS, only the /* block comments */ will show up.

It is also possible to use the 'direct descendant' operator in Sass, but it will apply the defined styles to ALL of the children, and can lead to undesirable behavior, so is not frequently used. E.g.

.container {
  // styles for the container
  > .left-area {
    // styles are applied to the left-area, and all its children
  }
}

Parent Selector

The parent selector is the & ampersand, and will insert the name of the style that is the parent scope of the current selector. It can be helpful in adding conditional styles, (e.g. using a class as a flag to apply specific styles, or theming).

.container {
  color: red;
  &.right-nav {
    // styles for the container class only if it also has the right-nav class
   float: right;
  }
}

/* compiles to CSS as */
.container { color: red; }

.container.right-nav {
  float: right;
}

The ability to nest and using parent selectors can make reading Sass a bit more like other programming languages in terms of logical flow and the cascade can be used to override previous styles to create themes and conditional styling.

Next up: Imports and Variables.

Scope in JavaScript

mikkel250 — Thu, 13 Feb 2020 22:54:43 +0000

IIFE pattern

If you want to use a variable that exists in a larger, enclosing scope (e.g. global), or "hide" it to avoid accidental use/reassignment, or want to avoid polluting the global namespace, an Immediately Invoked Function Expression (IIFE) can be used. It will not reassign the variable in the parent scope, because it first looks for the name in the local scope and uses it if found.

var name = "Mikkel";

(function changeName() {
  var name = "Bob";  // declares new variable in the function scope
  console.log(name); // "Bob" is logged in the console
})();  

console.log(name);   // "Mikkel"

Wrapping the entire function in the parentheses has the effect of turning it into an expression instead of a function declaration. This allows the function to be immediately used and then discarded, and accomplishes the tasks of using the same variable name that exists in enclosing scope without affecting it.

Block scoping

Another method for accomplishing the same goal is to use block scoping, using the keyword "let", which will allow for a more concise method. Interestingly, blocks are not scopes until the have let or const used inside of them, but once they have been, it creates a local scope.

var name = "Mikkel";

// wrapping the statement in curly braces and using 'let' creates local scope
{
    let name = "Bob";
    console.log(name);   // "Bob" is logged in the console
}

console.log(name);   // "Mikkel"

`var` and `let`

A different mental model for when to use var vs let would be to use var when you need access to the variable outside of the local scope. For example, in a try/catch block, because var is available in the enclosing scope (in the example below, the function scope), it avoids having to create an undefined variable at the top of the function scope just so it can be used in the block below.

function lookupRecord(searchStr) {
  try {
    var id = getRecord(searchStr);
  } catch (err) {
    var id = -1;
  }

  return id;
}

Using var gives the return statement access to the id variable even though it's enclosed in the try/catch block's scope. Another advantage to using var is that it can be declared more than once in the same scope, and let cannot. It might also be handy in a long if/else block where there are lots of conditions to check, or a switch statement with lots of possible options, or where a number of different variables need to be assigned and then returned at the end of the statement.
A use of let's block scoping that can be taken advantage of is to use curly braces when variables only need to be used for a few lines of code.

function formatStr(str) {
  { let prefix, theRest;
    prefix = str.slice(0, 3);
    theRest = str.slice(3);
    str = prefix.toUpperCase() + rest;
  }

  return str;
}

`const`

The const keyword can be helpful as an indicator that you don't want the value to be changed, and pair it with primitive types that can't be changed anyway, because it also has some quirks. A good example would be to use it at the top of the program to store an string for an API that probably never needs to be changed by the program.

const databaseApi = "https://myDB.com/1235";

A generally good practice when using either let or const is to always declare them at the top of the scope in which they will be used, to avoid TDZ errors, because they behave differently than var when it comes to scope.

These are my notes from @getify 's Deep JavaScript Foundations v3 course on Frontend Masters. If you'd like to dive more deeply into these topics, I highly recommend the course, and you can read his 'You Don't Know JS' books on Scope and Closure, This and Prototypes, and Types and Grammar, available on Github or for purchase at your favorite bookseller.

Javascript types and type checking

mikkel250 — Wed, 12 Feb 2020 21:35:11 +0000

Types

Note: throughout this post, I shorten JavaScript to 'JS'.

The reason for the idea that "everything is an object" in JS is because most of the values in JS can behave as objects. But this doesn't make them objects.

JS Types that differ from objects are Primitive Types:

undefined
null
string (the string literal, created "with quotes like this")
number
boolean (these are actual special values true and false, not 0 and 1 like some other languages)
symbol (added with ES6)
bigint (added in ES10, 2019)

Other things that behave like types that are not explicitly listed as types in the spec:

undeclared
null (quirky, due to a historical bug)
function (referred to as a subtype of the object type, a "callable object")
array (a subtype of the object type, even though it has specific behavior)

The only items in JS that are actual objects are:

object
function
array

Variables, types, and `typeof`

Unlike in other languages where the type is declared when creating the variable, such as in C, int myNum = 3;, In JS, variables don't have types, but the values contained in the variable do, so this is how they are evaluated, and can change over time depending on what they are assigned to.

var v;
typeof v;   // "undefined"

v = "1";
typeof v;   // "string"

v = 2;
typeof v;   // "number"

v = true;
typeof v;   // "boolean"

v = {};
typeof v;   // "object"

v = Symbol;
typeof v;   // "symbol"

The typeof operator will always return a string, and there is a short list of values it can be returned (essentially an enum list). So, when checking for type, always make sure to put quotes around the value you are checking for, or the expression will not evaluate as expected.

let v = undefined;

typeof v === "undefined";  // true

typeof v === undefined;  // will return false

Note that there is some "quirky" behavior when using typeof.

typeof doesntExist;   // "undefined"

var v = null;   // "object"

v = function() {}; 
typeof v;   // "function"

v = [1, 2, 3];
typeof v;   // "object"

v = 42n;
// or: BigInt(42)
typeof v;   // "bigint"

Note that null will return the "object" type, so it can fail checks. This can basically be treated as a bug in the language (but there are historical reasons for it). For this reason, if you want to assign a variable to an "empty" value, it's best to avoid using null. Either leave it blank or assign it to undefined if you want to be more explicit. The same goes for assigning 0 as a 'placeholder' value to a variable, since zero is a number, and the variable will evaluate to that type and can cause unplanned-for behavior.

Note also that when checking a variable that didn't exist (above), it still returned "undefined". There is no "undeclared" type in JS, so you could get undefined back from a check even if the variable has never been declared, but you can also get "undefined" back when the variable has been declared but not yet assigned a value. The typeof operator is the only operator in JS that is able to reference a thing that does not exist and not throw an error.

if (typeof DoesntExist) {
  console.log("passed the if check");
}
// evaluates to true, logs "passed the if check"

if (DoesntExist) { 
  console.log("passed");
} 
// this will throw an error

// even more explicit
if (typeof DoesntExist !== "undefined") {
  console.log("this will only return if the variable exists and something has been assigned to it");
}

The full list of what typeof can return is:

Type	Result
Undefined	"undefined"
Null	"object"
Boolean	"boolean"
Number	"number"
BigInt (new in ECMAScript 2020)	"bigint"
String	"string"
Symbol (new in ECMAScript 2015)	"symbol"
Function object (implements [[Call]] in ECMA-262 terms)	"function"
Any other object	"object"

Special Values: NaN

A good mental model to use for NaN is "invalid number" as opposed to the instinctual "Not a Number".
NaN is returned if, for example, you try to convert an invalid string into a number, or if JS tries to do so through implicit conversion.


var x = Number("n/a");  // NaN
var y = Number("39") // 39  here JS does implicit conversion
y - x; // NaN   because JS implicitly tries to convert x to a number

x === x  // false

NaN is the only value in JS that is not equal to itself, which is how the x === x comparison can fail.

JS does ship with a way to check for the NaN value, isNaN(), but this too can have some quirks. The reason is because it first tries to coerce the value passed in to a number, which can result in false positives.

isNaN("a string");   // true

Above, it is coercing the string to a number, which results in the NaN value, so it returns true (the same way declaring x in the block above it did).
As a result of this unexpected behavior, ES6 shipped with a new utility Number.isNaN(), which will not try to coerce the parameter to a number first.

Number.isNaN("a string");   // false

Special Values: Negative zero `-0`

The negative zero can have some unexpected consequences. When using the -0, be aware of some of the gotchas when using comparison operators, demonstrated below.

let trendRate = -0;
trendRate === -0;  // true

trendRate === 0;  // true 
trendRate < 0;   // false
trendRate > 0;   // false

// since the triple equals doesn't reliably return comparisons to zero, 
// the Object.is() method was introduced, which can reliably check for -0
Object.is(trendRate, -0);  // true
Object.is(trendRate, 0);  // false

trendRate.toString();  // "0"  the sign is dropped when converted to a string

The takeaway from the above is that, if you need to check for a negative zero, use the Object.is() method, and if you need it in string form, don't use the toString() method. One option would be to create your own function that will check the parameter using the Object.is() method, and then create and return a string literal "-0".

function negZeroToString(input) { 
  if (Object.is(input, -0)) {
    return "-0";
  } else {
    return new Error (`${input} is not the number negative zero! This function only accepts negative zero as an argument.`);
  }
}

And that's a brief overview. Hopefully you like this 'type of' post (womp womp)!

DEV Community: mikkel250

CSS notes and references

CSS

Basics

Layout

Width and Height

Margin and Padding

Float and Clear

Flexbox

Patterns for writing CSS

Resources

Functions in Sass

Reusing style with mixins

include

extend

Introducing: Placeholder

BEM CSS Architecture and Sass

BEM

Sass Data Structures

Lists

nth

Maps

Sass Control Flow

If Else

For loops

Each

Sass Functions

Functions in Sass

Color functions

Creating color

adjust-hue

darken and lighten

saturate and desaturate

Sass Mixins and Arguments

Mixins

Mixins: arguments

Default Argument values

Null as default value

Mixins: passing in a declaration block

Sass Imports and variables

Imports

Variables

Variable Scope and Manipulation

Types

String Interpolation

Combining imports and variables

Getting started with Sass: nesting and parent selectors

Installing and file types

Nesting

Parent Selector

Scope in JavaScript

IIFE pattern

Block scoping

var and let

const

Javascript types and type checking

Types

Variables, types, and typeof

Special Values: NaN

Special Values: Negative zero -0

`var` and `let`

`const`

Variables, types, and `typeof`

Special Values: Negative zero `-0`