Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
6 STEPS TO MAKE YOUR CSS
CODE MORE MAINTAINABLE
FRONT-END DEVELOPER
MARTA
SZTYBOR
CSS is a fairly simple language to learn on a basic level and to kick off with the coding.
But when your stylesheets start...
MODULARISE
YOUR STYLES
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
Begin treating your UI
as a set of repeatable
modules.
For most webpages it’s
possible to break up the
layout for smaller ...
DECIDE
ON A NAMING CONVENTION
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
Naming things is hard I’d say, especially if you try to name CSS classes.
Your first thought could be “Let’s name things s...
DEAL
WITH SPECIFICITY
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
In general, try to stick to this simple rule of thumb: always try
to use the least specific selectors as possible.
Very sp...
I would recommend using explicit selectors for an element, like classes:
It looks better, right? You should also avoid usi...
USE PREPROCESSORS
THE RIGHT WAY
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
Preprocessors can really be a double-edged sword. They cannot
guarantee you a clean, well-maintainable code if you don’t u...
Consider following HTML example:
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
USE PREPROCESSORS THE RIGHT WAY
It’s tempting to recreate this HTML structure in styles and write in SCSS:
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE...
It then compiles to:
If you needed a similar menu in another page, but with just a little tweaked
color of the link, you’d...
Not even this creates overly qualified selectors and causes
problems with specificity. With tightly coupled HTML, it be-
c...
AVOID
UNDOING STYLES
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
CSS is about inheritance, so why undo values declared in
another selector?
Let’s have styles for headings:
6 STEPS TO MAKE...
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
If styles are being resetted in
.header-no-border
class, why declare them ...
DOCUMENT YOUR CODE
AND CREATE A STYLE GUIDE
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
CSS is a declarative language, so if you are using meaningful class names
documenting code can seem unnecessary. But think...
This presentation just scratches the surface. If you are interested in this topic, I
can recommend you some excellent reso...
THANK YOU FOR READING
FRONT-END DEVELOPER
MARTA
SZTYBOR
6 Steps to Make Your CSS Code More Maintainable
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Beautiful Maintainable CSS
Next
Download to read offline and view in fullscreen.

5

Share

Download to read offline

6 Steps to Make Your CSS Code More Maintainable

Download to read offline

Front-end developer Marta shares with you some tips which she finds most helpful, according to her experience.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

