Forem: Rei Yoshizawa

How to Properly Use $refs for DOM manipulation in Vue.js

Rei Yoshizawa — Tue, 07 Jul 2020 05:41:58 +0000

Vue is one of the most beginner-friendly JavaScript frameworks I have ever used before. I have been using Vue for almost 2 years and I have no stress about creating and updating the Vue component.

However, right after I started using Vue I wondered how we could manipulate DOM inside a Vue file. This issue will be resolved by using $refs to access DOM. Many developers might get the same issue so that I decided to write today's blog post.

What is $refs and ref

So, I refer to it from the official Vue documentation.

$refs

https://vuejs.org/v2/api/#vm-refs

ref

ref is used to register a reference to an element or a child component. The reference will be registered under the parent component’s $refs object. If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be component instance: https://vuejs.org/v2/api/#ref

<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p>

<!-- vm.$refs.child will be the child component instance -->
<child-component ref="child"></child-component>

But, I can't understand it by checking the official documentation...

I have attached the details of both $refs and ref introduced by the official Vue.js Documentation. However, These are not kind enough for most of the developers who have never experienced using Vue.js.

That's why hopefully this blog post will be a valuable source to help to understand the core concepts about $refs.

How to use $refs and ref?

To clarify the difference between $refs and ref, $refs is the object and all the DOM elements are contained within this object.

But, $refs itself is useless. ref should always be registered in the HTML code to take effect $refs.

For example, to access to the DOM of the element which is set ref="slider", either this.$refs.slider or this.$refs['slider'] can be accessible to DOM.

In order to confirm the DOM of the one you are supposed to access, you can write console.log(this.$refs.slider) in mounted().

Then, the result of DOM will be displayed in the console of the dev tool as below.

Possible to DOM access using vanilla JavaScript, However...

Until now, I have explained about $refs for DOM access. But actually, you can even manipulate DOM by using vanilla JavaScript like document.querySelector('test').

If you only need to manipulate DOM of the current component, You could use vanilla JavaScript instead of $refs.

The reason why $refs can be prepared for Vue is that with $refs we can access the DOM of a parent and child component. Moreover, even DOM of the plugin will be accessible by $refs. With only vanilla JavaScript, It won't be possible.

2 things you should be considered before using $refs

Don't overuse $refs

Before adding $refs into the component code, Please take a deep breath and consider that you do really need $refs to achieve the expected behavior.

According to the basic concept of Vue.js, we should use Vue's features as much as possible rather than directly manipulate DOM. That's how Vue is welcomed for the developers. We were all fatigued direct manipulation of DOM using jQuery.

Don't forget adding `ref` to the element

To be honest, I have had this mistake several times. It looks so amateur mistake but It has happened it anyway. To make $refs be applied to the component, the ref must be set to the target element you want to call out.

Note that $refs and ref are the pair used for DOM manipulation.

Conclusion

I personally don't prefer to use or update the code which $refs are included in several parts. However, sometimes It happens for the Vue developers.

In addition, getting familiar with the specific feature of the daily used technology will eventually help to save your time a lot.

So hopefully, this blog post is worth reading and gaining someone's knowledge. Cheers for all the devs, Thanks!

Vue $listeners, $attrs are the handy way for passing event and data

Rei Yoshizawa — Tue, 30 Jun 2020 04:24:45 +0000

Today, I will explain about $listeners and $attrs of Vue. These features may probably be underestimated among developers despite the handy features since there is not enough information on the internet.

Try to search $listeners vue $attrs vue. You won't grasp the whole concept of $listeners and $attrs by reading and watching the information you find. I am the one who has been feeling that way. So I decided to contribute to helping other developers who can't fully understand that.

What is $listeners? How is it used?

So, the code will be below when the click event is required. Pretty basic code of handling event. This time clickHanlder is invoked when the button is clicked. Nothing is complicated.

<button v-on:click="clickHanlder"></button>

But how about this situation?

<inherited-child @click="sayHello"></inherited-child>

In this situation, the click event is not invoked in inherited-child. To make it possible, click event here should be passed to inherited-child.

