>本文探讨了使用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的各个方面,与其他方法的比较以及实施和扩展的实用技巧。
以上是与BEM大规模合作的详细内容。更多信息请关注PHP中文网其他相关文章!