The u1 library
u1.btn is the library name. Your first impression may be that this is ugly, why the hell would anyone want to prefix every class name with a prefix?
First, Turbo CSS is a utility first language, meaning that most of your classes will be base utility classes, not library classes. For this reason, you will rarely need to use the library prefix, thus it is less of a concern.
Second, this really helps in maintaining a project. Sure, you have to write 3 additional characters occasionally (wooo!), but you will end up having a much better documented codebase. Traditionally, you might encounter the class name
foo and have no idea where it might be defined. The library prefix serves as a namespace, it tells that the
u1.btn class is defined in the
Third, it is easier to go the other way, to find out if a class definition is used or not. Say you create an effects library and you want to find out if the
bounce class defined in the
effects library is used anywhere or not. You can just search your codebase for
Fourth, it helps with evolving your codebase. We always keep learning about how to best approach any problem. Design is no different. Every widely used CSS framework that came before Turbo has several versions out there. This approach lets you easily redesign your CSS library without breaking existing code. Just create a new library (a new .turbo file and start adding code.