I don’t do a lot of front-end work these days, but I am genuinely interested in approaches that help build modular systems, especially when the subject is something as messy and as context-dependent as CSS.<\/p>\n
Recently, I came across the Block-Element-Modifier approach<\/a>, aka BEM<\/a>, which I find interesting.<\/p>\n If you\u2019re not familiar with BEM, it\u2019s a naming methodology that provides a rather strict way to arrange CSS classes into independent components. It stands for Block Element Modifier and a common one looks like this:<\/p>\n The principles are simple\u200a\u2014\u200aa Block represents an object (a person, a login form, a menu), an Element is a component within the block that performs a particular function (a hand, a login button, a menu item) and a Modifier is how we represent the variations of a block or an element (a female person, a condensed login form with hidden labels, a menu modified to look differently in the context of a footer).<\/p><\/blockquote>\n This follow-up article<\/a> provides more details and examples.<\/p>\n\n","protected":false},"excerpt":{"rendered":"\n I don’t do a lot of front-end work these days, but I am genuinely interested in approaches that help build modular systems, especially when the subject is something as messy and as context-dependent as CSS. Recently, I came across the Block-Element-Modifier approach, aka BEM, which I find interesting. If you\u2019re not familiar with BEM, it\u2019s … Continue reading Modular CSS : Block, Element, Modifier<\/span><\/a><\/p>\n\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Modular CSS : Block, Element, Modifier #WebDev #WebDesign #CSS","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false,"_links_to":"","_links_to_target":""},"categories":[1,18,62,1334],"tags":[1517,1157,1330],"keyring_services":[],"class_list":["post-27365","post","type-post","status-publish","format-standard","hentry","category-general","category-programming","category-technology","category-web-work","tag-css","tag-web-design","tag-web-development"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\r\n.block {}\r\n.block__element {}\r\n.block--modifier {}\r\n.block__element--modifier {}\r\n<\/pre>\n