This will probably be very in-depth and may require some thorough research if you are not a regular front-end developer/designer.
Before I get started here are some vocabulary terms you can reference to better understand everything. But I highly recommend that you watch this seminar from Harry Roberts on "ITCSS" as it pretty much covers everything you will need to know far better than I can explain.
Component: A self contained element that can be easily re-used, such as a breadcrumb menu, A single post, navigation menu
Object: There are really two types of objects.
- Design Pattern: the best example of this would be a media object. This is basically any element that has some sort of image or icon floating off to either side. You see this everywhere in design and by defining it as an object you can easily re-use the code with modifiers. These can problematic for something like phpBB that has to account for user customization. That being said possibly the only real objects of this type should be reserved for layout, like a grid system.
- Singleton This is my own term but is essentially a small vastly reused object such as a button or tag that is endlessly used everywhere even within components. Each of which sharing a lot of base code but maybe changing a color or a size across different components. Consider prosilver you have different buttons everywhere that all have similar code. By simply using a component modifier instead of redefining all of the code every time we save a lot of code. We are actually sort of already doing this with prosilver
Now that you have an understanding of the basic vocabulary I am going to be using about lets digging.
THE DISCUSSION TOPIC
I am proposing the use of a framework specifically built with phpBB in mind that follows the ITCSS concepts talked about by Harry Roberts in the seminar linked above.
The framework is broken up even further and looks something like this
- Objects (Global)
- Objects (Theme Specific)
- Theme Layer
You have a Utilities layer that as well should not to ever be altered outside of official updates like the core layer
This provides far better control when talking about inheritance and almost completely eliminates the need for it as All you really need to do is swap out Theme layers
This provides far better control over specificity which, currently prosilver's is one of the worst I have ever seen. Here are graphs of prosilver's specificity
3.0, 3.1, 3.2
What is specificity?
This also allows for better scale-ability and maintainability for the theme over time. While providing a better well defined organization to our code.
I have started working on a framework and you can find the code located here:
Its still a work in progress I need to still test some things and provide some documentation.
But this coupled with some other keys changes to several aspects will not only improve the code base and make things easier on the development team, but also should provide for a better methodology for customization as well.
Please feel free to provide any constructive feedback on this, especially if you are well versed in HTML & CSS