Bemto

screenshot of Bemto

Smart mixins for writing BEM in Pug

Overview

Bemto is an innovative tool designed for developers who want to embrace the BEM methodology while using Pug (formerly Jade) as their templating engine. By providing a set of mixins that streamline the development process, Bemto allows for cleaner and more maintainable code, specifically tailored for creating complex nested structures. It emphasizes the importance of blocks, elements, and modifiers in a way that enhances both readability and functionality in front-end development.

This mixin library not only simplifies the way developers implement BEM principles but also allows for customization in various aspects such as tag names and attributes. With its straightforward approach, Bemto is a compelling option for anyone looking to integrate BEM practices into their Pug projects seamlessly.

Features

  • Blocks Creation: Easily create blocks with the b mixin, establishing a context for all nested elements, enhancing modular design.
  • Element Declaration: Utilize the e mixin to declare elements within a block, automatically adopting the block's class as a context for easier element management.
  • Modifier Management: Simplify modifier application by writing just the modifier class name with added flexibility for multiple modifiers, allowing for concise and readable code.
  • Custom Tag Names: Change the default div tag to any desired tag by passing a custom name, improving semantic HTML structure.
  • Attribute Handling: Add attributes directly to blocks and elements, ensuring they get applied to the desired output tags, enhancing versatility.
  • Automatic Attributes: Benefit from automatic handling of necessary attributes for certain elements (like img tags), reducing coding overhead.
  • Flexible Syntax Options: Enjoy the option to use both standard and shorter modifier syntaxes, providing flexibility based on project needs.
  • Contextual Control: Change the context of elements dynamically, allowing for advanced nesting without disrupting the overall code flow.
Pug

Pug is a high-performance template engine for Node.js and browsers that enables developers to write HTML templates using a concise and intuitive syntax. It supports a range of features, including template inheritance, conditionals, loops, mixins, and more, and can be easily integrated into a variety of web frameworks and build tools.