Solving Basic Merge Conflicts in Project Styles

1. What is a Merge Conflict?

Imagine you and a colleague are both editing the same sentence in a shared document. You change the sentence to say "The sky is blue," and your colleague changes it to "The sky is azure." When you try to combine your work, which version should be saved? It's ambiguous.

This is exactly what happens during a Git merge. When you merge one branch into another, Git compares three things in a process called a "3-way merge":

1. The tip of your current branch (your changes).
2. The tip of the branch you're merging in (the incoming changes).
3. Their most recent common ancestor commit (what the code looked like before either of you made changes).

If both you and the other branch have changed the same lines of code relative to that common ancestor, Git doesn't know how to automatically combine them. It flags a merge conflict and pauses the merge, waiting for you to resolve it.

To get a clear mental model of this "common ancestor" or "base," let's watch a short clip.

This diagram illustrates the scenario well. Two branches diverge from a common point, and a conflict arises when they are brought back together.

2. Hands-On: Let's Create a Conflict

The best way to learn how to solve a problem is to create it yourself in a controlled way. We'll simulate a common scenario in your personal profile project where two branches modify the same CSS rule.

Make sure you are in your project directory in the terminal and on the main branch.

Step 1: Create a feature branch and make a change.
Create a new branch to work on a hypothetical style change.

# Make sure you are on the main branch and it's up to date
git checkout main




# Create and switch to a new branch
git checkout -b update-header-color

Now, open styles.css and change the background color of your header. For example:

/* In styles.css */
header {
  background-color: #4A5568; /* A dark gray-blue */
  color: white;
  padding: 1rem 0;
  text-align: center;
}

Commit this change on the update-header-color branch:

git add styles.css
git commit -m "feat: change header background to gray-blue"

Step 2: Make a conflicting change on the main branch.
This simulates another developer's work being merged while you were busy on your feature branch.

git checkout main

Now, open styles.css again. Notice the background color is back to what it was before. Change the same property to a different value.

/* In styles.css, on the main branch */
header {
  background-color: #2D3748; /* A darker gray */
  color: white;
  padding: 1rem 0;
  text-align: center;
}

Commit this "conflicting" change on the main branch:

git add styles.css
git commit -m "fix: update header to a darker background"

Step 3: Attempt the merge and trigger the conflict.
You are now on the main branch, and you want to merge the work from your feature branch.

git merge update-header-color

Your terminal will output something like this:

Auto-merging styles.css
CONFLICT (content): Merge conflict in styles.css
Automatic merge failed; fix conflicts and then commit the result.

Congratulations, you've successfully created a merge conflict!

3. Resolving the Conflict with VS Code

Now for the main event. Don't worry, VS Code makes this process very visual and straightforward.

When you open styles.css or look at the Source Control panel in VS Code, you'll see the conflict clearly marked.

Git has inserted special markers into the file to show you the conflicting sections:

• <<<<<<< HEAD: Everything below this line until the ======= is the code from your current branch (main).
• =======: This separates the two conflicting blocks of code.
• >>>>>>> update-header-color: Everything between the separator and this line is the code from the incoming branch.

VS Code provides helpful "CodeLens" buttons above the conflict block:

• Accept Current Change: Keeps only the code from the main branch.
• Accept Incoming Change: Keeps only the code from the update-header-color branch.
• Accept Both Changes: Keeps both blocks of code, one after the other. (This is rarely what you want for CSS properties).
• Compare Changes: Shows a side-by-side diff view.

To resolve our conflict, simply decide which color you want. Let's say we prefer the darker gray from the main branch.

1. Click Accept Current Change.
2. VS Code will automatically update the file, removing the incoming change and all the conflict markers (<<<, ===, >>>).
3. Save the styles.css file.

Now, you need to finalize the merge by telling Git you're done.

1. Stage the resolved file: In the terminal, run git add styles.css. You can also do this from the VS Code Source Control panel by clicking the + icon next to the file.
2. Commit the merge: Run git commit. VS Code will open a new tab for the commit message. Git provides a default message like Merge branch 'update-header-color'. This is usually sufficient. Just save and close that tab to complete the commit.

That's it! You've resolved the conflict. Your main branch now includes the changes from both branches, with your manual resolution applied.

For a full video walkthrough of this entire process, check out the following resource.

4. Advanced Tools and Further Reading

For simple conflicts like our example, the inline editor is perfect. For more complex situations where changes are interleaved, VS Code offers a powerful 3-way merge editor. This gives you a dedicated interface with three panes: Incoming, Current, and the final Result, giving you more control.

Finally, for a comprehensive text-based guide that you can bookmark for future reference, the official VS Code documentation is an excellent resource.

Conclusion

Excellent work! You've successfully navigated what is often a frustrating experience for developers. By understanding that conflicts are a normal part of collaboration and by knowing how to use your tools to resolve them, you've added a crucial skill to your developer toolkit.

Key Takeaways:

• A merge conflict occurs when Git can't automatically combine changes made to the same part of a file on different branches.
• Git marks conflicts with <<<<<<< HEAD, =======, and >>>>>>> branch-name markers.
• VS Code provides a user-friendly interface with buttons like "Accept Current Change" and "Accept Incoming Change" to resolve conflicts quickly.
• The resolution process is: resolve the conflict in the file, save it, stage it (git add), and commit the merge.
• If you ever feel overwhelmed, you can cancel the merge with git merge --abort.

In the next lesson, you'll begin the Mini Project for this module. You'll get to apply everything you've learned about the CSS box model, Flexbox, Grid, and responsive design to fully style your personal profile site. Now, if you use branches for different parts of the project and a conflict arises, you'll be ready to handle it with confidence.