The code of modifiers and elements is stored in separate files. This is the classic file structure approach for BEM projects:Įach block corresponds to a single directory. Input_type_pass.css # CSS implementation of the input_type modifier Input_type_search.css # CSS implementation of the input_type modifier _type/ # Directory for the input_type modifier To improve navigation across the project, block modifiers with multiple values can also be combined in separate directories.Ĭommon.blocks/ # Redefinition level with blocks Popup.js # JavaScript implementation of the popup block Popup.css # CSS implementation of the popup block In this case, the block files are grouped using a namespace that is set as the block name.
In some approaches to file structure organization, block directories are not used. Input_clear.js # JavaScript implementation of the input_clear elementĮach block has a directory with the name of the block that contains the files for implementing the block. Input_clear.css # CSS implementation of the input_clear element Input_theme_sun.css # Implementation of the input_theme_sun modifier This approach allows you to include just the modifiers and elements that are needed for this implementation of the block. The code of modifiers and elements is also stored in separate files of the block. Input.js # JavaScript implementation of the input block Input.css # CSS implementation of the input block The names of implementation files match the block names.įor example, if the appearance of the input block is defined using CSS, the code is stored in the input.css file. There is a separate file for each implementation technology. Library.blocks/ # Redefinition level with the library blocks There is no limit on the maximum number of levels.Ĭommon.blocks/ # Redefinition level with the project blocks Guidelines for the file structure of a BEM projectīlock implementation consists of separate filesįiles are grouped by meaning, not by typeĪ project always has at least one redefinition level. The BEM methodology has several approaches to organizing the project's file system:
In BEM, the block is primary, and technologies are secondary. When files are always in a familiar location, this makes it easier for developers to navigate a project and switch between projects. All BEM projects follow a similar structure in their file structure.
0 kommentar(er)
