DEV Community: Ambrose Liew

Most Developers Fail This Simple CSS Interview Question (CSS Specificity)

Ambrose Liew — Mon, 24 Apr 2023 14:34:14 +0000

Think CSS is easy? Think again!

The Test

Given the following HTML and CSS code, do you know what would be the color of the text ‘test’?

    <body>
        <div class="hello">
            <p class="abc">test</p>
        </div>
    </body>

    p.abc {
        color: purple;
    }
    .hello p {
        color: red;
    }
    .abc {
        color: blue;
    }
    p {
        color: green;
    }

Take a second to think through

Intention space left blank so that you don’t accidentally see the answer

More intentional blank space

Please give it a shot before looking at the answer

If you had guessed the color was red, then you are correct! You would also have a solid understanding of CSS Specificity.

You can have a quick confirmation of the answer through this codepen.

But why?

If you did not manage to get the correct answer or understand why the text color was red, you can check out this other article where I teach CSS Specificity in detail here.

Stop Writing !important in your CSS Code, and Do This Instead!

Ambrose Liew ・ Apr 24 ・ 3 min read

#webdev #css #html #tutorial

Understanding this concept is important because concepts like this are always being used if you are a Web Developer, and especially so if you are a Frontend Developer.

Walkthrough

But to break it down further, the CSS Specificity for the rule that applies the color purple, and the other rule that applies the color red, both have a specificity of 0–0–0–1–1. This is because they both have 1 Class Selector and 1 Type Selector.

Meanwhile, for the rule that applies the color blue has a CSS Specificity of 0–0–0–1–0, because it only has 1 Class Selector. While, the rule that applies the color green has a CSS Specificity of 0–0–0–0–1, because it only has 1 Type Selector.

Thus, the rules that have the highest CSS Specificity value, are the rule that apply the color purple and the other rule that apply the color red.

But 2 CSS rules with the same CSS Specificity value! How do we know which to apply?

This is where the ‘Cascading’ in Cascading Style Sheets (CSS) comes into play. What this means is that whichever rule is applied the latest (the rule that is found at the bottommost) will be the one that is applied. In this case, it would be the rule that applies the color red.

Bonus

We can even take it a step further by adding another CSS rule to the list.

    .hello.hello {
        color: pink;
    }

What do you think would the outcome of the color be? Red or pink?

And yes, you can stack Class Selectors (and ID Selectors) to increase the specificity. Thus, the CSS Specificity for this rule would be 0–0–0–2–0. This value is definitely higher than all the other rules so far.

However, if you add this CSS rule to the existing CSS code so far in the codepen, you would realize that the color of the text is still red! Why is that?

It is because rules that directly target elements will always take priority over rules that target the parents (aka inherited styles).

Thus, in this case, since this CSS rule targets the parent instead of the actual p tag itself, it would be overwritten by the other more specific CSS rules. And yes, the CSS rule that applies the color green would also overwrite this pink color.

If you felt that you have learned something new, do feel free to follow 🥰, drop a react 💖 or write a comment ✍️!
It helps makes me create and share more valuable content for you to become a better Web Developer! 🤗

Stop Writing !important in your CSS Code, and Do This Instead!

Ambrose Liew — Mon, 24 Apr 2023 14:20:17 +0000

Ever wrote !important in your CSS file to override a CSS property?
Come learn CSS Specificity to remove the need to write !important ever again!

Why shouldn’t I use !important in my code?

First and foremost, I would like to address the elephant in the room. And that is why we should not write !important in CSS.

There are a number of reasons, but the main reason is that if you are working on a large project with other developers, writing !important makes the project more unsustainable to manage.

What do I mean by unsustainable to manage? If more developers in your team started to write !important in the CSS codebase, it becomes increasingly difficult to apply your own styles. You would have to resort to writing !important yourself in hopes to override their styles or you will have to edit their styles to decrease their CSS specificity.

What does CSS specificity mean? Continue reading to find out more.

What is CSS Specificity?

CSS Specificity is the algorithm that determines what CSS property is applied to an element.

There are 5 main categories that contribute to CSS Specificity. They are !important, inline styles, ID, Class, and types. You can think of these categories in the form of this representation: 0–0–0–0–0 in that order.

    * {
     color: red; !important
    }
    In CSS, this is the !important property.

    <p style="color: purple"></p>

    In HTML, this is the Inline Styles

    #abc {
     color: blue;
    }
    .def { 
     color: yellow;
    }
    p { 
     color: green;
    }

    Any word with a '#' in front is an ID selector.
    Any word with a '.' in front is a Class selector.
    Without anything in front is a Type selector.

Examples

    #container div.home-select > .dropdown span {
        color: red;
    }

The above CSS property has the specificity: 0–0–1–2–2

