CodeSOD: Classical Solutions

CSS classes give us the ability to reuse styles in a meaningful way, by defining, well, classes of styling. A common anti-pattern is to misuse classes and define things like "redTextUnderlined" as a CSS class. Best practice is that a CSS class should define the role, not the appearance. So that class might be better named "validationError", for example. A class will frequently bundle together a bunch of stylesheet properties into a single, meaningful name. That's the ideal approach, anyway.

Now, Olivia's predecessor had an... interesting philosophy of how to use CSS classes.

.sup,.headerLinkMain,.headerLinkName,.headerLinkAdmin,.systemMsgMain,.studentsLegendText,.studentPagingSelected,.studentPagingLink,.studentErrorLegend,.studentsBatchEditShellHeader,.warningError,.warningErrorTitle,.staffLegendText,.staffEditLabelRequire,.staffEditLabel,.staffEditLink,.completeNote,.staffNumberLinks,.staffNotOK,.staffViewPrevNextLink,.staffViewPrevNext,.staffViewPrevNextError,.staffViewPrevNextErrorLink,.staffNoteShowRecords,.staffListFont01,.courseListFont,.staffTotalText,.warningErrorStaff,.warningErrorStaffTitle,.warningLoginStaff,.warningLoginLabel,.textAdminSection,.textAdminSectionError,.textAdminSection102,.studentEditLabelRequire,.studentEditLabel,.studentDOB,.studentEditLabelError,.studentEditLabelRequireError,.textDemographicPopup,.titleStudentDemogs,.textStudentDemogs,.textSection,.textSectionBold,.classesText,.classesList,.classUsrMultiple,.classNote01,.classNote02,.subTitleAdminSection,.warningErrorClass,.warningErrorClassTitle{font-size: 11px;}.priFriHeaderText,.headerMain,.headerLinkMain,.headerLinkName,.headerAdmin,.headerLinkAdmin,.studentsBatchEditShellHeader,.headerLinkSu,.tabLink,.titleTableRed,.titleTableBlue,.textBlueBold,.textRedBold,.error,.schoolLinkBold,.blueLight,.tableTitleGreen,.textGreenBold,.titleGreenBig,.headerSu,.loginBlue,.helpApps.moreLinkRed,.goLinkRed,.moreLinkBlue,.goLinkBlue,.faqLink,.listBlueBold,.titleSettings,.enrollmentStatusBoxHeaderText,.studentsBatchEditSelectsText,.studentsSelectsLabel,.studentPagingSelected,.studentListLabel,.studentListLabelLink,.studentListBold,.studentErrorLegend,.studentErrorLabel,.studentListError,.warningErrorTitle,.staffNoteSave,.staffLegendText,.staffEditLabelRequire,.noteUnsavedStaffRecord,.staffSearchLabel,.staffNumberLinks,.staffViewPrevNextLink,.staffViewPrevNext,.staffViewLabelSort,.staffViewLabel,.courseViewLabel,.staffViewPrevNextErrorLink,.staffViewPrevNextError,.staffEditLinkBold,.backLink,.warningErrorStaffTitle,.warningLoginStaff,.subTitleAdminSection,.studentEditLabelRequire,.studentEditLabelRequireError,.titleDemographicPopup,.titleStudentDemogs,.subTitleDownload,.textDownload03,.labelDownload,.subTitleSections,.textSectionBold,.classesViewEditLink,.classesLable,.classAddLabel,.tdBold,.backLinkUser,.classAdmLabel,.subTitleClasses,.warningErrorClassTitle,.dibelsTransitionMessage{font-weight: bold;}.titleSections,.staffLegendText,.staffNoteCancel,.staffNotOK,.staffTotalText,.staffSearchLabel,.textAdminSection,.textAdminSection102,.studentEditLabelRequire,.studentEditLabel,.studentDOB,.textDownload02,.subTitleSections,.textSection,.textSectionBold,.subTitleSectionsClasses,.classAddLabel{color: #4B4B47;}

Now, you have a "good" mix of functional class names (.textStudentDemogs) and plenty that clearly involve actual styling (.loginBlue). But of course, that's not the WTF, the WTF is this developer's approach to organizing stylesheet rules: each style property is its own rule. Yes, they constantly repeated this pattern, all through the CSS file. It's "convenient", if you want to know all the classes of elements that explicitly have an 11 point font, but it's basically useless for anything else.

I find myself staring at it, trying to understand the logic that drove this design pattern. Did they write a script to generate this? Did they just do all their styling this way? How? Why? I feel like an archaeologist who just found an inscrutable relic and is stuck saying, "it must have served some ritual purpose". It's not an answer, it's just a shrug. I can't understand this, and frankly, I don't know that I want to.

[Advertisement] Keep the plebs out of prod. Restrict NuGet feed privileges with ProGet. Learn more.