DEV Community: Bellotaiwo

CSS Specificity

Bellotaiwo — Tue, 19 Jul 2022 09:26:00 +0000

Quick Summary

In this article You will learn about the tips and tricks of css specificity, specificity ranking, and also learn how calculate css specificity.

An HTML element can have multiple css rules attached to it by matching different CSS selectors. The selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.

So basically, specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element.

Let's have look at an example

.title {
        background-color: green;
      }
h1 {
     background-color: red;
   }
<h1 class="title">Hello World</h1>

In the code written above, we have a conflicting declaration. Our html element matches both .title class and the h1 element selectors. It is indeed a h1 element, and it also has a .title class name. Each selector has a different background-color property. Guess which background-color property the h1 element will have?

You might say it’s red because the h1 element selector comes after the .title class selector. This is the result

Yes, it is green. The class selector rule was applied. This is because .title class selectors have a higher specificity rank than h1 element selectors.

So, whenever there is a conflict of CSS properties across multiple rules, the rule with the most specific selector is chosen.

Specificity rankings

The specificity rankings of CSS rules are as follows, from the most specific to the least specific.

Inline styles - Example: <h1 style="color: pink;">
ID selectors - Example: #navbar
Class selectors .myClass, attribute selectors [type="radio"] and pseudo-classes :hover
Element selectors div and pseudo-elements :before

How to calculate specificity?

The following are the specificity value of a selector.

Inline styles have a specificity of 10000
Add 100 for each matching ID selector
Add 10 for each matching class selector, attribute selectors, and pseudo-classes.
Add 1 for each matching element selector and pseudo-elements

Example

#btn {
   background-color: red; /* 100 */
}

button.btn[type="button"] {
    background-color: green; /* 1 + 10 + 10 = 21*/
}

.btn {
    background-color: blue; /* 10 */
}
<div id="container">
   <button class="btn" id="btn" type="button">Button</button>
</div>

The first declaration has simply an ID selector with a specificity value of 100.
The second declaration includes an element selector with a value of 1, a class selector of 10, and an attribute selector of 10. 10 + 10 + 1 = 21
The third declaration is simply a class selector with a specificity value of 10.

As a result, the first style declaration will be applied since the first declaration has the highest specificity value of 100.

Note: Inline styles has the highest specificity and will always overrides any styles in the author's style sheet. The only way to override inline styles is by using important.

Example

h1{
  color: black;
}
h1#title {
  color: green;
}
<h1 id="title" style="color: pink;">Heading</h1>

The inline style will be applied since it has the highest specificity value of 1000.

!important

CSS declarations marked as important will override any conflicting declaration, even if the selector is less specific.
Using importance is considered a bad practice and it should be avoided. It can make css issues harder and make your style sheet less maintainable.

It is better to increase the specificity of the selector such that it is larger than other declarations.

More Specificity Rule

The universal selector(*) has no specificity value, which means that anytime another selector conflicts with the universal selector, the selector takes precedence.
If multiple conflicting declacration have the same specificity. The last style declaration wins.

Conclusion

In this article you learned about css specifity rule, how to calculate specificity.

As a frontend developer, knowing specificity is essential and I hope this article helped you to understand css specificity.

How to create a wrapper component in react.

Bellotaiwo — Tue, 15 Mar 2022 14:21:25 +0000

Quick Synopsis:

In this article, you will learn about a wrapper component in react, its utility, and how to make a wrapper component.

What's a wrapper component in react?

Wrapper components are components that surround unknown components and provide a default structure to display the child components.

A wrapper component may be used to create user interface (UI) components that are used frequently throughout a design, such as modals, template pages, and information tiles.

Code example of a modal react wrapper component.



export const Modal = (props) => {
  const { visible, cancel, children } = props;
  const modalRef = useRef(null);

  useEffect(() => {
    const checkIfClickedOutside = (e) => {
      // If the modal is open and the clicked target is not within the modal, 
//then close the modal
      if (visible && modalRef.current && !modalRef.current.contains(e.target)) {
        cancel();
      }
    };

    document.addEventListener("mousedown", checkIfClickedOutside);

    // Cleanup the event listener
    return () => {
      document.removeEventListener("mousedown", checkIfClickedOutside);
    };
  }, [visible]);

  return (
    <>
      {visible && (
        <div className="modal-bg">
          <div ref={modalRef} className="modal-container">
            <button onClick={cancel}>close modal</button>
            {children}
          </div>
        </div>
      )}
    </>
  );
};

