{"id":1037,"date":"2015-10-02T00:37:58","date_gmt":"2015-10-01T19:37:58","guid":{"rendered":"https:\/\/ahmadawais.com\/?p=1037"},"modified":"2015-10-02T00:38:01","modified_gmt":"2015-10-01T19:38:01","slug":"bem-css-basics-for-wordpress-themes-developers","status":"publish","type":"post","link":"https:\/\/ahmadawais.com\/bem-css-basics-for-wordpress-themes-developers\/","title":{"rendered":"BEM CSS Basics for WordPress Themes Developers"},"content":{"rendered":"

If you develop WordPress themes, you already have some kind of a\u00a0workflow<\/a>. But, what about CSS? As far as I know, some developers choose to write CSS with frameworks like Bootstrap<\/a>, Foundation<\/a> and what not, while other’s don’t.<\/p>\n

I belong to the later type, people who don’t use CSS frameworks whatsoever.\u00a0Which is why I end up reading a lot about standard practices of writing CSS because let’s face it, screwing up is real easy when you don’t know the standards. If you are not a Copy Paste Programmer<\/a>, then you should care about stuff like this.<\/p>\n

Again Why Should I Care?#<\/a><\/h2>\n

TL;DR<\/strong>\u00a0You should care because I have seen too many\u00a0front-end developers who know less about CSS and more about Bootstrap, which limits their thinking and we all end up with boring web design<\/a>.<\/p>\n<\/section>\n

\n

\"Boring-web-design\"<\/p>\n<\/div>\n

\n

Some developers choose to trust standards baked in Bootstrap, I like to keep that control in my hands. Do you? \u00a0There is so much more to CSS than just knowing about the properties and how they work in a particular framework.<\/p>\n

As a good front-end web developer, you should know what CSS properties are supported in which browsers i.e. Make it a habit to visit\u00a0CanIUse<\/a>\u00a0whenever you use a new property? Slowly and gradually you will start remembering the cross-browser compatibility of your code.<\/p>\n

Similarly, using a grid is\u00a0not the best solution while building a WordPress theme (It can be called a good solution though certainly not the best). While there is the debate about which grid is better than the other here is a 10 lines responsive CSS grid<\/a> that I built. I use it in almost every other project.<\/p>\n

BEM Basics#<\/a><\/h2>\n

BEM is a way of writing CSS and nothing more. It helps CSS speak out loud about what it does.\u00a0It focuses on organizing sections of a website into purposeful blocks, which are comprised of their functional elements, and are then manipulated by modifiers.<\/p>\n

    \n
  • B:<\/strong> Block<\/li>\n
  • E:<\/strong> Element<\/li>\n
  • M:<\/strong> Modifier<\/li>\n<\/ul>\n<\/section>\n
    \n
    \n