Adding $listeners will resolve this problem.

<inherited-child v-on="$listeners"></inherited-child>

Now, sayHello function is successfully invoked when clicked. This is very straightforward. If you are a Vue developer, $listeners can be used more casually.

$listeners and v-bind="$attrs"

$listeners is used for passing the event to be invoked in a child component. As similar to $listeners, Setting v-bind="$attrs" in a parent component with props can be also used for passing data.

<inherited-child id="1" name="rei" v-bind="$attrs" @click="sayHello"></inherited-child>

Both id and name props are passed to inherited-child from the parent component. And the key point is it is not necessary to receive props in the child component.

 <div>
    <h1>Child</h1>
    <div>
      $attrs -> {{$attrs.id}}, {{$attrs.name}}
    </div>
  </div>

What kind of situation $listeners and $attrs would be useful?

I have explained about $listeners and $attrs by using an example of the parent&child components.

However, these can be more useful when you need to pass the event or data to a deeper hierarchy.

For example, In the situation below if we need to pass the event and data from A component to C component, $listeners and $attrs can be set in B component.

A component -> B component -> C component

Of course, Setting emit or props in the B component will also make it work exactly the same. However, It bothers you adding them in both B and C components.

In addition, That's not readable and also confuse the developers to update in the future. If the project has Vuex installed we could rely on storing data using that but otherwise, you could probably have an opportunity using $listeners and $attrs sometime soon.

Conclution

Vue has a lot of useful features but not all of the details are introduced carefully. Since utilizing features makes the project more concise, I will keep publishing these things to encourage especially beginners to write code more simple and clean. Thanks.

Reference

https://jsfiddle.net/nw2r8d63

Discard File Changes by VSCode Instead of git stash

Rei Yoshizawa — Thu, 25 Jun 2020 01:14:30 +0000

This is a small tip for anyone who uses git command daily.

How do you manage when you don't want file changes to be staged but need to checkout another branch?

I have usually cleared a branch by using git stash. git stash is not for discarding unnecessary files but for storing the file changes for just a temporary moment.

I knew that this way would not be ideal but didn't know the proper way of that.

Lately, I have found a much simple solution to discard file changes. Everyone should use that.

Discard file changes

Use Visual Studio Code
Select Sorce Control in the left option (with shortcut key, Control + Shift + G)
Click Discard All Changes

That's it! If you have specific files to discard, You only need to select that file.

I'm not familiar with this type of superpower of VSCode. If you know about VSCode tips to improve productivity, Please let me know. I would really appreciate it. Thanks!

Dynamic Components is A Great Vuejs Feature

Rei Yoshizawa — Tue, 23 Jun 2020 00:15:54 +0000

I have been using Vue for over 1.5 years now. I don't think I have known all the Vue features but I can at least share some knowledge about Vue.

Today's topic is about Dynamic Components of Vuejs. In my understanding, this feature is not widely taught in tutorials. However, This will be helpful to make the project more scalable and maintainable.

What is Dynamic Components?

As It's mentioned in the official Vuejs Documentation, Dynamic Components provide a simple way to switch dynamically each component. Since we don't need to add an either v-if or v-show, Code would be more concise and readable.

The gif image below lets you convince how Dynamic Components is a useful feature.

You can see the above code here

The basic concept is simple. In this case, currentTabComponent is a computed property that is updated every time the result of this property is changed. You can see how it works in the code.

<component v-bind:is="currentTabComponent" class="tab"></component>

  <script>
      Vue.component("tab-home", {
        template: "<div>Home component</div>"
      });
      Vue.component("tab-posts", {
        template: "<div>Posts component</div>"
      });
      Vue.component("tab-archive", {
        template: "<div>Archive component</div>"
      });

      new Vue({
        el: "#dynamic-component-demo",
        data: {
          currentTab: "Home",
          tabs: ["Home", "Posts", "Archive"]
        },
        computed: {
          currentTabComponent: function() {
            return "tab-" + this.currentTab.toLowerCase();
          }
        }
      });
    </script>

Multiple modals -> 1 modal + dynamic components

