One of my daily tasks as a developer is to modify the default styles which come along with a new Wordpress theme chosen by our clients. I have to say that this task is made harder and harder by some obtuse practices followed by many theme developers when it comes to CSS. I don't want to be rude because I love your work, but you should consider the fact that your styles may be changed by another developer or user, so you should code your CSS accordingly. Here are some of these bad practices that make me feel frustrated.
Imported style sheets
The aim of imported style sheets in Wordpress is to keep your main CSS file organized and modular. So far so good. The point is that if you don't make these files directly accessible by the theme editor, a user is forced to access these files through FTP or with its editor's FTP client. This is a useless waste of time.
Further, imported style sheets are considered bad for performance, because they force a browser to perform multiple GET requests. Finally, even though they can be handy from a specificity and cascading point of view, they prevent the final user from getting the overall view of the style structure.
The only @import rule that is really useful, in my opinion, is the inclusion of CSS reset styles.
Reset styles
Many developers just copy and paste reset styles from the web without knowing what they're really doing. There are two types of reset styles: global resets and custom resets. A global reset resets all your styles, not just the styles used on the elements contained in your Wordpress theme. On the other hand, a custom reset resets only particular styles.
Global resets should be avoided because they can lead to unexpected results. Imagine that you've reset the b and i elements. A user downloads a plugin that uses these elements in its HTML. Nothing happens, and these elements are showed as normal text. See my point? Use custom resets instead, because certain default browser styles can be useful under certain conditions.
CSS comments
Only few good Wordpress themes use CSS comments in a usable and intelligent way. With the word "intelligent", I mean:
- outlining file structure
- providing a way to focus on singular code blocks
For example:
/*= Structure */ /*== Page */
See the = and ==? They're used to outline the structure of code blocks to help you with text search. So if you run a text search for the single equals sign, you get the main code blocks. Conversely, if you search for the double equals signs, you get the sub-blocks.