Thread by @BatsouElef

Before you deliver your CSS code make sure you have completed these 12 things. 🧵👇

[1/12] Responsive Web Design 📱

Does your website use a responsive web design?

If not, fix your CSS!

If you don't know what Responsive Web Design is, check out this article by @tmoulos

growthrocks.com/blog/responsiv…

[2/12] Unique ID 👀

Check if all of the IDs are used and if they are unique to a page.

[3/12] Reset CSS 📅

Do you have dates? if so, do you use 'Reset'?!
A CSS reset (reset, normalize or reboot) is used and up to date.

[4/12] Embedded or inline CSS 💡

Please avoid at all cost embedding CSS in <style> tags or using inline CSS.

[5/12] Minification 🙌

In production, all CSS files are minified.
After testing your CSS files. don't forget to concatenate and minify them.

[6/12] Non-blocking CSS files 🧱

CSS files need to be non-blocking to prevent the DOM from taking time to load.

[7/12] Stylelint 🧩

This goes without saying but... all CSS or SCSS files should be without any errors.

[8/12] CSS Validator 🎯

The CSS was tested and pertinent errors were corrected.

There are many external (free) tools you can use to validate your CSS code.

[9/12] Desktop Browsers💻

All pages must be tested on all current desktop browsers (Safari, Firefox, Chrome, Internet Explorer, EDGE...)

[10/12] Mobile Browsers 📱

All pages must be tested on all current mobile browsers (Native browser, Chrome, Safari...)

[11/12] Operating Systems (OS) 👩‍🔬

All pages must be tested on all current OS (Windows, Android, iOS, Mac...)

[12/12] Reading direction 📖

All pages need to be tested for LTR and RTL languages if they need to be supported.

Are you still here?! 🎉

Do you check these things before you deliver CSS code?

Thank you 🤍