Why Builder-Agnostic Best Practices Matter More Than Your Tool Choice
If you’re happily building with Bricks, you might be wondering why you should pay attention to Etch, the new “Visual Development Environment” from Kevin Geary that’s still in pre-alpha. After all, Bricks is “an innovative, community-driven, visual site builder for WordPress” that’s already helping thousands create “unique, performant, and scalable websites” with its intuitive drag-and-drop interface.
But here’s the thing: while Etch is designed for seasoned professionals who want to push the boundaries of WordPress development, its core philosophy around clean code, proper CSS methodology, and maintainable architecture isn’t just for the pros. These principles can elevate your Bricks workflow and make you a better developer, regardless of which builder you choose.
The Professional Approach That Benefits Everyone
Etch asks a fundamentally different question than traditional page builders: “How can we empower professionals and aspiring professionals?” instead of “How can we empower laypeople?” This shift in thinking leads to some powerful features that, while Etch-specific, represent best practices you can adopt in any builder.
BEM Methodology: The Game Changer
One of Etch’s standout features is AutoBEM Integration: Automatic BEM methodology implementation for proper CSS class naming conventions. But what exactly is BEM, and why should Bricks users care?
BEM (Block Element Modifier) is a CSS naming methodology that creates predictable, maintainable class names. Instead of random classes like .card-23 or .hero-title-blue, BEM gives you structured names like .hero__title--large. Etch’s “autobem” feature automatically creates Block Element Modifier (BEM) style classes based on the structure and names of child elements within a parent, something that usually requires manual effort and discipline.
While Bricks doesn’t automatically generate BEM classes, you can absolutely implement this methodology yourself. Instead of relying on Bricks’ automatic ID generation, start creating your semantic class names following BEM patterns. Add-ons such as Automatic CSS and Advanced Themer add this auto BEM option, and I tend to prefer Advanced Themer’s ability to move ID styling into your BEM classes with one click
Class-First Workflow: Why It Matters
Etch “will provide a class-first workflow”, which means styling through reusable CSS classes rather than inline styles or auto-generated IDs. This isn’t just a preference – it’s a fundamental approach to scalable web development.
In Bricks, you already have access to global CSS classes where “you can create CSS classes and use the UI to set up the styling for the CSS Class. Then, you just click on elements on your website in Bricks Editor and assign the element this Global CSS Class”. This feature is powerful but often underutilized.
Practical Steps for Bricks Users
Even without Etch’s advanced features, you can adopt these professional practices in your Bricks workflow:
- Embrace Global Classes. Stop styling individual elements. Create a system of reusable classes for common patterns like buttons, cards, and typography. This makes your sites more consistent and easier to maintain.
- Implement Your Own BEM. When creating custom classes in Bricks, follow BEM naming conventions:
- Block:
.card - Element:
.card__title - Modifier:
.card--featured
- Block:
- Plan Your CSS Architecture. Before diving into Bricks’ visual editor, sketch out your component structure and naming conventions. This upfront planning prevents the CSS chaos that often plagues page builder sites.
- Use Semantic HTML. Take advantage of Bricks’ ability to customize HTML elements. Choose semantic tags that make sense for your content, not just what looks right visually.
The Future-Proofing Factor
Etch represents “a paradigm shift in WordPress page building technology” that prioritizes “professionals over beginners, code quality over convenience, and WordPress standards over proprietary solutions.” You don’t need to switch tools to benefit from this philosophy.
The web development industry is moving toward more structured, maintainable approaches. CSS frameworks (Automatic CSS, Advanced Themer Framework, etc.) and design systems are becoming standard practice. By adopting these principles now — regardless of your builder — you’re positioning yourself for long-term success.
Should You Switch to Etch?
That depends. Etch isn’t just another page builder – it’s designed specifically for “professional WordPress developers seeking advanced tools”. If you’re comfortable with your current Bricks workflow and it meets your clients’ needs, there’s no urgent reason to switch.
However, if you’re interested in pushing your skills forward and working with cutting-edge development practices, Etch might be worth watching. The builder features “bidirectional Gutenberg sync” and “data Liberation Technology” that outputs content as “native WordPress blocks, all but eliminating vendor lock-in concerns”.
The Bottom Line
You don’t need Etch to benefit from professional development practices. The principles it champions – BEM methodology, class-first workflows, semantic HTML, and maintainable architecture – are builder-agnostic concepts that will improve your work regardless of your tool choice.
Whether you stick with Bricks, eventually try Etch, or use any other builder, focusing on these fundamentals will make you a better developer and deliver better results for your clients. The tool is just that – a tool. The mindset and methodology you bring to it determine the quality of your output.
Start implementing these practices in your current Bricks workflow. Your future self (and your clients) will thank you for building with intention, structure, and scalability in mind.
