13. JS/CSS file name structure
One of the great challenges of maintaining any complex project is that of organisation and DataTables is no exception. The project is primarily split between the core library, extensions and plug-ins. This modular approach for adding features to DataTables works well, but it must also take into account the integration with the various styling libraries supported by DataTables.
- CSS - The integration file in this case adds any styles required which are not fulfilled by the styling library.
The integration files are contained in the source repo for each library and as such, it is important that the file names used are consistent between DataTables core and its various extensions. This ensures that developers have access to the software that they need to update immediately, releases are atomic and there is a consistent method of including the required files for each styling library.
The downside to this approach is that it increases the number of files that are required quite significantly if you use a large number of extensions. However, this is outweighed by the fact that the consistent naming provides the ability to programmatically combine files (as used by the DataTables download.
- File names are hierarchical, with the most significant software name on the left
- Each plug-in adds its own name to the hierarchy (on the right), unless it is identical to the previous item in the hierarchy
- DataTables is top of the hierarchy tree
- The hierarchy is dot separated
- The file name is limited to just the last two elements in the hierarchy.
- Style framework integration files have the framework name appended as the last element in the hierarchy
- The extension
.minis used to represented a minified file (appended before the file extension)
- The file name will always have an extension (e.g.
- The file name is camelCase - i.e. all lower-case except where two words have been combined
Consider the case of DataTables - it is the top of the tree so the core file is called
dataTables.js. The Bootstrap integration file is therefore called
For styling the CSS files are similar to the integration files, although due to rule 6, the DataTables styling file name matches the same format as the other styling libraries:
dataTables.responsive.js, while for the styling integration files we would have
dataTables.responsive.bootstrap.js as the hierarchy, but due to rule 5 it is shortned to
responsive.bootstrap.js. As a result the files for Responsive are:
For the CSS, applying the same rules we have: