Custom CSS best practices

Jump to solution
aaron_bahmer
Community Contributor

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?

Labels (2)
1 Solution
tylerweldon
Community Contributor

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. 

View solution in original post