DEV Community

loading...
Cover image for Tips to organize well your Css

Tips to organize well your Css

Paschal Maximillian
Am a junior front end developer
・2 min read

HOW TO ORGANIZE YOUR CSS

Organizing your Cascading Style Sheet(s) it is a pretty cool way to start developing on writing clean code if you are beginner and if you are pro means you must deal with huge of Css file then it’s important to organize well your Css to reduce errors and to make code human readable.

WHY! ORGANIZING WELL YOUR CSS
To increase your productivity
Make easier to maintain when it comes in solving some errors
To produce clean code.

Some steps to ensure that your css is well organized

  • Use external CSS.
    This is the most helpful way to to organize your css rather than use internal css or inline css so use external way to organize your css

  • Define variables.
    Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. Complex websites have very large amounts of CSS, often with a lot of repeated values.Declare a variable in global zone,global variables are generic variables that will be used to keep the consistency between all our
    Components.

  • Comment your css.
    Adding comments to your CSS will help any future developer work with your CSS file, but will also help you when you come back to the project after a break.

  • Prefer to use class instead of id’s
    When your are creating a selector that can be reusable most of times it is better to use a class selector and in styling it is highly recommended to use class.

Thanks if you reach out to the end

It is my first post please
show love
follow me in IG @paschal_maxillian

Discussion (2)

Collapse
nishthaneeraj profile image
Nishtha Neeraj Kushwah

Nice post,

Collapse
pascal488 profile image
Paschal Maximillian Author

Thanks mate