Recently, I designed my “about me” page without using any CSS frameworks. Here are some of the CSS techniques I used, along with the resources to learn more about them.
1. Use SCSS mixins and breakpoint variables to set media queries
It’s faster to type.
2. Style mobile first
First write mobile style, then write style for larger screens using media query mixins.
3. Use em for media queries
By doing this, media queries work better with page zooming.
4. Use px for html tag and use rem for other font sizes
It becomes easier to change font size on different screen size.
5. Use unitless line-height
By doing this, line height changes when font size changes. Also, use smaller line-height for headings so they look better.
6. Use border-box for everything
It’s easier to calculate box sizes.
7. Use single directional margins
It’s easier to reason about the vertical rhythm.
8. Use BEM for naming classes
It’s easier to think in terms of components.
9. Use the component’s name for its file’s name
It’s easier to find the corresponding files.
Learn More: Mobify CSS Style Guide — Self Documenting Selectors
10. Use “is-*” classes for state
It’s easier to know which classes are set from JS.
11. Use utility classes if they make the code simpler
12. Avoid tag selectors when possible
By doing this, the code becomes more portable. In this case, I didn’t write “ul.social-links”.
13. Avoid selectors that depend on location
The code becomes more predictable and reusable. In this case, I didn’t write “.footer .social-links”.
14. Use placeholder selectors to DRY the code
…when it doesn’t make sense to break down to more components/classes.
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
Because I use background-size: cover, the image scales with the page width. Percent based vertical padding scales with the width, so it scales with the image too.
17. Use comments when the code is not clear
18. Use negative left margin for grid rows (same size as column gutters)
Bootstrap uses the same technique.
19. Use nth-child for responsive column resets
20. Columns only take care of horizontal positioning. For vertical positioning, add a different class.
It keeps the grid system simple.
21. Use simple CSS animations
Feel free to follow me on Twitter.
Thanks to Shu Uesugi for revising my English.