Structuring your CSS for maintainability: rules and guile lines to write CSS

KISS - Keep It Simple & Short(hand).
DRY - Don’t Repeat Yourself.
IMP - Important! is not that important.
- Make It Readable
- Keep It Consistent
- Use a Reset
TDS - Top-Down Structure
- Comment is the savier
- No Inline

Organizing your CSS
As you start work on larger stylesheets and big project with a team, you will
discover that maintaining a huge css file can be challenging.
So, we will go through some best practices for writing css that will help us to
maintain the css project easily.

How to keep your stylesheet organized and tidy?

Does our project have a coding style guide?
- If we are working in a team or existing project? then
- First thing to check is whether the project has an existing style guide for CSS?
- The team style guide should always win over your own personal preferences.
- There often isn't a right or wrong way to do things, but consistency is
important.

Keep it consistent
- set the rules for the project or are working alone,
- then the most important thing to do is to keep things consistent.
- Consistency can be applied in all sorts of ways,
- Using the same naming conventions for classes,
- choosing one method of describing color,
- or maintaining consistent formatting
- for example will you use tabs or spaces to indent your code? If
spaces, how many spaces?

Keep it consistent
Pros:
- Having a set of rules you always follow
- Reduces the amount of mental overhead needed when writing
CSS, as some of the decisions are already made.
Cons:
- Sometime it’s hard to maintain the consistency if you are in a
tight deadline

Formatting readable CSS:
There are a couple of ways you will see CSS formatted.
Some developers put all of the rules onto a single line
.box { background-color: #567895; }
h2 { background-color: black; color: white; }
Other developers prefer to break everything onto a
new line:
.box {
background-color: #567895;
}
h2 {
background-color: black;
color: white;
}
CSS doesn't mind which one you use. I personally find it is more readable to have each property and value pair on a new line.

Comment your CSS
Adding comments to your CSS will help
- Any future developer work with your CSS file
- Also will help you when you come back to the project after a break.
/* This is a CSS comment
It can be broken onto multiple lines. */

Comment your CSS
/* || General styles */
...
/* || Typography */
...
/* || Header and Main
Navigation */
...
- Add a block of comments between logical
sections
- It will help to locate different sections quickly
when scanning through,
- Or even give you something to search for to
jump right into that part of the CSS.
- If you use a string which won't appear in the
code you can jump from section to section by
searching for it. We can use || or --start an. ..end

Comment your CSS
We don't need to comment every single thing in our code, as much of it is self-explanatory. We only comment on the things where we make a
particular decision for a reason.
Another example: Including reference tutorial/any links as a comment. It will help us to recall in future.
/** CSS Code guideline
https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/CSS
*/
Example: we may have used a CSS property in a specific way to get around older browser incompatibilities.
.box {
background-color : red; /* fallback for older browsers that don't support gradients */
background-image : linear-gradient (to right, #ff0000, #aa0000);
}

Create logical sections in your stylesheet
It is a good idea to have all of the common styling first in the stylesheet. This means all of the styles which will generally
apply unless you do something special with that element. You will typically have rules set up for:
● body
● p
● h1, h2, h3, h4, h5
● ul and ol
● The table properties
● Links
Lets see some code...

Using CSS Vendor Prefixed
Some of these CSS browser prefixes have been listed below:
iOS: -webkit-
Safari: -webkit-
Firefox: -moz-
Chrome: -webkit-
Opera: -o-
MS/IE/Edge: -ms-
Each browser have a set of specifications related to any style. This is one of the reasons why browser prefixed are
implemented in order to ensure that these browsers support any of the specific features or style that we would like to
implement.
If we are planning to add a CSS 3 transition to any of our CSS code, then
we will can use transition property and implement a vendor prefix with it.
Below is the code for the same:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

Do Not Be Too Speciﬁc & Chain Classes
article.main p.box {
border: 1px solid #ccc;
}
.box {
}
.btn.submit {
}
.btn{
}
.submit {
Background: #FF0;
}

Break large stylesheets into multiple smaller ones!??
For example, you might have an online store as part of the site, with a lot of CSS
used only for styling the product listings and forms needed for the store. It would
make sense to have those things in a diﬀerent stylesheet, only linked to on store
pages.
This can make it easier to keep your CSS organized, and also means that if multiple
people are working on the CSS you will have fewer situations where two people
need to work on the same stylesheet at once, leading to conﬂicts in source control.

CSS methodologies
- OOCSS (Object-Oriented CSS): Treats page elements as objects, giving all objects classes, treating the objects’ classes as single
entities in style sheets, and taking it from there.. https://github.com/stubbornella/oocss/wiki
- BEM (Block, Element, Modifier): Block Element Modifier is a methodology that helps you create reusable components and code
sharing in front-end development. - https://css-tricks.com/bem-101/
- SMACSS (Scalable and Modular Architecture for CSS): a flexible guide to developing sites small and large. Arguably
becoming one of the most useful contributions to front-end discussions in years. - http://smacss.com/
- Atomic CSS: is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function. -
https://acss.io/
- ITCSS - Inverted Triangle CSS: A sane, scalable, managed CSS architecture achieved with mindful CSS code organization. -
https://itcss.io/

HTML!
What we do to write HTML code?
- Always Declare Document Type (<!DOCTYPE html>)
- Use Lowercase “Element” and “Attribute” Names. Don’t mix uppercase and lowercase (body, div, article)
- Always Quote Attribute Values
- Always Specify “alt” for Images (and also width and height)
- Close All HTML Elements
- Close Empty HTML Elements? (<meta charset="utf-8" />, required in XML and XHTML)
- Never Skip the <title> Element (SEO)
- Add the lang and charset attribute, both are important for SEO indexing (SEO, <html lang="en-us" />)
- Meta Datas (key, description, og and )
- Avoid Long Code Lines
- Spaces and Equal Signs
- Blank Lines and Indentation. Don’t use it unnecessarily.
- Omitting <html>, <body>, <head> tags?
- Viewport
- Create Your HTML First
- It will be updated and continued with time..

Summary
KISS - Keep It Simple & Short(hand).
DRY - Don’t Repeat Yourself.
IMP - Important! is not that important.
- Make It Readable
- Keep It Consistent
- Use a Reset??
TDS - Top-Down Structure
- The Comment is the savior
- No Inline
- Maintain the Spaciﬁcity (*, tag, class, id)
- ...

Validating your CSS!
You can always use the W3C free CSS validator to examine whether your CSS code has been organized and structured
appropriately.
One of the other beneﬁts of using it is to help you ﬁnd errors within your stylesheet.
This will save your time to troubleshooting comparing to doing it manually.
Markup Validation Tool: https://validator.w3.org/
CSS Validation Tool: https://jigsaw.w3.org/css-validator/
Browser Compatibility Testing Tool: https://app.crossbrowsertesting.com/ https://www.lambdatest.com/

Interested to know more?
- https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing#create_logical_sections_in_your_stylesheet
- https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/CSS
- https://www.w3schools.com/html/html5_syntax.asp
- https://www.valoremreply.com/post/5_css_methodologies/
- https://cssguidelin.es/
- https://www.sitepoint.com/optimizing-css-performance/

Structuring your CSS for maintainability: rules and guile lines to write CSS

More Related Content

What's hot (20)

Similar to Structuring your CSS for maintainability: rules and guile lines to write CSS (20)

Recently uploaded (20)

Structuring your CSS for maintainability: rules and guile lines to write CSS