Common CSS Methodologies and BEM

Karthik-Prabhu-kp — Tue, 15 Dec 2020 17:41:41 +0000

When we code small sites it usually does not matter how we organize the styles. However, when it comes to larger, more complex projects, how you organize your code is the key to efficiency in at least these three ways: it affects how long it takes you to write code, how much of that code you’ll have to write and how much loading your browser will have to do.

What is a CSS Methodology?

A CSS methodology is a set of guidelines for writing modular, reusable and scalable code.

some of the common CSS Mythologies.

Object-Oriented CSS (OOCSS)

In OOCSS the structure is separated from the skin. The methodology makes a clear distinction between content and its containers.

Atomic CSS

In this method we define single-purpose class selectors for every reusable declaration. In other words create a class selector for every repeating CSS declaration. This allows ease in maintaining consistent code and not having to invent classes for components requiring a single CSS rule.

Scalable and Modular Architecture for CSS

SMACSS works by dividing CSS into five categories – base, layout, module, state and theme – commonly split into separate files.SMACSS provides well-organised CSS code split logically across multiple files.

BEM

BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copying and pasting.

Example of classes named with BEM convention below:


/* Block component */
.btn {}

/* Element that depends upon the block */ 
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}

The block component .btn is like a parent element. All of the child elements of this block should have a name like .btn__price, written with two underscores after the block element. Style is applied to the block element like
.btn--orange, written with two hyphens after the block element.

Why BEM ?

BEM is easier to understand than some some of the others above but still provides us the good architecture we want and with a recognizable terminology. Some advantages include:

1)If we want to make a new style of a component, we can easily see which modifiers and children already exist.

2)We can quickly get an idea of which element depends on another (in the previous example we can see that .btn__price depends on .btn)

3)Provides Modularity ,Reusability and Structure.

4)BEM gives everyone on a project a declarative syntax that they can share so that they’re on the same page.

Version control and Git

Karthik-Prabhu-kp — Sun, 13 Dec 2020 19:11:34 +0000

While we start to learn coding one term we hear a lot about is git and github and importance of version control. In this blog post i try to illustrate why version control is important in the industry.

What is a version control ?

Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. In simple terms when multiple people work on a code/file it helps you track all the changes made to that code/file and by whom it was made, it also allows you to move back to a older version in case you break the code.

Types of version control.

Local Version Control Systems.

Local version control system maintains track of files within the local system. This approach is very common and simple. This type is also error prone which means the chances of accidentally writing to the wrong file is higher.

Centralized Version Control Systems.

In this approach, all the changes in the files are tracked under the centralized server. The centralized server includes all the information of versioned files, and list of clients that check out files from that central place.This helped with collaboration among developers on different machines but its downside was the single point of failure that the centralized repository represents if it goes down during that period collaboration and saving versioned changes is not possible.

Distributed Version Control Systems.

In this system clients don’t just check out the latest snapshot of the files; rather, they fully mirror the repository, including its full history. Thus, if any server dies, and these systems were collaborating via that server, any of the client repositories can be copied back up to the server to restore it. Every clone is really a full backup of all the data.

Popular version control systems.

1) SVN

Apache Subversion and is a popular version control system tool. It is a centralized version control system and is system distributed and collaborated with open source license.

2)Mercurial

Is free and open source distributed revision control system.This subversion control is well suited to scripting tasks with languages like Python and PHP.

3)Git

Git is the distributed version control system and has an emphasis on speed and performance. It is supported by all operating systems. Git is open source software and the most widely used modern version control system.

Why git?

Branch Workflow

One of the biggest advantages of Git is its branching capabilities. Unlike centralized version control systems, Git branches are cheap and easy to merge. This facilitates the feature branch workflow popular with many Git users.

Pull requests

A pull request is a way to ask another developer to merge one of your branches into their repository. This allows to keep track of changes and allows for discussions before integrating it with the rest of the codebase.

Community

In many circles, Git has come to be the expected version control system for new projects. If your team is using Git, odds are you won’t have to train new hires on your workflow, because they’ll already be familiar with distributed development.

Some frequently used git commands

git init - Used to create a local repository. Creates a .git subdirectory in the current working directory

git add filename - Adds the file to the repository.

git commit -m "commit message" - This will commit the changes made to the local repository.

git push origin master - uploads local repository content in the master branch to a remote repository.

git checkout - Used to change between branches.

Thank you for reading ! Hope you find this post useful and informative. Please leave suggestions and feedback on comments section. :)

DEV Community: Karthik-Prabhu-kp