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.

The styling integration used by DataTables has two component parts for each styling library (note that each of these parts is optional - many extensions do not require custom Javascript for example):

• Javascript - The integration file will set default options (typically class names and renderers) to be suitable for the styling library. This is loaded in addition to the main software.
• 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 name rules

1. File names are hierarchical, with the most significant software name on the left
2. Each plug-in adds its own name to the hierarchy (on the right), unless it is identical to the previous item in the hierarchy
3. DataTables is top of the hierarchy tree
4. The hierarchy is dot separated
5. The file name is limited to just the last two elements in the hierarchy.
6. Style framework integration files have the framework name appended as the last element in the hierarchy
7. DataTables provided styles count as a framework (the Javascript defaults are suited for their style framework, so there is never the need for a Javascript DataTables integration file!)
8. The extension .min is used to represented a minified file (appended before the file extension)
9. The file name will always have an extension (e.g. .css or .js).
10. The file name is camelCase - i.e. all lower-case except where two words have been combined

Example - DataTables

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 dataTables.bootstrap.js. So the DataTables Javascript directory would consist of:

• dataTables.js
• dataTables.bootstrap.js
• dataTables.bulma.js
• dataTables.foundation.js

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.dataTables.css
• dataTables.bootstrap.css
• dataTables.bulma.css
• dataTables.foundation.css

Example - Responsive

Let's now consider the Responsive extension. For the main Javascript file we have 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:

• dataTables.responsive.js
• responsive.bootstrap.js
• responsive.bulma.js
• responsive.foundation.js

For the CSS, applying the same rules we have:

• responsive.dataTables.css
• responsive.bootstrap.css
• responsive.foundation.css
• responsive.jqueryui.css