Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

You Probably Need BEM CSS in Your Life (Tutorial)


Started by -  |  Views: 135 | Comments: 0   

Today, we're going to cover the BEM method for writing CSS. BEM is an acronym for Block Element Modifier, and it's an approach to defining and structuring your CSS. When you're dealing with medium to large size projects, it helps you develop a maintainable code base and one that doesn't run into issues with specificity. While this is a beginner's level tutorial, we will be jumping into more intermediate and advanced tutorials later on down the road.

Codepen demo for this tutorial:
https://codepen.io/designcourse/pen/KKwjKNE

 




User Feedback


There are no comments to display.



Guest
Write a comment

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By ©Jimi Wikman
      One of the best ways to learn is to find fun designs on existing websites and to try and recreate them, so with that in mind, we're taking the animated card design from the Top Games section over at https://popdog.com and seeing if we can recreate it with only HTML and CSS!
      /// Timestamps
      00:00 - Introduction 01:17 - Overview 02:18 - HTML 13:57 - CSS basic setup 15:35 - styling the front 28:24 - front and background hover 38:15 - animating the game name 42:43 - the rank 46:33 - styling the back 60:14 - fixing the spacing 65:31 - fade-up and in for the back
    • By ©Jimi Wikman
      Understaning how block, inline, and inline-block each behave is very important when learning CSS, as well as knowing why you might want to switch the display property of an element every now and then.
    • By ©Jimi Wikman
      While all the combinators are useful from time to time, but the adjacent sibling selector is easily the one I use the most often. It has a several really good uses, a few of which I'll be diving into in this video!
    • By ©Jimi Wikman
      In this cartoon effect Photoshop tutorial, you'll learn how to make cartoon in Photoshop without using the pen tool. at the end of the tutorial you'll be able to know how to cartoon yourself in Photoshop and also you can cartoonize any photo with the same previous method. you also can download a cartoon Photoshop action from the description below (for Patrons only). Let's start turning any photo to cartoon effect now. Don't forget the LIKE & SUBSCRIBE for the upcoming tutorials.
    • By ©Jimi Wikman
      In this video we look at how to make a fully responsive card with HTML and CSS, with a big helping hand from flexbox!
×
×
  • Create New...