1. [role="button"] and not button, .btn, .my-cool-custom-btn-xxxl. When you add role="button" element already gets cursor: pointer, did you know that?
2. Custom tag names like <comment> which gets border radius, box shadow, etc.
3. Custom grid layouts like <grid> or <flex type="column"> and in CSS flex { display: flex } flex[type="column"] { flex-direction: column } etc.
4. For classes I am using app- prefix to avoid conflicts with any 3rd party code, admin- for admin panels, after that module/section name comes out, like app-footer, admin-footer and all elements within that modules/sections with both app and module prefix name, for example app-footer-img
5. And finally many helpers/utils with u- prefix and icons with i- or ico- prefix
6. All icons today SVG only and for all classes related to SVG elements I always put svg.class to tell myself in future and everyone that this class is for SVG elements and should use fill and not color for example.

So use semantics as much as possible.

If something is supposed to become good, it requires a lot of effort from your side. You will always have to have passion, endurance, take time to work on better solutions. BEMIT is a very good way to handle class names and it has to become a habit to use it. For me, I do not even look out for it anymore, it just happens naturally.

As for organization, you might want to take a look at ITCSS - though you might feel it also adds complexity to your project.

Maybe you should compare keeping your CSS clean to keeping your house clean. Sure it is easy to just throw everything on the floor in the middle of the room. You only have to search through one pile of stuff, too, in order to find the the item you are looking for. But would you invite your friends over like that? What if you are looking for a very small piece in a pile which grew over the last 5 years? You know it has to be somewhere.... and while searching your pile falls over and everything will be scattered everywhere instead of just on one pile. There are methods to keep your stuff ordered and put away into places where things belong, like the Noguchi Pattern. It is more tedious to do it, but you will love it later on!

The mentioned mess can also happen in your CSS. If you just throw everything in one file without a solid naming convention, you might mess up your whole homepage when you just try to change one little thing. Give your classes recognizable names, so you know the impact of changing the item before changing it. Watch out for specificity so you overwrite things in a maintainable way without strange dependencies.

Bottomline: Do not give up on BEM(IT)!

I recently shared this article on semantic/accessible CSS naming which was recommend by Eric Meyer in his AMA. Also, just a few minutes ago, I published a story that discusses it. How timely.

The simplest thing I can really say is people should name things for their purpose. A classic example is 'warning-message' rather than 'red-box'. It might be an orange or pink box in future, but it will always be a warning message. Might sound simple but people fall into the presentational naming trap all the time.

Also pay a lot of attention to default CSS that cascades over all the variations - get that right and you won't write too much CSS. Set the wrong things as the default/base style and you end up with a lot of override code that could be avoided. Easier said than done, particularly if the projects running under pressure; sometimes this has to be done in a refactoring exercise when the component has settled.