Custom CSS best practices

[aaron_bahmer]

I want to upload custom CSS to our instance/theme and wondered if anyone has any suggestions for best practice in terms of naming conventions for classes and IDs. I want my faculty to be able to easily activate the special styles, so thought an overarching DIV class, then any desired tag styles would be identified as a child to that class.

Example:

DIV.ewc { } (yes, empty)

DIV.ewc H2 { styled }

DIV.ewc H3 { styled }

This way, faculty just need to create the <div class="ewc"> pair of tags around their content to "turn on" the special styles and not have to worry about or remember to class each affected tag.

What about IDs? Should I name them with my "ewc" moniker or include them in the child classes? I'm supposing adding the moniker is better, since I might run amuk with an existing ID style which we may not wish to apply if the main DIV class is not present.

#ewc_header   vs

DIV.ewc #header

Thoughts?

[tylerweldon · Accepted solution]

I think you are on the right track. I would stick with classes using a standard naming convention. It might get difficult trying to target an ID. Below is an example of how I would set it up. 

.ewc_wrapper {}

.ewc_header {}

.ewc_ H1, H2, H3 etc {}

.ewc_body {}

.ewc_footer {}

You might be aware of this, but once the class is added to the DIV the designer or instructor must save the page before they can see the class take affect. This is not a problem, but can take some time if they are adding a bunch of custom CSS. 

[aaron_bahmer]

 @tylerweldon ‌, Thanks. I didn't realize about the editor not readily displaying the custom css. So far, the results have been good once saved. I will specialize my IDs into a class.

[Robbie_Grant]

 @aaron_bahmer ,

We are giving the Canvas Admins area a little bit of love and just want to check in with you.  This will also bring this question new attention. 

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

Robbie