Because there is 1 ID selector (#container), 2 Class selectors (.home-select, .dropdown) and 2 Type selectors (div, span).
Assuming there is no inline-styles applied to it.

So how do I apply this knowledge?

Try to be more specific with your CSS selectors, a higher value will always override a lower value.
Eg. 0–0–1–0–0 has higher specificity than 0–0–0–10–5.
The algorithm will check from left to right column, and whichever value has the higher value, will be applied for the CSS property.
Remember the CSS also Cascades, so if you have 2 CSS properties with the same specificity value, put your desired CSS property after (below) the other undesired CSS property.
Always try and refrain from using the most powerful tool first, if you do not want to calculate the CSS specificity, you can try to use inline styles instead.
Be sure to check out the brand new CSS feature, CSS Cascade for an alternative, modern solution too!
You can also test out your new profound knowledge with this Simple Interview Question!

Most Developers Fail This Simple CSS Interview Question (CSS Specificity)

Ambrose Liew ・ Apr 24 ・ 3 min read

#css #webdev #tutorial #beginners

Extras

Since you cannot stack !important and inline styles, the first two values can only be either 1 or 0.

For those wondering, the > is the symbol for the direct child combinator.

Attribute selectors like [type="radio"] and [lang|="fr"]and Pseudo-classes like :hover, :nth-of-type(3n), and :required all add to the Class specificity.

Pseudo-elements like ::before, ::placeholder all add to the Type specificity.

There are also certain selectors without any specificity value, eg: *, where().

You can actually stack classes/ids to increase the specificity, eg:
#home#home#home .container.container would have the specificity value of 0–0–3–2–0.

A pictorial view of what I have explained can be found here!

A game about CSS Selectors is found here!

There are more detailed explanations found here!

The Full Practical Guide To Type Coercion In JavaScript: Beware Of These 3 Common Mistakes

Ambrose Liew — Mon, 24 Apr 2023 14:09:33 +0000

Ever used ‘==’ in JavaScript?
Or ‘if (x)’in JavaScript?
Or used String Concatenation?

Hopefully, after reading this article, you can obtain some insights about the common mistakes to avoid in JavaScript!

The 7 Primitive Types

Before I begin teaching Type Coercion in JavaScript, I would like to introduce the 7 primitive types in JavaScript. And they are:

undefined
null
boolean
string
symbol
number
object (for those wondering what is the type of array, arrays are a special type of object)

But for the focus of this article, we would be focusing only on the most commonly used types which are: boolean, string, and number.

What is Type Coercion?

Type Coercion is the conversion of one type to another. There are two forms of Type Coercion: Explicit and Implicit.

Explicit Coercion is the conversion of a value from one type to another using explicit methods such as Number(), parseInt(), and String().

Implicit Coercion is the automatic conversion of one type to another.
This occurs because the operation performed on the 2 types is incompatible, and JavaScript has to step in to make it compatible.

We would be focusing on Implicit Coercion instead as that is where most of the bugs occur.

String Concatenation

One common place where Implicit Coercion tends to occur is through String Concatenation.

JavaScript would convert the non-string type to a string, and concatenate the string to deal with these incompatible types.

Evaluation of Truthy Values

Another common use case is through the short-hand usage of Evaluation of Truthy Values.

These occur typically in if statements (if (x)), ternary operators (x ? 1 : 0), and basically any place in code where a non-Boolean variable is being treated as a Boolean value.

That is why it is dangerous to use these short-hand syntaxes if you do not know all the edge cases when converting a non-Boolean type to a Boolean type.

‘==’

Another common area where Implicit Coercion occurs is through the usage of ‘==’.

For number and string comparisons, JavaScript will convert the string to a number using Number() function.
For boolean and number comparisons, JavaScript will convert the boolean to a number using the Number() function. true = 1, false = 0.
For boolean and string comparisons, JavaScript will convert the boolean to a number, then the string is converted to a number. That is why (false == ‘0’) is evaluated as true.

Algorithm

If you are curious, you can check out the algorithm for Implicit Coercion, here.

You can play with the examples above in this JSFiddle.

Conclusion

I hope that after reading this article you would think twice about using these unsafe methods. You can see how by not carefully considering all the edge cases of Type Coercion, bugs can easily occur.

Consider these safer alternatives:

Utilising ‘===’ instead of ‘==’ always
Using ESLint, to throw warnings and errors when you write these code
Using TypeScript, to help detect potential run-time errors beforehand

However, of course, there is one situation you might want to consider using ‘==’ in JavaScript.

The Only Situation To Use ‘==’ In JavaScript

Ambrose Liew ・ Apr 24 ・ 2 min read

#javascript #webdev #beginners #tutorial

Trivia

Did you know? Someone even took this Type Coercion concept to the extreme and made a programming language out of it.

Behold http://www.jsfuck.com/

It uses only six different characters to write and execute code in JavaScript. Here is a video explanation of the makings of the programming language.

Even though this programming language looks ridiculous, there are two practical uses for it. And that is obfuscation and the crafting of a malicious payload for XSS.

The Only Situation To Use ‘==’ In JavaScript

Ambrose Liew — Mon, 24 Apr 2023 13:53:38 +0000

Ever pondered when to use ‘==’ in JavaScript?
Or ever had the idea that one should always use ‘===’ in JavaScript?
Hopefully, by reading till the end of this article, you learned something new!

Why?

You might be thinking, why should one ever consider the scenario to use ‘==’? Just use ‘===’ all the time to ensure consistent and expected developer behavior, this also prevents unexpected bugs from occurring.

And if you’re wondering why it’s bad to use ‘==’, the main reason is that with ‘==’, JavaScript does a Type Coercion.
If you do not know what that is or want to learn more about Type Coercion, you can read about it here.

The Full Practical Guide To Type Coercion In JavaScript: Beware Of These 3 Common Mistakes

Ambrose Liew ・ Apr 24 ・ 3 min read

#webdev #javascript #beginners #tutorial

Well, the main and only reason to utilize ‘==’ in JavaScript is to check for null and undefined at the same time.

if (a == null)
if (a == undefined)
// both methods are equivalent to checking the variable 'a' 
// with null and undefined at the same time.

if (a === null || a === undefined) 
// the equivalence to writing this out

Thus, if you have to do a check for null and undefined at the same time, consider using the ‘==’. This does a shortcut instead of the otherwise, lengthier method of checking for both.

But wait! Ever wondered what is the difference between null and undefined?
And when to use which?

Know that JavaScript will never set any value to null. Both null and undefined represent the absence of value.

Thus, the only difference between the two is that, whenever you want to set a variable to undefined or null, you should always set it to null. Because it helps you during debugging.

If you ever encounter a null value, this means that somewhere along your code, you had manually set the value to null then. Meanwhile, for undefined, you do not know whether you or JavaScript (in other words, not giving it a value when initializing) had set the value to be undefined.

Just as a bonus, here is the pictorial representation of what values are equal to others for ‘==’.

As you can see, there is not much value for using ‘==’, besides checking for null and undefined.

Never Say Never, The never Keyword In TypeScript And Exhaustive Matching

Ambrose Liew — Mon, 24 Apr 2023 13:35:03 +0000

Ever heard of the never keyword in TypeScript and know when to use it?

Exhaustive Matching

Exhaustive Matching is when you try to match a discriminant property to its corresponding value/function. This is better explained through an example.

Example

The above colorToString function is an example of Exhaustive Matching. Where we try to map all enums of COLORS to a corresponding value.

The main idea of Exhaustive Matching is we try to match a set of values to another set of values (can also be functions, DOM elements, etc.).

The Problem?

The problem arises when we try to add another value to our COLORS enum.

When we update our enums, the compiler does not warn us that we have forgotten to update our colorToString function as well. Thus, we might forget to handle this newly added color.

The Solution?

Use the never keyword in TypeScript!

We can assign the color to a type of never in TypeScript. This tells the compiler to warn us if we forget to update a function that Exhaustive Matches.

Like so:

Contrast this to when we handle our function appropriately.

Conclusion

I hope that from these simple examples, you have learned a new tool for you! This is an especially important skill to use if you are in a large project and there are multiple such functions scattered around in the project!

A Step Further

You can abstract out the assert never into a function for reusability throughout your codebase.

Besides coming in as a form of a switch/case statement, Exhaustive Matching functions can be in a form of if/else statements or if/return statements.

You can play with the examples shown, in this TypeScript Playground.
typescriptlang.org

3 Ways To Enforce Object Immutability In JavaScript

Ambrose Liew — Mon, 24 Apr 2023 13:19:51 +0000

What happens when an Unstoppable Force meets an Immutable Object?

Immutability

In JavaScript, Object Immutability means that once you have made an object immutable, its properties cannot be added, deleted, or modified at any time.

This is important because it helps prevent unwanted side effects from occurring, making your code more predictable and easier to reason about.

Here are 3 ways you can make an object immutable in JavaScript, ordered by the level of integrity they retain.

Object.preventExtensions()

Object.preventExtensions() will prevent new properties from being added to an object.

However, it still allows the deletion of properties and modification of values from an object.

You can check whether an object is extensible by using Object.isExtensible()

Object.seal()

Object.seal() will perform Object.preventExtensions() on it and also prevent the deletion of properties.

However, it still allows the modification of values of an object.

You can check whether an object is sealed by using Object.isSealed()

Object.freeze()

Object.freeze() will perform Object.seal() on it and also prevent the modification of values of an object.

You can check whether an object is frozen by using Object.isFrozen()

Object.freeze() is the highest level of integrity that JavaScript offers.

Extras

All of the above methods are applied shallowly on the object. This means that if you have an object within an object, the inner object would still be mutable.
To perform a deep operation instead of a shallow one, you have to implement your own recursive function. MDN has provided a working example.

You can play with the examples above in this JSFiddle.

If you felt that you have learned something new, do feel free to follow 🥰, react 💖 or write a comment ✍️!
It helps makes me create and share more valuable content for you to become a better Web Developer! 🤗