21 CSS techniques I used for my new about me page

1. Use SCSS mixins and breakpoint variables to set media queries

2. Style mobile first

3. Use em for media queries

4. Use px for html tag and use rem for other font sizes

5. Use unitless line-height

6. Use border-box for everything

7. Use single directional margins

8. Use BEM for naming classes

9. Use the component’s name for its file’s name

10. Use “is-*” classes for state

11. Use utility classes if they make the code simpler

12. Avoid tag selectors when possible

13. Avoid selectors that depend on location

14. Use placeholder selectors to DRY the code

15. Use section → container → inner pattern

  • Section (or header/footer) sets the background and margin bottom
  • Container sets the common width and centers the content
  • Inner positions the text
  • Use more classes/components if necessary

16. Use percent-based vertical padding to position text over an image

17. Use comments when the code is not clear

18. Use negative left margin for grid rows (same size as column gutters)

19. Use nth-child for responsive column resets

20. Columns only take care of horizontal positioning. For vertical positioning, add a different class.

21. Use simple CSS animations

That's all!

UI/UX Developer in Vancouver, BC. About me: http://ellekasai.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Elle Kasai

Elle Kasai

UI/UX Developer in Vancouver, BC. About me: http://ellekasai.com/

More from Medium

Meta Tag Generator | Developed by Karl-Johan Gyllenstorm

Meta Tag Generator | Developed by Karl-Johan Gyllenstorm 2022–04–03.

100% Free Linkvertise Bypasser

Free Fallin’

How To Hack Any Website.