Dynamic Components itself is a simple feature as I have already explained it. No complicated trick involved. What I would like to share with you here is my specific story using this feature in the project.

So, I have recently had a task to update a canceling flow of our software. I won't tell the detail of that but note that the previous canceling flow was made by using multiple modals.

Although there were no bugs in it, I could have found a lot of duplicate codes. So I decided to switch this to only have 1 modal with dynamic components.

As a result, All the duplicate codes were gone and made it more readable. Less code, more maintainable. I think I have successfully completed the task.

Conclusion

Vue has various useful features to help develop more easily and keep adding great features constantly. I would like to share some techniques more and more.

I hope that this article would help your developer's life. Please ask me if you have any questions. Also Please let me know if you have some interesting thoughts about this feature or other features. Thanks!

18 Basic Git Commands Beginners Must Learn

Rei Yoshizawa — Tue, 16 Jun 2020 05:20:49 +0000

Understanding perfectly about Git must be almost impossible. I use Git command almost every day and still have the massive amount of Git commands I have never known about. when I get stuck in the errors related to Git in terminal then I just ask the internet. Fortunately, almost all of the problem which occurs to us have a solution on the internet.

What I want to say to you the most in this article (especially for the beginner developers) is that don't get overwhelmed by looking over the Git command list. I have recently heard the 80 20 rule in many different media. In that idea, It says that basically 20% of your activity will accomplish 80% of your objective. The idea can be totally applied to the Git command.

I even feel like I have only used less than 20% of Git commands. It means that you just have to learn a few Git commands. Now, are you feeling so relieved? In this article, I will show you the very basic Git commands you use on a daily basis as a developer.

git clone

$ git clone <url>

This command literally downloads the project as a clone in your folder. So you can work on the same project with your team members.

git branch

$ git branch

It simply shows all the branches you have ever created. The branch with the mark * attached at the beginning of the sentence is the one you are currently working on.

git checkout

$ git checkout <branch name>

This command will switch you to the branch you want to work on. Note that you don't leave the branch with the unstaged commits. Either complete git commit or git stash to clear it out in the branch before switching. That will help make the branch without unexpected errors.

git checkout -b

$ git checkout -b <new branch name>

You can achieve the exact same thing when you type git branch <new branch name> then git checkout <new branch name>. git checkout -b <new branch name> is just a short version of these commands. Developers love the way more productive no matter what. So why not using the command line of 1 line instead of 2 lines.

git add .

$ git add .

This command moves all the unstaged files to be staged. But note that these files which were updated need to be committed with git commit . Always remember you choose which changed files should be staged first then commit with the message what kind of changes is included within these changed files.

git add

$ git add <file name>

git add <file name> helps you choose the specific changed file to be staged. I just introduced about git add . as if the command is the only method to move the files to be staged but It's not.

With git add <file name>, It can avoid including the files which were accidentally updated with some reason. The reviewer feels so secured and happy to see the only updated files that you would like the reviewer to check without spending some time to figure out which files were actually updated.

git commit -m"message"

$ git commit -m"message"

Obviously this command is the essence of git commands. Developers use the version control system such as Git to update and store the data in an efficient way. git commit -m"message" commits all the staged files to be ready for pushing.

However, If you care about the quality of the commit messages you make, git commit -m"message" is not the only way.

git commit

$ git commit

Instead of heavily using git commit -m you better use git commit to create the solid and helpful commit messages to other developers.

Once you use git commit, the intimidating message is appeared. Don't worry. You can write a commit message with the detail information.

Click i to insert the message
After writing a commit message, select shift + :
Then select wq

Everything goes well if you follow the above order.

You may not notice how the commit messages are important to work as a team, and how each great commit messages helps the teams by keeping the helpful commit messages to the future team members and also yourself in the future.

Believe me, It's worth it.

git status

$ git status

This command may be the most frequently used within the Git commands. The command helps you in which files are updated and also currently on stage, ready to commit. Before using git add or git commit commands, It would be helpful to confirm which files are updated or on stage.

git stash

$ git stash

