CSS Styles - Refactoring

The example scripts can be found in Book 1 - Programming Step by Step and More.

Book 1 is for sale on Amazon

Exercise 1: Simplifying CSS Selectors

Code Refactored code
Before Simplifying CSS Selectors
.container .header .title {
font-size: 24px;
color: blue;
}
.container .header .subtitle {
font-size: 18px;
color: green;
} 		.title {
font-size: 24px;
color: blue;
}
.subtitle {
font-size: 18px;
color: green;
}

The selectors .container .header .title and .container .header .subtitle have been simplified to .title and .subtitle.

Exercise 2: Remove Duplicate CSS Code

Code Refactored code
Before Removing Duplicate CSS Code
.btn-primary {
background-color: blue;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
.btn-secondary {
background-color: green;
color: white;
padding: 10px;
border: none;
cursor: pointer;
} 		.btn {
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
.btn-primary {
background-color: blue;
}
.btn-secondary {
background-color: green;
}

In this Example 2, the `btn-primary` and `btn-secondary` selectors are simplified by a single `btn` style. This style groups the specifications that apply to both buttons while distinguishing those that are specific to each—such as the differences in background color between `btn-primary` (blue) and `btn-secondary` (green).

Exercise 3: Refactor JavaScript Functions

Previous Code
button onclick=
"showMessage1()">
Click me
function showMessage1() {
let message1 = "My, World!";
alert(message1);
}
Refactored Code
Reuse the function for different messages. button onclick=
"showMessage
('Hello, World!')"
Click me
button onclick=
"showMessage
('Goodbye, World!')"
Click me too
function
showMessage(message) {
alert(message);
}


The original showMessage() function has a limited application: displaying the message "Hello, World!".
Upon modification, the showMessage(message) function has been configured to accept a message argument, allowing it to print different messages depending on the specific argument provided.
In this example, clicking the buttons executes the function, enabling the display of multiple different messages using that same function. In this way, its functionality has been enhanced.

Exercise 4: Resource Load Optimization

Code Refactored code
Before Optimize the loading of CSS and JavaScript resources
link rel="stylesheet" href="styles.css">
script src="script.js"> /script>
/head>
body>
h1>Welcome/h1>
/body>
 link rel="stylesheet" href="styles.css">
/head>
body>
h1>Welcome /h1>
script src="script.js" defer>/script> /body>

The script containing the `script.js` file has been moved to the end of the `body`, as this is a common practice in web development for several reasons:
a - Improves page load speed.
b - Ensures page performance.
c - Allows full access to the DOM.
d - Avoids dependency issues.

In summary, the execution of the JavaScript code within the included file requires that the page's logic has fully loaded.

These effects will be demonstrated throughout this tutorial.

Exercise 5: HTML Simplification

Code Refactored code
Before Optimize the loading of CSS and JavaScript resources
div id="content">
div class="post">
h2 class="post-title">Title 1
p class="post-content">Content 1 /p>
/div>

div class="post">
h2 class="post-title">Title 2
p class="post-content">Content 2 /p>
/div>

div class="post">
h2 class="post-title">Title 3
p class="post-content">Content 3 /p>
 div id="content">
article class="post">
h2 class="post-title">Title 1 /h2>
p class="post-content">Content 1 /p>
/article>

article class="post">
h2 class="post-title">Title 2 /h2>
p class="post-content">Content 2 /p>
/article>

article class="post">
h2 class="post-title">Title 3 /h2>
p class="post-content">Content 3 /p>
/article>

Replacing the `div class="post">` tag with `article class="post">` in an HTML document offers several advantages, particularly in terms of semantics and accessibility. Here are some of the key advantages:
a - The `article>` tag is semantically significant and specific to content that is independent and self-contained—such as a blog post, a forum comment, a product listing entry, etc.
b - Semantic tags help assistive technologies determine the purpose of each section of the content.
c - Semantic tags, such as `article>`, signal to search engines that the content is meaningful and relevant, which can improve ranking in search results.
d - CSS selectors and DOM manipulations in JavaScript can be more meaningful when semantic tags are used.
e - Semantic tags help ensure that content is presented in a consistent and logical manner.

Exercise 6: Using CSS Variables

Code Refactored code
Before Use CSS variables to avoid repetition.
body {
background-color: #f0f0f0;
color: #333;
}
.header {
background-color: #f0f0f0;
color: #333;
padding: 10px;
}
.footer {
background-color: #f0f0f0;
color: #333;
padding: 10px;
} 		:root {
--bg-color: #f0f0f0;
--text-color: #333;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
.header, .footer {
background-color: var(--bg-color);
color: var(--text-color);
padding: 10px;
}

Code Functionality

a - Style Consistency: By using CSS variables, color consistency is ensured throughout the entire document. If the background color or text color needs to be changed, one simply needs to update the value of the corresponding variable within `:root`, and all elements utilizing those variables will update automatically.
b - Ease of Maintenance: CSS variables facilitate code maintenance. Changing background and text colors across multiple elements is simplified, as it is only necessary to modify the values ​​in a single location.
c - Reusability: CSS variables allow for the reuse of the same values ​​in different parts of the document, preventing code duplication and reducing the likelihood of errors.
d - Clarity: The use of variables makes the CSS more readable and understandable, as variables can be assigned descriptive names that clearly indicate their purpose.