How to code CSS
- The biggest problem I see with people just starting to code CSS is a) differentiating between when to use classes and IDs, and b) how to name CSS classes and IDs. The first problem is easier to resolve than the second, which involves a conceptual shift in how we think about our code. Let's look at some examples.
Classes & IDs: Example 1
- Remember: use a class (.) for groups of things and IDs (#) for one-off, individual elements
- Examples of when to use classes:
- Repetitive instances of the same thing. For example, the news items on the SVA homepage.
These might have be coded like:
<div class='newsItemContainer'>
<div class="newsItemImageContainer">
<img src="whatever.jpg" />
</div>
<h6 class="newsDepartmentTag">Department Here</h6>
<h4 class="newsHeadline">Headline Here</h4>
</div>
- Note the use of:
Container to describe (shocking!) containersImageContainer to describe (shocking!) a container for an imageHeadline to describe (shocking!) a headline styleDepartmentTag to describe (shocking!) a department tag
- CSS class names should be as boring and as boringly descriptive of the content they're styling
- Naming CSS classes in a systematized way will help you think in a systematized way
Classes & IDs: Example 2
- A simplified version of the Google search page might be coded like this:
<div id="container">
<-- navContainer holds all of the items related to navigation -->
<nav id="navContainer" class="lightGray pull-right">
<ul>
<li class="navItem">Hi Eric</li>
<li class="navItem">Gmail</li>
<li class="navItem">Images</li>
...
</ul>
</nav>
<div id="googleDoodleContainer">
<img src="images/doodles/wackyWednesday.2015.png" />
</div>
<-- searchContainer holds all of the items related to search (search box + buttons below) -->
<div id="searchContainer">
<div id="searchBoxContainer">
<form>
<input type="text" id="searchBox" />
</form>
</div>
<-- buttonContainer holds all of the buttons -->
<div id="buttonContainer">
<div class="button"><a href="/search">Google Search</a></div>
<div class="button"><a href="/lucky">I'm Feeling Lucky</a></div>
</div>
</div>
</div>
- I'm calling this "semantic coding", which means that the names of the classes and ids fully describe the content they're styling
- Sometimes this means that the names of classes and ids can get very long—don't be afraid of that! There is zero penalty for long names in CSS (I can assure you the browser doesn't care what you call it). Some of my CSS class names get long, like
navbarLinkArchiveContainer or exhibitionImageContainer but that's totally fine.
- By the way, this form of "simplified code", which doesn't describe how it's actually coded but rather just outlines the big picture, is called pseudo-code.
Classes & IDs: In class exercise
- With this new system, open up Text Edit and write the pseudo-code to describe how vimeo's video player and description box (just this part here) would be coded for this video.