Sometimes you need to switch a branch to another one in the middle of working on some changes in the current branch. And your change is not completed, don't want to commit with this incompleted changes. if so, git stash let the current change on hold so you can go back to where you were working on whenever you want.

git stash list

$ git stash list

You can check all the stash you have already saved.

git branch -d

$ git branch -d

Once you finish updating the specific task, the branch might be useless. To delete the branch you simply usegit branch -d. If your branch has already been pushed and merged into the remote branch, It works.

git branch -D

$ git branch -D

As same as the previous command, This command is used for deleting a branch. This command works well regardless of its push and merge status.

git remote add

$ git remote add <remote name> <url>

In stead of the remote setting in Git, There is no way to send pull request to an existing GitHub repository. Set the remote url using git remote add. For instance, when you need an origin as a new remote you can type git remote add origin <url>.

Without a remote setting in Git, There is no way to send a pull request to an existing GitHub repository. Set the remote URL using git remote add. For instance, when you need an origin as a new remote you can use the command with git remote add origin <url>.

In addition to adding your own GitHub URL, It would be useful to add the other team member's GitHub URL as a remote directory, especially for a code review. Just pull your team member's branch and test it out in the local environment.

git remote -v

$ git remote -v

You can check all the remote URLs using this command.

git push

$ git push <remote name> <branch name>

After completing the commits, Just push to the remote URL.

git pull

$ git pull <remote name> <branch name>

As I mentioned about pulling the team member's remote branch in git remote add <remote name> <url>, git pull pulls the target branch. So you will have the same code that the target branch owns.

git cherry-pick

$ git cherry-pick <commit>

When PR has plenty of commits and you don't want all the commits to be included in PR, git cherry-pick will be helpful. At first, Create the new branch. Then git cherry-pick <commit>. After that that commit will be included in the branch you are working on.

This is a very useful command. It will save time especially when you struggle to fix the uncountable merge conflicts.

Summary

What I wanted to let you guys know in this article is that you don't need to worry about the complexity of Git more than necessary. I know Git is intimidating. I only know and use the limited Git commands at work but I'm still alive in this extremely fast speed industry.

Get a basic understanding of Git at first. Even if you encounter any issues, you can resolve most of them searching on the internet, I swear. Or Just ask your team members who are knowledgeable about Git.

I Prefer Using CSS Grid to Flexbox

Rei Yoshizawa — Tue, 02 Jun 2020 01:19:11 +0000

As a frontend developer, The way we achieve the layout of each section is significantly important. In other words, if you fully understand how to achieve the layout using CSS accurately and quickly, you will not encounter a big hurdle in your work in most cases.

In this article, I will share my knowledge about CSS Grid compared to Flexbox. The CSS Grid information is accessible in many blog posts, Youtube videos, tutorials, etc. I will try to focus on explaining that in a simple way as much as possible.

What is the difference between CSS Grid and Flexbox

CSS Grid is a two-dimensional system and Flexbox is one dimensional. Although Flexbox has the restriction to control the layout only for one dimensional, with CSS Grid you can easily set the position of items no matter how the layout is complicated.

You can achieve this layout with only 3 lines of CSS code using CSS Grid. I will show you the code for the above gif

.images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(auto, 400px));
  grid-gap: 32px;
}

