- Saved searches
- Use saved searches to filter your results more quickly
- tadatuta/bem-tools-create-by-css
- Name already in use
- Sign In Required
- Launching GitHub Desktop
- Launching GitHub Desktop
- Launching Xcode
- Launching Visual Studio Code
- Latest commit
- Git stats
- Files
- README.md
- css-to-bem-file-structure
- Generate [BEM file structure](https://en.bem.info/methodology/filestructure/) by CSS file. For more information about how to use this package see README
- Ensure you’re using the healthiest npm packages
- Package Health Score
- Explore Similar Packages
- Security
- Security and license risk for significant versions
- Is your project affected by vulnerabilities?
- Popularity
- Weekly Downloads (9)
- Direct Usage Popularity
- Community
- Embed Package Health Score Badge
- Maintenance
- Commit Frequency
- Keep your project healthy
- Check your package.json
- Snyk Vulnerability Scanner
- Package
- Readme
- css-to-bem-file-structure
- Installation
- Usage
- Advanced usage
- How it works
- Building a BEM project
- Build stages
- The list of BEM entities
- Defining dependencies
- The order for including BEM entities in the build
- Dependencies and the order for including BEM entities in the build
- Redefinition levels and the order of including BEM entities in the build
- Build result
- Build tools
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
tadatuta/bem-tools-create-by-css
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
npm i css-to-bem-file-structure --save-dev
./node_modules/.bin/bemify path-to-styles.css
In this case you may customize separators with environment variables ELEM_SEPARATOR and ELEM_MOD_SEPARATOR .
To customize file structure organization use css-to-bem-file-structure binary. It supports the same bem-config file as bem-tools-create package.
NOTE: such configuration was never tested and considered deprecated. List of imports won’t be generated in this case.
./node_modules/.bin/css-to-bem-file-structure path-to-styles.css
./node_modules/.bin/css-to-bem-file-structure path-to-styles.css blocks css
.b1 < color: red; > .b1__e1 < color: yellow; > .b1_m1_v1 < color: lightcoral; > .b2 < color: green; > .b2__e1_m1 < color: #eee; >
following files will be generated:
blocks/ b1/ __e1/ b1__e1.css _m1/ b1_m1_v1.css b1.css b2/ __e1/ _m1/ b2__e1_m1.css b2.css
css-to-bem-file-structure
Generate [BEM file structure](https://en.bem.info/methodology/filestructure/) by CSS file. For more information about how to use this package see README
NPM
GitHub
Ensure you’re using the healthiest npm packages
Snyk scans all the packages in your projects for vulnerabilities and provides automated fix advice
Package Health Score
Explore Similar Packages
Security
All security vulnerabilities belong to production dependencies of direct and indirect packages.
Security and license risk for significant versions
Is your project affected by vulnerabilities?
Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.
Popularity
Weekly Downloads (9)
Direct Usage Popularity
The npm package css-to-bem-file-structure receives a total of 9 downloads a week. As such, we scored css-to-bem-file-structure popularity level to be Limited.
Based on project statistics from the GitHub repository for the npm package css-to-bem-file-structure, we found that it has been starred 44 times.
Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.
Community
This project has seen only 10 or less contributors.
We found a way for you to contribute to the project! Looks like css-to-bem-file-structure is missing a Code of Conduct.
Embed Package Health Score Badge
Maintenance
Commit Frequency
Further analysis of the maintenance status of css-to-bem-file-structure based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Sustainable. We found that css-to-bem-file-structure demonstrates a positive version release cadence with at least one new version released in the past 12 months. In the past month we didn’t find any pull request activity or change in issues status has been detected for the GitHub repository.
Keep your project healthy
Check your package.json
Snyk Vulnerability Scanner
Package
css-to-bem-file-structure has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.
Readme
css-to-bem-file-structure
Installation
npm i css-to-bem-file-structure --save-dev
Usage
./node_modules/.bin/bemify path-to-styles.css
In this case you may customize separators with environment variables ELEM_SEPARATOR and ELEM_MOD_SEPARATOR .
Advanced usage
To customize file structure organization use css-to-bem-file-structure binary. It supports the same bem-config file as bem-tools-create package. NOTE: such configuration was never tested and considered deprecated. List of imports won’t be generated in this case.
./node_modules/.bin/css-to-bem-file-structure path-to-styles.css
./node_modules/.bin/css-to-bem-file-structure path-to-styles.css blocks css
How it works
.b1 < color: red; > .b1__e1 < color: yellow; > .b1_m1_v1 < color: lightcoral; > .b2 < color: green; > .b2__e1_m1 < color: #eee; >
blocks/ b1/ __e1/ b1__e1.css _m1/ b1_m1_v1.css b1.css b2/ __e1/ _m1/ b2__e1_m1.css b2.css
Building a BEM project
In a BEM project, the code is divided into separate files (the source files). To combine the source files into a single file (for example, to put all CSS files in project.css , all JS files in project.js , and so on), we use the build process. The resulting files are called bundles in the BEM methodology.
The build performs the following tasks:
- Combines source files that are spread out across the project’s file system.
- Includes only the necessary blocks, elements, and modifiers in the project (BEM entities).
- Follows the order for including entities.
- Processes the source code during the build process (for example, compiles LESS code into CSS code).
Build stages
To receive bundles as the result of the build, define the following:
The list of BEM entities
To include only the necessary BEM entities in the build, you need to create a list of blocks, elements, and modifiers used on the pages. This list is called a declaration. It allows you to get rid of unnecessary code that increases the bundle size.
The build tool bundles only the BEM entities that are included in the list. The example below shows bundling based on the declaration.
For more information on how to create a declaration, see Ways to get declarations.
Defining dependencies
You can create BEM blocks based on other blocks. To do this, you need to define dependencies on them. Dependencies allow you to avoid unnecessary copying and pasting.
The build tool gets information about dependencies and adds all the BEM entities needed to implement a block. The example below shows a composite block.
For more information on how to declare dependencies on other BEM entities and technologies, see Technology for declaring dependencies.
The order for including BEM entities in the build
The order for including BEM entities in the build depends on:
Dependencies and the order for including BEM entities in the build
In BEM, dependencies can affect the order of including BEM entities in the build. The mechanism of including the BEM entities depends on the DEPS entities that influence the inclusion priority in various ways.
For more information on how to determine the order of including BEM entities in the build, see the DEPS syntax section.
Redefinition levels and the order of including BEM entities in the build
In BEM, the final block implementation might be distributed across different redefinition levels. They allow you to change the representation and behavior of the blocks for different platforms. Each subsequent level extends or overrides the original block implementation. Therefore the original implementation has to be included in the build first, and then changes can be applied from all the redefinition levels. The example below shows a project with redefinition levels: common.blocks , desktop.blocks and touch.blocks . The build order is marked with numbers.
For more information about using redefinition levels, see the Redefinition levels section.
Build result
The build result can output files for:
- A page fragment (for example, header.css or footer.css ).
- A separate page (for example, hello.css and hello.js ).
- The entire project (for example, project.css and project.js ).
When building a single page or project, the resulting code can include:
- All BEM entities from the project’s file structure (this significantly increases the code volume).
- Only the necessary BEM entities.
The example shows a hello page build.
File system of a BEM project before the build:
blocks/ # Directory containing blocks bundles/ # Directory containing build results (optional) hello/ # Directory of the hello page (created manually) hello.decl.js # List of BEM entities requires for the hello page
File system of a BEM project after the build:
blocks/ bundles/ hello/ hello.decl.js hello.css # Compiled CSS file for the hello page (the hello bundle in CSS) hello.js # Compiled JS file for the hello page (the hello bundle in JS)
Build tools
The BEM methodology doesn’t limit your choice of build tools.
The BEM platform uses the following assemblers:
For more information on building a BEM project with ENB, see the Starting your own BEM project section.