Front End

"Wouldn't it be nice if we could control all of these elements with one variable?" Yes. Ideally this is how you would construct your CSS. That's the idea behind CSS, it cascades. Maybe the question is - "Where did we start losing ideal cascades?"
The answer is typically something like, it takes extra time to do that, when we go through crunches the code quality suffers.
CSS efficiency, CSS3 and ganging styles. Semantic CSS.

Debugging CSS is more time consuming that writing new code.
Styling a CMS is more time consuming than styling a framework that you built.
If, as a front end dev, you find yourself debugging at the beginning of a brand new project, because someone else made improper setup decisions, it needs to be addressed immediately.

How to do CSS on enterprise level projects

One word - Telepathy.
Know what everybody is thinking all of the time. Also, if you can, look into the future so you can see all of the iterations that may apply to a style group, so you can plan for that also.

Seriously though, coordinate with the backend developer to determine if they are going to build on your front end, or if it will be migrated / merged / imported. If it will be merged it may be more advantageous to coordinate the creation of classing systems, that can be implemented. Many CMS apps automatically generate enumerated content, and it is quite advantageous to utilize these target values - so, in the end the choice is, do I find/replace biglongnumbered123class to alteredbiglongnumbered824class, or simply use a custom themeclass01 in both cases.

Determine the ideal usage of the site, with regard to permissions sets. Then, is the site, from a back-end perspective, for developers or content editors, or what are the percentages between these two?

Determine what you'll include - formatters like codepresmallblockquote, etc.
It may seem trivial, but including something seemingly as trivial as the <code> element in your theme can add a significant complexity in reaching your goal.

Styles.css is Not as Helpful as It Could Be

Style.css is a generic name, like Foo or Hook. Change the name of your theme's style sheet the theme JS to match the theme like electricboogaloo.css. I've found this to be particularly helpful when working on international projects, or if you regularly work on many sites.

Animation

http://daneden.me/animate/

My Standard CSS Stuff

  • Favicons: default, admin, mobile, etc...
  • Link visited style
  •  

SASS

Variables

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

@import "rounded-corners", "text-shadow";

Extend

.hoverlink {
  @extend a:hover;
}

All styles defined for a:hover are also applied to .hoverlink, by adding .hoverlink to the a:hover selector - it extends a:hover.

361 reads • Last Modified: Monday, November 14, 2016