<div class="images">
  <article>
    <img src="https://picsum.photos/400/225?random=1" />
    <h1>title</h1>
    <p>ultrices dui sapien eget mi proin sed libero enim sed faucibus turpis</p>
  </article>
  <article>
    <img src="https://picsum.photos/400/225?random=2" />
    <h1>title</h1>
    <p>ultrices dui sapien eget mi proin sed libero enim sed faucibus turpis</p>
  </article>
  <article>
    <img src="https://picsum.photos/400/225?random=3" />
    <h1>title</h1>
    <p>ultrices dui sapien eget mi proin sed libero enim sed faucibus turpis</p>
  </article>
  <article>
    <img src="https://picsum.photos/400/225?random=4" />
    <h1>title</h1>
    <p>ultrices dui sapien eget mi proin sed libero enim sed faucibus turpis</p>
  </article>
  <article>
    <img src="https://picsum.photos/400/225?random=5" />
    <h1>title</h1>
    <p>ultrices dui sapien eget mi proin sed libero enim sed faucibus turpis</p>
  </article>
  <article>
    <img src="https://picsum.photos/400/225?random=6" />
    <h1>title</h1>
    <p>ultrices dui sapien eget mi proin sed libero enim sed faucibus turpis</p>
  </article>
  <article>
    <img src="https://picsum.photos/400/225?random=7" />
    <h1>title</h1>
    <p>ultrices dui sapien eget mi proin sed libero enim sed faucibus turpis</p>
  </article>
  <article>
    <img src="https://picsum.photos/400/225?random=8" />
    <h1>title</h1>
    <p>ultrices dui sapien eget mi proin sed libero enim sed faucibus turpis</p>
  </article>
</div>

It's possible to make the exact same layout using Flexbox as below.

.images {
  display: flex;
  flex-wrap: wrap;
}

article {
  max-width: 400px;
  margin-right: 32px;
  margin-bottom: 32px;
}

With Flexbox, CSS will be a little bit more complicated. Both flex container and flex items need to include some CSS properties. To make code more maintainable, I personally prefer to substitute margin with CSS Grid properties for the layout as much as possible.

grid-gap is a great weapon for a responsive design

grid-gap is a useful property for responsive design. Nowadays most websites apply responsive design. Therefore a frontend developer should always consider the layout for multiple devices.

Responsive design sounds intimidating to the beginners but grid-gap can make your frontend development so much easier and you will never be afraid of responsive design.

grid-gap can be written as below.

.images {
  /* To set the same amount of gap to both dimensions */
  grid-gap: 32px;

  /* To set a different amount of gap to the vertical and horizontal dimension  */
  grid-gap: 16px 32px;
}

As I said in the previous topic, I personally don't prefer using margin for adjusting the layout. In the case of using Flexbox in the mobile view, in most cases, you need to add margin to the last flex item something like that.

article:last-child {
  margin-bottom: 0;
}

This is a kind of ugly code for me. Only setting margin to the last item is irregular and sometimes It may cause the confusion of development. With grid-gap code will be more readable and can prevent any confusion.

Frequently used CSS Grid patterns

Here, I show you the CSS Grid patterns that I have used often for the project.

The first one is the code for the gif that I have already shown in the first paragraph.

.images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(auto, 400px));
  grid-gap: 32px;
}

You can also achieve it switching auto-fill to 8 because this grid container contains 8 grid items. minmax(auto, 400px) is literally for setting min and max values for the width of the item so the width of these items won't be wider than 400px in this case.

Another CSS Grid pattern I have frequently used is the code below.

.images {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 16px;
  align-items: center;
  justify-content: space-between;
}

In this code, When the grid container only contains 2 grid items grid-template-columns will set the width of each item to either auto auto, or 1fr 1fr, or even a specific pixel such as 400px 400px. align-items and justify-content are available for both Flexbox and CSS Grid. These are not tricky properties. align-items manage the vertical position and justify-content adjusts the space between each item horizontally in this case.

Getting a grasp of the fundamental idea of CSS is not difficult. The easiest path to achieve that is playing around CSS Grid then eventually you will be comfortable working with CSS Grid.

In which case Flexbox should be used ?

No doubt that CSS Grid has more features than Flexbox but It doesn't mean you should always prioritize CSS Grid. When the items don't require the tweak of a gap and also the container is 1 dimensional I prefer to use Flexbox.

Also using both CSS Grid and Flexbox can't cause anything harmful to the project. With a mix of CSS Grid and Flexbox, Let's make the project more concise and great.

Conclution

I hope you guys have enjoyed my article. There is not the perfect way of writing CSS as same as any other programming language. However, I'm pretty sure that CSS Grid must be the smart choice to achieve each section under a grid container.

If you have any questions about CSS Grid or have an own way of writing CSS code different from the one I explained in this article, I would love to hear your brilliant idea.

As usual thanks for reading my article. Keep coding, devs!