6 Steps to Make Your CSS Code More Maintainable

  1. 1. 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE FRONT-END DEVELOPER MARTA SZTYBOR
  2. 2. CSS is a fairly simple language to learn on a basic level and to kick off with the coding. But when your stylesheets start to grow, it becomes more and more difficult to untangle messed up classes. Here I collected a couple of tips to help you write more manageable code. They’ll be useful no matter if you’re working on a project’s styles on your own or in a team. 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
  3. 3. MODULARISE YOUR STYLES 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
  4. 4. Begin treating your UI as a set of repeatable modules. For most webpages it’s possible to break up the layout for smaller components, eg. header with navigation, footer, article, or even the smallest building blocks, eg. buttons and links. Preprocessors give you the power to write stylesheets separately, and then @import them into the main file. 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE MODULARISE YOUR STYLES
  5. 5. DECIDE ON A NAMING CONVENTION 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
  6. 6. Naming things is hard I’d say, especially if you try to name CSS classes. Your first thought could be “Let’s name things semantically!”. Yeah, it’s perfectly right! When the graphic designer changes colours, you don’t want to grep HTML files to change .blue-box to .green-box (to say the least, there could also be a hundred classes named that way). So, you decide to choose to name things like .nav-main instead of .large-emerald-shiny-tabs. But don’t hold on too tightly, the main point is to take the most sensible approach about naming classes as possible – all of the selector names don’t have to be semantic. Just follow a coherent convention and don’t use names describing an element’s appearance. 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE DECIDE ON A NAMING CONVENTION
  7. 7. DEAL WITH SPECIFICITY 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
  8. 8. In general, try to stick to this simple rule of thumb: always try to use the least specific selectors as possible. Very specific selectors, like are hard to override. In any case, when you have to code a similar element, but with slightly different styles, you would write a more specific selector, or even be tempted to use !important. This leads straight to hard-to-maintain code. 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE DEAL WITH SPECIFICITY
  9. 9. I would recommend using explicit selectors for an element, like classes: It looks better, right? You should also avoid using IDs, because they are almost as specific as inline styles. They also have another drawback: they aren’t reusable, and this is something we really don’t want to have in our modular CSS. 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE DEAL WITH SPECIFICITY
  10. 10. USE PREPROCESSORS THE RIGHT WAY 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
  11. 11. Preprocessors can really be a double-edged sword. They cannot guarantee you a clean, well-maintainable code if you don’t use their features properly. You should avoid nesting CSS rules, unless it’s really necessary. This is probably the most common mistake made by beginners. Follow the inception rule: Don’t go more than four levels deep. 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE USE PREPROCESSORS THE RIGHT WAY
  12. 12. Consider following HTML example: 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE USE PREPROCESSORS THE RIGHT WAY
  13. 13. It’s tempting to recreate this HTML structure in styles and write in SCSS: 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE USE PREPROCESSORS THE RIGHT WAY
  14. 14. It then compiles to: If you needed a similar menu in another page, but with just a little tweaked color of the link, you’d have to override the last selector, and probably end up with this: 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE USE PREPROCESSORS THE RIGHT WAY
  15. 15. Not even this creates overly qualified selectors and causes problems with specificity. With tightly coupled HTML, it be- comes hard to maintain. When overused, it may cause per- formance problems and cause your stylesheets to grow in an uncontrolled manner. Overly nested rules are also less readable. 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE USE PREPROCESSORS THE RIGHT WAY
  16. 16. AVOID UNDOING STYLES 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
  17. 17. CSS is about inheritance, so why undo values declared in another selector? Let’s have styles for headings: 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE AVOID UNDOING STYLES
  18. 18. 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE If styles are being resetted in .header-no-border class, why declare them for base class .heading? This would be a simpler and more maintainable way: AVOID UNDOING STYLES
  19. 19. DOCUMENT YOUR CODE AND CREATE A STYLE GUIDE 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
  20. 20. CSS is a declarative language, so if you are using meaningful class names documenting code can seem unnecessary. But thinking about the future and other people who are or will be involved in your project, comments are an invaluable thing. It’s worth to create your own or choose existing code guidelines, which include naming conventions, methodology used, commenting style and file structure. This will benefit all the people who ever touch the code. 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE DOCUMENT YOUR CODE AND CREATE A STYLE GUIDE
  21. 21. This presentation just scratches the surface. If you are interested in this topic, I can recommend you some excellent resources in the web, which cover the issues of modular CSS, code maintainability and various methodologies: • Nicolle Sullivan’s Object Oriented CSS (OOCSS) • Jonathan Snook’s Scalable and Modular Architecture for CSS • Mark D. Otto’s code guide • Harry Roberts’ CSS Guidelines • Creating style guides on A List Apart 6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE FURTHER READING
  22. 22. THANK YOU FOR READING FRONT-END DEVELOPER MARTA SZTYBOR
  • nazmulkarim5

    Jan. 31, 2017
  • salgadoadrian

    Nov. 30, 2015
  • Miroslavpetrovi

    Nov. 26, 2015
  • MattZimmermann

    Nov. 25, 2015
  • russenreaktor

    Nov. 25, 2015

Front-end developer Marta shares with you some tips which she finds most helpful, according to her experience.

Views

Total views

7,438

On Slideshare

0

From embeds

0

Number of embeds

53

Actions

Downloads

20

Shares

0

Comments

0

Likes

5

×