Showing posts with label CSS. Show all posts

BEM methodology in HTML and CSS

The Block, Element, Modifier (BEM) methodology is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between HTML and CSS in a given project. Here’s how it works:

Block: A top-level abstraction of a new component (e.g., a button). It acts as a parent and is represented by a class like .btn.
Element: Child items placed inside the block. They are denoted by two underscores following the block’s name (e.g., .btn__price).
Modifier: Changes the style of the block without affecting unrelated modules. Modifiers are appended with two hyphens (e.g., .btn--orange).

By following BEM, developers can create reusable components, easily see existing modifiers and children, and maintain consistent naming for better communication within the team.

References:

https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/
https://css-tricks.com/bem-101/
https://en.wikipedia.org/wiki/CSS

How to declare two classes for element with SCSS?

Below is an example of SCSS code using that we are generating two classes that are being use for the same html element.

SCSS code

.image-text {
@media(max-width:600px){
        &--celebrate-page .image-text {
            &__htext.image-text__htext {
                
                &--v {
                    &-center {
                        margin-top: -20%;
                    }
                }
            }
        }
    }
}

Result in CSS

@media (max-width: 600px) {
	 .image-text--celebrate-page .image-text__htext.image-text__htext--v-center {
		 margin-top: -20%;
	}
}

Responsive and rich accordion design

Responsive and rich accordion design using HTML and CSS:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #A678CF;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-top: 1px dotted #0069b9;
  margin: 5px 0 0 5px;
}

.accordion:before {
  content: '>';
  color: white;
  font-weight: bold;
  float: left;
  margin-right:10px;
  margin-left: 0px;
}

.active:before {
  content: "^";
}
.active, .accordion:hover {
  background-color: green; 
}

.panel {
  padding: 0px 18px;
  margin-left: 25px;
  margin-right: -5px;
  display: none;
  background-color: green;
  overflow: hidden;
  color: white;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>

Accordion component

rashid jorvee blog

Menu

BEM methodology in HTML and CSS

References:

How to declare two classes for element with SCSS?

SCSS code

Result in CSS

Responsive and rich accordion design

Featured Post

Social Media and Its Effects on Human Brain Health

Author