Reference

https://picsum.photos/ \
Used for getting random pics

https://loremipsum.io/ \
Used for getting random sentences

5 Tips to Use BEM CSS Naming Convention Properly

Rei Yoshizawa — Tue, 26 May 2020 04:30:36 +0000

CSS seems pretty easy at first sight. But trust me, It doesn't. If you are a beginner as a frontend developer then CSS might be the biggest hurdle to complete your task. To make your life more comfortable as a frontend developer, I highly recommend you to follow the BEM naming convention.

As many of you know, BEM stands for Block, Element, Modifier. Bloc__Element--Modifier may be more recognizable for some people. For those who would like me to introduce BEM, I will refer this to you. the introduction of the official website for BEM. Please look over this official website of BEM.

However, To deeply understand how to use BEM for your project, no offence, but this official website is just useless compared to the official documentation of Vue.js, React, or other well-documented ones especially. You will obviously not use BEM properly if you only saw the official website of BEM or only know more or less about the keywords as Block__Element--Modifier.

In this article, I will talk about how to apply BEM properly since many developers may not know about including BEM into the project.

The way I use BEM was wrong

I can not remember when I started using BEM for a project. It probably was 2 or 3 years ago. Believe it or not, I have never reached the official website of BEM until last week. I do not blame myself about that since I found out this page is rather created for just a short introduction about BEM. not much new information was found.

BEM is not a framework or a library that shines brightly in the frontend world. In most cases, BEM is categorized as a principle.

While BEM does not force us to follow the strict rules. Some developers might have been kept considering about the proper way to use BEM.

So now I would like to suggest how to use BEM more efficient and maintainable way. Don't get me wrong that my opinion is not perfect. These are just my suggestions but I hope some of them could help you to rethink BEM and make your project better.

Don't do this: BlockElementElement or BlockElement--modifierelement

I am pretty sure some of you might have ever written BEM like this.

<div class="card">
  <p class="card__title"></p>
  <p class="card__subtitle"></p>
  <div class="card__body">
    <a href="card__body__link">
      <p class="card__body__title"></p>
    </a>
  </div>
</div>

With this BEM style, class name could be relatively long and hard for someone who do not have enough knowledge about the project and file structures to update CSS.

In the case you need to write the second element in the block, I would suggest writing BEM like this.

<div class="card">
  <p class="card__title"></p>
  <p class="card__subtitle"></p>
  <div class="card__body">
    <a href="card__link">
      <p class="card__linkTitle"></p>
    </a>
  </div>
</div>

If you prefer to use kebab case, code could be like this.

<a href="card__link">
  <p class="card__link-title"></p>
</a>

Keep following the rule, Block__Element--modifier. Instead of connecting an element to another element, you should always follow this simple rule.

Naming is definitely important

Naming is hard for anything. Not only for class name, id name, but also for variable, function or any kind of names. Take some time to let you convince yourself to add an appropriate class name to make it a great BEM structure. If you have no idea what kind of name would be appropriate for class names, Check this cheat sheet out. I have recently found this and It is simple and easy to understand.

Few suggestions for naming to the class name of HTML, I often use these as the class name of an element.

title, link, image, body, box, item, inner

Pretty simple and easy, isn't it?

The meaningful name is crucial

Some developers prefer to put shorthand names on the class names. That is not 100% a bad thing. Also, if the team has the specific naming rule which recommends to use shorthand names, that would totally be ok.

However, from my point of view, a meaningful names should be always preferred to a shorthand name.

<div class="card">
  <p class="card__ttl"></p>
  <p class="card__subttl"></p>
</div>

ttl stands for title, subttl should probably be for subtitle in this case. But what is the point of making it short? What if someone gets confused about the meaning of a word? Although putting Shorthand class names on class may reduce a tiny bit of bytes, a Meaningful name is always secured and understandable for everyone.

Deep nesting is not readable

Applying a CSS preprocessor such as Sass or less is standard in frontend. Nesting is one of the efficient features of these preprocessors. I have recently been keen to write clean code as much as possible and realized deep nesting (I suppose that more than 4 hierarchies could be called as deep nesting) is unreadable.

