When I started to learn HTML and CSS, the only thing that I worried about was making things work. But as my project grew, I started to feel buried under the number of elements in my CSS stylesheet. It wasn’t easy to find something. I consistently overwrite classes. I came to the understanding point that I need to find a way haw to organize my CSS stylesheet.
Consistency
It is good to keep work consistent. It applies to all: files formatting, naming conventions for classes, consistency in space. Many organizations have a style guide, and some companies have unwritten rules. It is good practice to follow those rules and be on the same page with a team. Remember that you write your code for people who will work on it with you and after you.
Comments
If you write your code in one stylesheet, use comments for naming logical blocks of code. It will decrease the time to find a particular block — type section name in the search field and jump right to it. You can also write a note for people working on a project or for the future you. Don’t forget to delete comments that are not relevant anymore.
File organization for one stylesheet.
Divide your CSS into small logical blocks. Move from general elements to more specific ones. The first section can have elements with a consistent style from page to page, like body navbar, footer, and page layouts. Then you can add a section with styles for typography, forms, and ul. Next, we can write specific components and, finally, single classes. At the very bottom, I always place media queries.
html {
font-size: 16px;
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background: $gray;
font-family: "Poppins-Regular", sans-serif;
font-size: 1rem;
line-height: 1.5rem;
}
/* Utilities */
.container {
margin: 0 auto;
max-width: 960px;
width: 90%;
}
.container-narrow {
margin: 0;
max-width: 700px;
width: 100%;
overflow: auto;
}File organization with Sass.
SASS (which stands for ‘Syntactically awesome style sheets) is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. Sass allows you to use variables, nesting, inheritance, mixins, etc.
Variables
Use variables for the information you want to reuse all over a project.
You can use it for colors, typography, and other reusable values. When you use the $ symbol in front of properties, Sass makes variables, and you can use it in your project :
$off-white: #F0f0f0;
$black: #2B2B2B;
$background: #0c0c0c;
$elevate: #3e3e3e;
$border: #585858;
$green: #A8D46A;
$pink: #C68AD4;
$yellow: #FFE245;.transparent {
background: none;
color: $black;
&:hover {
border: 1px solid $orange;
}
}
.btn-border {
border: $black solid 1px;
}
And if you decide to change, for example, a shade of one of your colors, you can change your variables, and Sass will apply changes to all projects.
Nesting
With Sass, you can nest your CSS selectors with the same hierarchy as HTML. I also like to use nesting for elements with various styles and states like buttons, inputs, etc.
input {
border-radius: 4px;
border: 2px solid $white;
line-height: 24px;
background: none;
color: white;
padding: 0.5rem;
min-width: 320px;
&.full-width {
width: 350px;
}
&:active {
background: $primary-hover;
box-shadow: none;
}Sass gives you the ability to split your CSS file into smaller stylesheets. Make a separate file for each page. You can go even deeper and create individual files for all elements that you may use on more than one page. You can make separate pages for a navbar, footer, menu, section, etc. Later you can logically group individual files in folders.
Class name
A name for a class should be not too specific and not too general. It should be readable and understandable by other developers and designers. It can be very challenging to find the correct class name. Try to find a naming convention that is clear for you. For example, you can name a section, and all terms of elements inside this section will be related.
.animals {
.bears {
.polar-bears {
}
.brown-bears {
}
.panda-bears {
}
.grizzly-bears {
}
}
}Afterwords
Whether you work alone or in a team, the best you can do is keep your code nice and clean. Remember a boy scouts’ rule “Always leave the code cleaner than you found it.”