The preceding code demonstrates a react modal component.

The modal component is given the following properties to make it reusable anywhere a modal is needed.

visible A Boolean value that controls the visibility of the modals.
cancel A handler function that negates the visibile value.
children displays whatever you include between the opening and closing tags when invoking the modal wrapper.

The modal component then transforms into a wrapper component, wrapping the children prop and giving it a modal view.

The modal component can be utilized anywhere a modal is required.



function App() {
  const [modalVisble, setModalVisble] = useState(false);

  const handleOpenModal = () => {
    setModalVisble(true);
  };

  const handleCloseModal = () => {
    setModalVisble(false);
  };

  return (
    <div className="App">
      <button type="button" onClick={handleOpenModal}>
        Open modal
      </button>
      <Modal visible={modalVisble} cancel={handleCloseModal}>
        <h1>Hello World</h1>
        <p>I am a modal</p>
      </Modal>
    </div>
  );
}



.modal-bg {
  background-color: rgba(0, 0, 0, 0.2);
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  background-color: white;
  padding: 20px;
  width: 70%;
  margin: 0 auto;
}

Conclusion

React wrapper is a must-have approach for every professional react developer.
In this article we learned how we can create a react wrapper component and its use cases.

How to create a React tree view component.

Bellotaiwo — Mon, 03 Jan 2022 12:50:41 +0000

Quick Summary: in this article, we are going to build a reusable react tree component

A react tree view component is a graphical user interface component that represents a hierarchical view of information, where each item can have several subitems. They are often seen in the sidebar, file manager applications.

Let's start by creating the tree data. The treeData is an array of node objects.

Each node object has the following fields.

key
label
children: The children field is an array of a node object. ```javascript

const treeData = [
{
key: "0",
label: "Documents",
children: [
{
key: "0-0",
label: "Document 1-1",
children: [
{
key: "0-1-1",
label: "Document-0-1.doc",
},
{
key: "0-1-2",
label: "Document-0-2.doc",
},
],
},
],
},
{
key: "1",
label: "Desktop",
children: [
{
key: "1-0",
label: "document1.doc",
},
{
key: "0-0",
label: "documennt-2.doc",
},
],
},
{
key: "2",
label: "Downloads",
children: [],
},
];


```javascript


function App() {
  return (
    <div className="App">
      <h1>React Tree View</h1>
      <Tree treeData={treeData} />
    </div>
  );
}

We then proceed to create a Tree component that takes the treeData as a prop.
The Tree component maps through the treeData and returns a TreeNode component that takes the tree node as a prop.



function Tree({ treeData }) {

  return (

    <ul>

      {treeData.map((node) => (

        <TreeNode node={node} key={node.key} />

      ))}

    </ul>

  );

}

The `TreeNode` component incorporates the following.

A showChildren state is the state responsible for displaying the Tree component.
A handleClick is a click handler function that toggles the showChildren state.

The TreeNode component displays the node label

The TreeNode component also conditionally renders the Tree component if the showChildren state is true and passes the node children to the Tree component as a prop.



function TreeNode({ node }) {

  const { children, label } = node;

const [showChildren, setShowChildren] = useState(false);

const handleClick = () => {

    setShowChildren(!showChildren);

  };

  return (

    <>

      <div onClick={handleClick} style={{ marginBottom: "10px" }}>

        <span>{label}</span>

      </div>

      <ul style={{ paddingLeft: "10px", borderLeft: "1px solid black" }}>

        {showChildren && <Tree treeData={children} />}

      </ul>

    </>

  );

}

This would be the result.

Variable Declaration in Javascript

Bellotaiwo — Tue, 05 Oct 2021 14:32:28 +0000

Quick Summary: in this article, we are going to learn about how to declare and name variables, block scoping, hoisting, redeclaration as well as the rules and conventions that guide declaring a variable. By the end, you will understand how to declare variables, the concept behind block scoping, redeclaration, and hoisting in javascript.

