I write this topic to demand an immediate review of the following reviewers’ requirement:
No inline CSS. All CSS must be separated into an external stylesheet.
This requirement, when it forces to remove all inline styles, is blatantly wrong under all points:
When some style is created to be applied only to a single HTML element, in such cases insert it into an external CSS file cause only confusion and more code. Anyway in this case is not a big issue, but it’s just non-sense.
When some style is created dynamically from user input, to be applied only to a single HTML element, in such cases insert it into an external CSS file causes only problems, this time more relevants and dangerous:
- There is the need for a server-side code that creates a CSS class with the dynamic style inside it.
- There is the need for a server-side code that write and save the .css file
- There is the need for a server-side code that is able to link the CSS classes created to the correct HTML elements
- You must load an external CSS file for no reason, this is a downgrade of performance (file size and 1 more HTTP request)
- In many cases, where the dynamic codes are just one or two, the problems are startling clears: you must create a file of ex. 800bytes with 2 lines of code, and load it as external files. Totally nonsense.
Imagine a scenario where a user wants to upload an image and use it as a background in an HTML element. With old rule is just
style="background-image:URL()". with the new rule some code must create and save an external file, with just the code
style="background-image:URL()", create a CSS class for it, write it in the HTML component, load this CSS file with just one line of code. Totally nonsense. Consider also that this operation must be done every time the user updates the image.
Final result of this requirement
- Worst performance due to 1 more HTTP request and large, complex, server-side codes.
- Wasting hours of time for authors to develop something that is not only useless but also creates real problems.
- Min one more file
- Worst readability/comprehensibility of the code because a user must check the HTML and than find the CSS code of the linked CSS class to see the value of the style.
- Greater exposure to bugs. More a code is complex more are chances of bugs. The server-side codes above are very complex in comparison to the simplicity of the task they do. I already see customers complaining of broken styles due to file permissions issues or wrong class assignments.
More proofs this practice is nonsense:
All major websites and companies, including Google and SEO websites, use inline styles when required, for obvious reasons.
I wonder who is the Envato member that published this requirement because any good developer in the world knows that’s it is deeply wrong and causes only problems. Anyway anyone makes mistakes, I just hope that they will understand the mistake and will correct it, making the requirement non-mandatory for all inline styles. There must be exceptions. Styles dynamically generated in relation to the user input like user images and custom colors must be excluded.