DEV Community: Aditya Agrawal

BEM methodology in CSS

Aditya Agrawal — Sun, 13 Dec 2020 18:58:54 +0000

BEM or Block, Element, Modifier is a popular and effective naming convention for classes in HTML and CSS. The main purpose of BEM is to provide developers more clarity, scalability, and easy reusability in code.

What is BEM style?

Classes named in context of BEM convention will look like below code snippet :

/* Block component or parent */
.link {}

/* Element or child item */
.link__primary {}
.link__secondary {}

/* Modifiers that style the block */
.link--active {}
.link--color {}
.link-bg-green {}

The block component .link is like a parent element. All of the child elements of this block should have a name like .link__primary, notice the two underscores followed by block name. Now, modifiers style the block element and they are written like .link--active, these modifiers are named by putting two hyphens after the block element.

The above code is easily readable to other developers, they can easily tell which classes are doing what. In simpler words, BEM gives everyone in the team easy accessibility as the syntax is very declarative, the team members don't need to scratch their heads to know which components are doing what. One main problem that BEM resolves is the fear of changing CSS code, yeah you heard it right. One change in bad codebase can crash the entire component because CSS just goes level by level, it doesn't have a good nature. So it is better to prepare for the chaos and BEM is an antidote to this chaos.

More reasons to consider BEM

You will have more confidence in your styling because it doesn't break easily and this is a good factor to look upon.
Everything is a class and nothing is nested.

This makes CSS specificity very very low, so you don't have to worry too much about specificity while styling.

The scalability of the codebase will increase because it can be easily modified and maintained in the future. Also, the reliability of code and trust of the team members improves a lot if the interface is maintainable. This is a good point for beginners.
BEM naming conventions are customizable until you don't kill the core idea behind it. You can give it your own flair but other developers should find it easy to read.
BEM is modular in nature, you can easily use previous block styles in a new project. This feature can save a lot of your time.

Wrapping up

It is fair to say that BEM solves a lot of our problems and is a good habit to have as a developer. There are also other methodologies like OOCSS, SMACSS, SUITCSS. Every one of these has its own advantages and limitations including BEM, feel free to check them out. In the end, it depends on the developer's preference but one should not compromise on the maintainability of code.

That's it from me, I hope it helps someone who is new to CSS or someone who is afraid of writing CSS. Tell me your thoughts in the comments!

Get out of tutorial hell

Aditya Agrawal — Fri, 27 Nov 2020 08:20:41 +0000

NOOOO, ANOTHER ARTICLE ABOUT TUTORIAL HELL!!

I'm sure all of you have read a post on this topic at least once in your developer journey but it just doesn't happen because coding is not that easy as people say. Here, I will be talking about eight points which will help you to get out of hell.

Don't code with tutorial

The problem with coding along with the tutorial is that you don't develop the muscle memory and thinking in programming. My mentor Tanay Pratap says learn programming before learning to code, learn how to think while coding.
Take notes while watching/reading the tutorial and code later. Don't take help from the program until you're stuck for a long time.

Make habit of reading documentation

Documentation is the best resource to find the solution because it's like a book where you'll find every aspect of the technology you're working on. It's boring and hard to read the documentation but good habits don't come easily. You have to scratch your head and get your hands dirty. Period.

Surround yourself with people smarter than you

There is a saying that you're an average of 4-5 people you surround yourself with. Your social environment matters more than you think, so it's better to surround yourself with people smarter than you. Join a smart community, it will add great value to your thinking process and you'll get to know insights into the field you want to work in.

Read books

Nothing can ever replace the beauty of a great book. In this time of videos/tutorials, books are often left behind and their knowledge is not utilized. The habit of reading books is powerful as they talk to you slowly and deep dive into the concept, tutorials don't cover this idea.

Stick to one tech stack

I see a lot of newbies hopping into different technologies every month, this practice is neither good nor fruitful. It will constantly give the feeling of being overwhelmed by the different technologies available. Pick one tech stack which has remained popular for some years and will land you a job in the market. Don't go with the hype, do your research first.

Start small and easy

Don't go to make a complex app straight away, you will forget how it works after a few months. Start small and build on your own, this will boost your confidence in the initial months of your journey. Progress slowly. Prepare yourself for the marathon, not for the sprint.

Picking projects and art of googling

As you start to build medium to large apps, it becomes necessary to pick different kinds of projects that will make your resume stand out among your peers.
Problems will arise when you step out of your comfort zone, hence you spend a lot of time googling your problems. Learning the art of googling your problem is an important skill. Read more about it, you know where :p.

Beauty is in the attempt

Yes, beauty is in the attempt.
Don't think too much before starting a project, don't feel overwhelmed, don't think that you can't do it, don't think that you're incapable.
If you don't attempt, you will never know. So go for it and step out of your comfort zone because that's where you will find good things waiting for you.

I went through all of these problems when I started because it is easy to get lost when you don't know how to learn. Follow these habits because as renowned author James Clear says - When talent is lacking, habits will often suffice.
That's all from my side, happy coding!

Perks of writing a good README file for beginners

Aditya Agrawal — Thu, 26 Nov 2020 16:55:19 +0000

This is an article about READMEs.

First things first, why I am talking about READMEs here?

A README is probably the first thing consumer sees on the repository, so as the author of the module it is our responsibility to show them exactly what they need and how can our module fulfill their need. Our job is to:

a) tell them what it is
b) show them what it looks when it's live (a demo gif may work here)
c) show them how they use it
d) tell them any other relevant details

Feeling lazy, sorry dude!

NO README, NO ABSTRACTION 💁‍♂️

If you don't put a satisfactory README then developers have to look and deep dive into your code which is not a pretty thing to do in my opinion. The developers or consumers want to see your working module before they look into your code so it's better to use a little abstraction.

Okay, I will write one but how to write it?

Here it goes 👇

Project title
A little info about your project and what it is about.

Features
Tell the consumer about the unique features of your module and how it will solve their problem.

Tech Stack
Mention all the technologies you used in the project.

Demo
Add screenshots and demo gif of your working module. Trust me, this will add good value to your module.

How to use
Create a simple and easy to understand guide for consumers if they wish to interact with your working project.

API Reference
If you're using an API in your projects, tell the consumer what it does, and add a link to API docs if needed.

Above mentioned points are enough for beginners who are starting their coding journey. You should keep in mind that adding links, demo, images, references, and interactivity will make you a better developer.

Some resourceful links coming your way 🚀

Articles

1) "Art of Readme - Learn the art of writing quality READMEs" - Stephen Whitmore

2) "How To Write A Great README" - Caleb Thompson

Examples of awesome READMEs

1) aimeos/aimeos-typo3 - Project logo. Clear description of what the project does. Demo screenshot. TOC for easy navigation. Easy installation and setup sections with screenshots. Links for further reading.

2) ai/size-limit - Project logo, clear description, screenshot, step-by-step installing instructions.

3) iharsh234/WebApp - Project landing page. Clear description of what the project does. Demo screenshot. Simple install and usage sections. Includes an examples section with common uses and a mobile demo section.

That's all folks, hope it helps the new comers!