Introduction to BEM Methodology



INTRODUCTION TO BEM METHODOLOGY:

                From the earlier post, we get to know what CSS Architecture is and why we need that. If you have not taken a look, I would have recommended you to peer at that once.

What is methodology? In simple terms, naming the CSS selectors in a particular way.


This very day, the developers are using various methodologies with an ultimate aim of reducing the CSS code and making our CSS more maintainable. As mentioned in the earlier post, as the size of the team and project grows, basic type of styling would mess up everything.


BEM methodology is mainly used to speed up the development process and ease teamwork by arranging the CSS classes into independent modules.


BEM => Block Element Modifier.


This is not any kind of coding language or dependencies or logic or libraries that need to be perfect and  be downloaded. This is just to declare a CSS class.


*Note: This methodology is applicable only for classes since ID should not repeat*


‘B’ - Block:


DECLARATION: .block-name


    EXPLANATION: 

A Block is an object in our website. Think of it as the parent in the DOM tree.  For example, in HTML, we have the most common blocks like header, main, footer, content, sidebar. 

For instance, take a card. Now the card is an object, that is, it is the block    now. Therefore, it should have the class name like “. card”.


'E' - Element:


    DECLARATION: .block-name__element-name


    EXPLANATION:

         Now this element performs a particular function in a block. Proceed with our previous example. In that case, ‘.card’ is the block. Now the card may have a  title. This can be declared as ‘.card__title’.



'M' - Modifier:


    DECLARATION: .block-name__element-name--modifier-name


    EXPLANATION:

         Now this modifier works for both Block and element. There is only one very critical rule in BEM methodology - “A modifier cannot be used outside of the context of its own”.  For instance, again card may have two buttons, but these buttons have the same material properties having slight changes in their font color and background.  This can be defined in a class like “.card__btn--lg  and .card__btn--sm”. This should be used along with “.card__btn”.

 

There are two ways that we can follow:


1.Harris Roberts Style:

“.block-name__element-name--modifier-name” 

2.Pascal Case:

".BlockName__ElementName--ModifierName”

   There are a few others too. But my most favorite is Harris Robert Style of naming the class which has the following rules

  • Names are lowercase

  • Words within the name separated by ‘-’

  • Element starts with ‘__’ (Two underscores)

  • Modifier starts with ‘--’ (Two hyphens)

 

This approach is most commonly used in SASS files. We'll see about SASS in further posts. To continue with our jottings, I would recommend you to get along with our posts to boost up your computer science knowledge.

Comments

Post a Comment

Popular posts from this blog

MULTIMEDIA

Image
  These days, most of us carry a fully functional multimedia studio around in our smartphones says Austin Kleon . We people  really wanted to engage with our own generation, one that is increasingly speaking in an audio/video multimedia language.  Multimedia is an effective way to communicate and share the ideas with users. W hat is multimedia??.... In what ways are they used ??.. Well, The proper definition of multimedi a is a computerized method of presenting information combining text, audio, video, graphics and animation . As the name suggests it is the combination of multi and media that different types of hardware and software tools  are used for communication of information. Let us see some examples related to multimedia from the bricks to the brains; ·         The text we see in books, newspapers or any means of media ·         The sound we hear when we listen to music ·         The graphics we see in science fiction movies ·         Ads placed in newspapers by busi
Read more

Exploring The Hidden Internet

Image
What is the internet to us? Facebook, Instagram, Twitter, Youtube, Amazon, Flipkart, and many more websites, That's it? Well, no! The most fascinating and shocking fact is that the internet we use each day is just 4%. In this article, we are going to learn about the mysterious side of the internet.  Curious? Let's head on to our topic. Introduction The Internet is a vast network that connects all the computers across the globe which enables people to share information as well. The internet pieces of information are broadly classified into three types : Surface Web Deep Web Dark Web Surface VS Deep VS Dark Web Let's imagine the internet like a glacier. As we know the visible part of the glacier is small but the non-visible parts of the glacier under it are too deep. SURFACE WEB: The surface Web is often compared to the top of the glacier which is small, visible, and can be accessed easily. In other words, the Surface Web is simply the internet we use in our daily life. The s
Read more

SKINPUT TECHNOLOGY

Image
Touch screens may be popular both in science fiction and real life as the symbol of next-gen technology, but an innovation called Skinput suggests the true interface of the future might be us “Skinput” turns body into touch screen interface. The founders of this great technology  is Microsoft and Carnegie Mellon University. By the way, what do skinput technology mean?....           Skinput is a technology that appropriates human body for acoustic transmission, enabling the skin to be utilized as an input surface.           This technology allows human hand and arm as touch screens, by sensing various low-frequency vibrations and sounds that are generated by touching different part of the hand or arm.           These signals are sensed using various sensors worn on the arm in the form of arm band. "The arm band is a crude prototype, the next generation could be made considerably smaller – likely easily fitting into a wristwatch." From there it's fairly simple to
Read more