Look how deep nesting is not readable.

.card {
  &__title {
  }

  &__subtitle {
  }

  .cardBody {
    &__title {
    }

    .cardList {
      &__title {
      }
    }
  }
}

Instead, You should write code something like this

.card {
  &__title {
  }

  &__subtitle {
  }
}

.cardBody {
  &__title {
  }
}

.cardList {
  &__title {
  }
}

In the latter, when you get asked to fix styles you can reach to where the code should be updated without any hesitation. It would not only save developer's time but also prevent a possibility to occur a side effect which might have been caused by updating code.

Do not add !important to your code as much as possible

No wonder that if you are a frontend developer you have been ended up adding !important to code countless times. or you may even have added !important to the code which already important was assigned to many classes.

In my point of view, In most of the cases, the reason why we have to add !important is caused by having common styles in a root directory.

I remember the days I applied bootstrap to a project and somehow I was forced to add !important to some CSS instead of updating a default stylesheet of bootstrap.

I am not saying that having a common CSS is relatively bad. However adding common CSS without thinking about the whole project, would make CSS code being messy.

I don't recommend to customize BEM

BEM naming convention is just a principle and obviously we have no reason to follow all of them. For example, some people decide to add a class name something like that.

<button class="button">
  <i class="button_icon">
  <span class="button_title">
  <span class="button_body">
</button>

It just replaced a double underscore with a single underscore. That's not a big deal. However, a double underscore reminds me of BEM, undoubtedly. Even when a new employee joins a team and looks over the code for the first time, he or she realizes that BEM is applied to this project without asking a team member.

So that there is no point to let BEM rules customize to be your original way. Always care about how the other developers feel when updating your code. Don't make your team member get confused.

Conclusion

Not so many frontend developers try to explore about a naming convention. Without organizing code, the bigger the project goes the less organized the code would be. So that organizing code makes a massive impact on the project to reduce refactoring time and team member's stress.

I introduced BEM to you since I have never encountered any CSS naming convention more convincing than BEM. BEM is simple, easy to understand, and more importantly maintainable.

I hope this post will help you write CSS code. If you have any questions or opinions about the post, please feel free to reach to my social account or email. Especially if you know a great tip to be a productive way of writing CSS more, I would love to hear that. Thanks!

Forem: Rei Yoshizawa

How to Properly Use $refs for DOM manipulation in Vue.js

What is $refs and ref

$refs

ref

But, I can't understand it by checking the official documentation...

How to use $refs and ref?

Possible to DOM access using vanilla JavaScript, However...

2 things you should be considered before using $refs

Don't overuse $refs

Don't forget adding ref to the element

Conclusion

Vue $listeners, $attrs are the handy way for passing event and data

What is $listeners? How is it used?

$listeners and v-bind="$attrs"

What kind of situation $listeners and $attrs would be useful?

Conclution

Reference

Discard File Changes by VSCode Instead of git stash

Discard file changes

Dynamic Components is A Great Vuejs Feature

What is Dynamic Components?

Multiple modals -> 1 modal + dynamic components

Conclusion

18 Basic Git Commands Beginners Must Learn

git clone

git branch

git checkout

git checkout -b

git add .

git add

git commit -m"message"

git commit

git status

git stash

git stash list

git branch -d

git branch -D

git remote add

git remote -v

git push

git pull

git cherry-pick

Summary

I Prefer Using CSS Grid to Flexbox

What is the difference between CSS Grid and Flexbox

grid-gap is a great weapon for a responsive design

Frequently used CSS Grid patterns

In which case Flexbox should be used ?

Conclution

Reference

5 Tips to Use BEM CSS Naming Convention Properly

The way I use BEM was wrong

Don't do this: Block__Element__Element or Block__Element--modifier__element

Naming is definitely important

The meaningful name is crucial

Deep nesting is not readable

Do not add !important to your code as much as possible

I don't recommend to customize BEM

Conclusion

Don't forget adding `ref` to the element

Don't do this: BlockElementElement or BlockElement--modifierelement