Make your site secured for visitors! Learn how and why: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
Example .htaccess file:
They are all outdated! Use simple, but powerful css flex and grid layouts. By using newest HTML / CSS solutions you can replace tousands of code lines by just few!
Modern css offer much more than solutions from past. Variables, modularity, variations and more... Learn it all!
Avoid using any JS libraries. Most of existing JavaScript functions or whole modules can be rewritten by simple CSS rules and run smoother.
Animations, sliders, galleries, dropdowns, open / close elements after click, even language translations are possible to be done ONLY in css!
All modern browser support custom elements. Dont be afraid of using it. Dont repeat classes over classes.
Elements in your code should NEVER have attributes overwritten multiple times by many css rules.
Use element/class > element/class, element.class and element:not([class]) to keep code in scope.
Rem, Em, percent, ch... You MUST use all kind of these values in your code.
Every value is used for diffrent things. Generally dont use px, but always control sizes and calculate everything to singe px. Be aware of sizes in your app.
Best starting value is 4px - by using this value as starting variable you should calc() all other, example:
What will be body > span total height?
...
body.font-size x 0.5 x 1.5 = 12px //this is calculated value based on font-size that is based on 4px
You ou MUST always know and predict sized in PX of EVERY element in your app! Why... ?
Its needed if to develop correct website. Example:
Box containing exacly 3 lines of text: height: calc(3 x base.4px x 0.5 x 1.5); - on every browser, always same size, no more browser compability issues.
* base 4px is only value you can adjust by breakpoints and, if done correctly, will be enough to develop cross-browser RWD site