variables are an important part of the programming language. In general, variables are ways of storing data(value).

Rules Guiding Variable Names

variable names can only include letters, numbers, underscore(_), dollar sign($).
variable names cannot start with a number.
variable names are case sensitive. Meaning, letter "a" is considerably different from the letter "A".
Reserved words (like JavaScript keywords e.g function) cannot be used as variable names.

Declaring Variables

Before Es6, var keyword was the only way to declare a variable and it is problematic and it has caused a lot of bug issues in cases of scope, hoisting, and redeclaration. while Let and const were introduced in Es6 and came to solve those problems.

var name = 'Taiwo'

Const

const as the name suggests constant, A constant is a variable that cannot be overwritten. Once declared, you cannot change its value.

const name = 'John'
console.log(name)  // John
name = 'Taiwo'  //TypeError: Assignment to constant variable.

A variable has a default value if no value is assigned to it but const has no default value and it requires an initializer.

var name; // undefined

const name;  // SyntaxError: Missing initializer in const declaration

Let

The Let keyword allows mutability and it doesn't require an initializer just like var.

let name = 'Taiwo'
name = 'John'
console.log(name)  // John

// it defaults to undefined without an initializer
let name;  // undefined

Block Scope

Block scope is an area between two curly braces {} which can be between if, switch conditions, or for and while loops.

The var keyword is function scope and it doesn't have a true block scope because variable declared with var jumps out of the block and it can be accessed outside the scope.

var name = 'john';

if (name) {
    var name = 'Taiwo';
    console.log('block scope', name); // block scope Taiwo
}
console.log('global scope', name); // global scope Taiwo

The let and const came to solve this, they have a true block scope because they exist only within the block they are declared in.

let name = 'john';
if (name) {
    let name = 'Taiwo';
    console.log('block scope', name); // block scope Taiwo
}
console.log('global scope', name); // global scope john

Redeclaration

var allows you to redeclare a variable as many times as you like.

function addScore (){
    var score = 55
    if (score > 50){
       var score = 70
       console.log('Your score is', score) //Your score is 70
    }
    var score = 80
    console.log('Your score is', score) //Your score is 80
}

let and const don't allow redeclaration within the same block. Redeclaring a variable would result in an error.

function addScore (){
    let score = 55
    if (score > 50){
        let score = 70
        console.log('Your score is', score) //Your score is 70
    }
    let score = 80 //SyntaxError: Identifier 'score' has already been declared
}
}

Hoisting

Hoisting is the javascript default behavior of moving all declarations to the top of the current scope before code execution.
var variables are hoisted. with var, you can use a variable before you declare it.

name = 'Taiwo'
console.log(name) // Taiwo
var name

Note: javascript only hoist declarations, not the initializations.

In the case of the code above, only the var declaration is moved to the top of the function, not the initializer attached to it (the 'Taiwo' part of var name).

let and const are also hoisted but they are hoisted differently compared to var. With let and const you can't use a variable until its declaration is processed.

name = 'Taiwo'
console.log(name) // ReferenceError: Cannot access 'name' before initialization
let name

let and const use the concept of Temporal Dead Zone(TDZ). It is a period within the code execution where the variable cant be used at all. Therefore, let and const variables exist in the TDZ from the start of their enclosing scope until they are declared. Meaning the variable cannot be accessible until it's been declared.

Conclusion

var has been deprecated. it is advisable to always use let in place of var to avoid unforeseen errors. And always use const to declare constants.

DEV Community: Bellotaiwo

CSS Specificity

Quick Summary

Specificity rankings

How to calculate specificity?

!important

More Specificity Rule

Conclusion

How to create a wrapper component in react.

Quick Synopsis:

What's a wrapper component in react?

Code example of a modal react wrapper component.

Conclusion

How to create a React tree view component.

Each node object has the following fields.

The TreeNode component incorporates the following.

This would be the result.

Variable Declaration in Javascript

Rules Guiding Variable Names

Declaring Variables

Const

Let

Block Scope

Redeclaration

Hoisting

Conclusion

The `TreeNode` component incorporates the following.