Software Engineering principles applied to CSS

Some of my thoughts about CSS developent. Think of more? Share in the comments and I’ll add them to this page!

Low Coupling

The principle of low coupling suggests that distinct parts of an application be as “stand-alone” as possible.

To illustrate: A very decoupled program could be available from the command-line first, then a GUI is built using that programs API’s. This ensures that the logic of the program is decoupled from the presentation. A developer can change the internal workings of the program without affecting the other aspects of the architecture.

Targeting elements based on their DOM order tangles up the visual presentation (CSS) with the structured content (HTML) – Highly coupling the presentation with the content.

Changing the name of your parent container shouldn’t detach your horizontal menu from its style.

Separate the presentation from the structure with the use of classes:

High Cohesion

Separating the concerns of CSS into different files allows you to create highly cohesive classes that, once in place, allow a great deal of flexibility in development. Areas of concern are:

  • Layout: positioning of elements, geometric dimensions
  • Style: colors, borders, backgrounds
  • Normalization: typography, element defaults

Separating the CSS into separate areas allows you to create highly cohesive “modularized” rules that have the bonus of being easily swappable:

  • Layout-full.css, layout-compact.css
  • Blue.css, green.css, red.css
  • Normalize.css

Any combination of the above files could be used to alter the presentation of the application without changing the content architecture.

Inheritance

If elements are targeted by semantic classes, instead of their order in the DOM, it is easy to modularize classes using the principle of inheritance:

This is a popular technique in many rapid development frameworks, such as Bootstrap, Zurb, and others.

Additionally, CSS may use the principle of multiple inheritance by using styles from multiple sources – such as a horizontal navigation getting its form and function from layout.css, and its color and branding from color.css files.

Generalization

In software engineering, the most general use-case is often sought, as it will eliminate redundant future work. Nathanial Borenstien, inventor of the MIME type once said,

“It should be noted that no ethically-trained software engineer would ever consent to write a DestroyBaghdad procedure. Basic professional ethics would instead require him to write a DestroyCity procedure, to which Baghdad could be given as a parameter.”

Name classes based on their general use-case, rather than on their appearance, position, or other attribute.

If not, ‘The boss’ might ask you to change the submit button to green, but the in-code class will stay .button-blue  forever, because it is already in hundreds of places.

Naming classes on their general case avoids this problem, and also makes for easy discovery and maintenance by future programmers, or your future self.

Additionally, duplication of elements becomes easier. If not, you might need to duplicate the element somewhere other than the original place, and you end up with navigation in the footer called  .sidebar-nav

Abstraction

If using the principle of generalization, there may be some base class that is never intended to be used on an element on its own. To provide some level of abstraction, only declare universal attributes on parent classes.

Encapsulation (private styles)

By using the principle of inheritance, we can make some classes essentially private by namespacing their selector rules:

This ensures our style definitions don’t ‘leak’ into other elements, and can only be used within a specified parent element.

Few ‘Computer Science’ searches in English? I guess I’ll start writing in Tagalog

Google Trends show few searches from the United States, or in English, for advanced Computer Science topics. Perhaps I should worry less about the content of my content, and more about the language its presented? With that in mind: Pagbati, Maligayang pagdating sa MikeDoesWeb!

Pagbati, Maligayang pagdating sa MikeDoesWeb!

I have observed an interesting trend on Google Trends that leads me to believe that perhaps I should be less concerned with the subject matter of my content, and perhaps more with the language I communicate it in.

There seem to be few searches coming out of the United States && || in English for advanced computer science topics. As an example: a Google Trend search for “genetic algorithm”

Interestingly, Tehran, Iran is looking for "genetic algorithms" the hardest...

 

Look for yourself: These similar searches get nearly identical results:

I performed some number crunching on the export files Google Trends provides, and gained a bit more insight:

Google provides both a integer rank for each language used (1st, 2nd place…), as well as a decimal weight for each language.  While English routinely scored at 2nd place, the weight difference between 1st and 2nd was often 2:1 .
For example: in the Google Trend search for “Data Structures,”  Tagalog takes the 1st spot, and English the 2nd. However, the weight between the two languages is 1:0.405
Here are the weighted scores and average weight from several computer science related search queries:
language Average dynamic programming Graph Theory Functional Programming Artificial Intelligence Data Structures
Tagalog 0.63 0.375 1 1 1 1
English 0.31 0.315 0.52 0.57 0.35 0.405
Korean 0.25 1 0.725
Chinese 0.13 0.27 0.275 0.23 0.13
Swedish 0.13 0.15 0.625 0.105
Indonesian 0.08 0.345 0.23
Dutch 0.08 0.08 0.09 0.265 0.12
Arabic 0.06 0.09 0.125 0.13 0.105
Russian 0.06 0.335 0.07
German 0.06 0.075 0.09 0.205 0.03
Finnish 0.05 0.345
Danish 0.05 0.335
Thai 0.04 0.15 0.095
Romainian 0.03 0.18
Turkish 0.02 0.07 0.055
Polish 0.02 0.12
French 0.01 0.07 0.015
Italian 0.01 0.07
Portuguese 0.00 0.03
Spanish 0.00 0.025
Persian 0.00

So whats the point?

As an English speaker, United States citizen, and programmer, I’m pretty inclined to believe that English is the language of programming. In fact, observing the programming world lends me to this same conclusion:

  • Every programming language I’ve used or encountered is written in English
  • Documentation is in English
  • Programming tools (compilers, IDEs, servers…) written in English

Have the creators of programming content missed the language boat on content?  I don’t believe so. While few native English speakers understand Tagalog, it seems possible that a majority of native Tagalog speakers understand English. However, this whole revelation of the language and locations of search queries makes me re-think some of the assumptions that I have make in writing technical material, such as the use of humor, assumption of similar situations, idioms, etc…

So, when you write your next blog post, be sure to say Pagbati!  to most of your visitors.