首页 >web前端 >css教程 >与BEM大规模合作

与BEM大规模合作

Jennifer Aniston
Jennifer Aniston原创
2025-02-25 17:15:14541浏览

>本文探讨了使用BEM(块,元素,修饰符)CSS方法的挑战和最佳实践,并借鉴了经验丰富的开发人员的见解。 解决的核心问题是如何有效地管理BEM在大型项目中的复杂性。

>本文首先要突出一个共同的误解:过度巢穴。虽然基本的BEM结构(

)很简单,但许多开发人员将其错误地扩展到过度级别(例如,.block__element--modifier)。 采访开发人员之间的共识通常是将嵌套限制在一个或两个层次上。 深嵌套可降低可读性和可维护性,并且通常表明需要更好地范围范围或重组。 一位开发人员建议使用更长,更具描述性的元素名称,而不是添加额外的嵌套级别。 另一个提供了一个引人注目的类比,将过多的嵌套与严格定义CSS中的DOM结构进行比较,提倡更灵活的方法。 但是,并非所有开发人员都严格遵守这一两级限制。有些人发现有时需要更深的筑巢。.block__element__subelement--modifier>

>正确的块范围至关重要。 文章强调从最小,最独立的单元开始,避免了包含无关元素的过度范围定义。 这种方法确保了更好的模块化和可重复性。

组织CSS文件是另一个关键方面。一些开发人员主张一个每块一个块的结构,促进模块化和易于维护。 其他人则将其与SMACSS的元素结合在一起,从而创建了一种混合方法。 本文还讨论了ITCSS(倒三角CSS),该方法可以根据特异性,明确性和覆盖范围来构建CSS,并提供一个结构化的分层系统来管理大型CSS项目。

>在神秘的缩写中鼓励使用长长的描述性班级名称,以提高代码的可读性和可维护性。 该文章强烈建议不要将SASS的

与BEM一起使用,更喜欢HTML中的多级方法,以保持类别之间的明确关系并避免CSS膨胀。 这种方法允许更大的灵活性和更轻松的修改。

> @extend>最后,强调CSS覆盖的重要性是要执行命名惯例并确保团队之间的一致性。 本文还涉及更广泛的Yandex Bem堆栈,该堆栈涵盖了用于JavaScript和模板的工具,但承认许多开发人员仅关注CSS方法。 结论强调了找到适合团队和项目的工作流程,结合来自各种来源的工具和技术的重要性。 强调了有据可查的结构化组件的好处,以及避免过度自动化以获得更好可移植性的需要。

>本文以常见问题的结论涵盖了BEM的各个方面,与其他方法的比较以及实施和扩展的实用技巧。

Image 1 Image 2 Image 3Image 4

以上是与BEM大规模合作的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn