Structuring CSS (Sass, Less) Files by Elements, by Function and by Media Queries: 3D Code Structure

Structuring CSS (SASS, LESS) files by elements, by function and by media queries: 3D code structure?

CSS is already a structured language. For better or worse, the order of your code changes it's meaning. Because of that, it's important that any CSS organization scheme is dictated primarily by the cascade. The other structural aspect of CSS is semantics. Use it to your advantage. The concern of organization is keeping things meaningful and maintainable. The best thing you can do to retain meaning is to show relationships. Relationships are already expressed by semantics.

Put those things together, and you end up with code organized by specificity first and then semantics, but never by external concepts such as type vs. layout or screen-size. Here's my naming scheme:

base/
  - Sass imports and settings - no CSS output.
  - e.g _grid, _colors, _rhythm, etc.
general/
  - Initial CSS baseline with resets, defaults, font imports, and classes to extend.
  - e.g. _reset, _root, _fonts, _icons, _defaults, etc.
layout/
  - The rough outline of the site structure.
  - Not "layout" as a set of properties excluding type, "layout" as the overall site template which might well include typography. 
  - e.g. _banner, _nav, _main, _contentinfo, etc.
modules/
  - All the details. First by effect (classes/general), then by widget (ids/specifics).
  - e.g. _users, _admin, _product-lists etc.

Media-queries should stay as close as possible to the code they affect. When possible, they go directly inline (with Sass media bubbling). If that becomes bulky, they move outside the block, but never outside the partial. MQ's are overrides. When you override code, it is especially important that you are able to see exactly what is being overridden.

On some sites, you may take this structure farther. I've occasionally added two folders at the end: plugins/ to manage 3rd-party code, and overrides/ to handle unavoidable (try to avoid them!) location-specific overrides to a widget. I've also gone deeper, adding a fonts/ folder with partials for each font family, or a users/ folder with partials for adding, editing, viewing, etc. The specifics are flexible, but the basic organization remains the same:

• Start general.
• Move towards specifics as slowly as possible.
• Never divide based on any external concepts (type/layout, screen-sizes, etc).

Merging media queries, using SASS and Breakpoint (Respond-To)

Generally, multiple media queries is not a big deal thanks to GZIP being used to compress CSS when passed from server to client.

To enable media queries support in IE7 and 8, i've been succesfully using Respond.js.

See this small guide how to combine Respond.js with Selectivizr: https://stackoverflow.com/a/16732064/901944

SASS Placeholder for media query?

Sass does not have that functionality at this time. Your only option is to manually group your styles within a single media query (or use a 3rd party CSS compressor that has that functionality).

https://github.com/nex3/sass/issues/116

how to construct a compass sass with high efficiency

Various frameworks have been ported to work with Compass, but I don't recommend them. The common CSS frameworks are built to be one-size-fits-all, because that's the best you can do with a pre-set list of CSS classes. With Sass you can build much more targeted and flexible tools, and then combine them all in unique ways using Compass.

There are several already-answered SO questions that are relevant to what you are asking:

• Using Compass/Sass with another CSS framework for more on frameworks.
• SASS: Extending Classess vs Variables for more on using @extends.
• Structuring CSS (SASS, LESS) files by elements, by function and by media queries: 3D code structure? for more on organizing your code.

Keep mixins and silent classes (like %mgb5) as simple as possible without losing meaning. It's a good rule for classes in general. nav is short and still easy to understand, mgb5 is not as much. The same rule can guide you inside the mixin/class. If you only have one property, the mixin/class may not mean much. If you have thirty, it's probably trying to do carry too much meaning. Split larger mixins/classes into smaller ones for more flexibility, as long as each one represents a distinct and meaningful action.

The same basic guidelines apply for static css vs. variables. If any rule has a purpose that isn't clear in the plain css, then it should become part of a mixin, function, or variable that gives it the desired meaning. If 18px is just a size that seems good to you for now, 18px is just fine. But if 18px is part of a set scale of sizes, or has a specific purpose, name it: $large: 18px; or $gutter-width: 18px;.

What are the naming guidelines for ASP.NET controls?

The reason Visual Studio adds "TextBox1" when you add it to the page is because Microsoft has no way of knowing how you intend to use it. Naming it "Control1" would be too confusing because it could be any number of controls.

Microsoft provides guidance in general for OO naming conventions, but not specifically for naming UI controls. Since UI controls are ultimately variables used in code, they should follow the same convention as any other variable - no hungarian notation prefix.

• msdn.microsoft.com/en-us/library/xzf533w0(vs.71)
• msdn.microsoft.com/en-us/library/ms229002(VS.80)

The main reasons are...

• Type of control may change from textbox to listbox, then all associated code will have to be fixed (noted earlier)
• Your code should be more concerned with the content of the control and less with what type of control it is. When you are concerned with the type of the control, you start to depend on certain functionalities and you break encapsulation - you should be able to easily swap controls without changing much or any code. (Basic OOP principle)
• It is fairly easy to come up with prefixes for the standard controls, but new controls are being developed every day. You may make your own WebUserControl, or you may purchase a set of third party controls. How will you decide which prefix to use for the custom controls? Instead of focusing on the type of control, your code should be concerned with what information is contained in it.

Examples

• txtFirstName => firstName or FirstName
• txtState => state or State
• cboState => state or State (prime example of changing control types what about lstState or rdoState - they should all have the same name because your code is not concerned about the type of control,rather the state the user selected)
• ctlBilling => billingAddress or BillingAddress (custom control - with hungarian notation it is not very evident what the control even is, but with a meaningful name I begin to understand the information contained in it. i.e. billingAddress.Street, billingAddress.FullAddress etc.)

---

Related Topics