Classic Frontend Development Patterns

CSS/SASS Organization

File Structure (7-1 Pattern)

styles/ ├── abstracts/ │ ├── _variables.scss # Colors, fonts, breakpoints │ ├── _mixins.scss # Reusable mixins │ └── _functions.scss # SASS functions ├── base/ │ ├── _reset.scss # CSS reset/normalize │ ├── _typography.scss # Base typography │ └── _utilities.scss # Utility classes ├── components/ │ ├── _buttons.scss # Button styles │ ├── _forms.scss # Form elements │ └── _cards.scss # Card components ├── layout/ │ ├── _header.scss # Header layout │ ├── _footer.scss # Footer layout │ ├── _grid.scss # Grid system │ └── _navigation.scss # Navigation ├── pages/ │ ├── _home.scss # Home page specific │ └── _contact.scss # Contact page specific ├── themes/ │ └── _default.scss # Default theme ├── vendors/ │ └── _bootstrap.scss # Third-party overrides └── main.scss # Main import file

Main SCSS Import Order

// main.scss @import 'abstracts/variables'; @import 'abstracts/mixins'; @import 'abstracts/functions';

@import 'vendors/bootstrap';

@import 'base/reset'; @import 'base/typography';

@import 'layout/grid'; @import 'layout/header'; @import 'layout/footer'; @import 'layout/navigation';

@import 'components/buttons'; @import 'components/forms'; @import 'components/cards';

@import 'pages/home'; @import 'pages/contact';

@import 'themes/default';

@import 'base/utilities'; // Last for override capability

SASS Variables and Mixins

Color System

// _variables.scss $color-primary: #0066cc; $color-primary-dark: darken($color-primary, 10%); $color-primary-light: lighten($color-primary, 10%);

$color-secondary: #6c757d; $color-success: #28a745; $color-warning: #ffc107; $color-danger: #dc3545;

$color-text: #333333; $color-text-muted: #6c757d; $color-background: #ffffff; $color-border: #dee2e6;

// Semantic aliases $color-link: $color-primary; $color-link-hover: $color-primary-dark;

Typography Variables

// _variables.scss $font-family-base: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; $font-family-heading: 'Montserrat', $font-family-base;

$font-size-base: 16px; $font-size-sm: 14px; $font-size-lg: 18px;

$font-weight-normal: 400; $font-weight-medium: 500; $font-weight-bold: 700;

$line-height-base: 1.5; $line-height-heading: 1.2;

Responsive Breakpoints

// _variables.scss $breakpoint-xs: 0; $breakpoint-sm: 576px; $breakpoint-md: 768px; $breakpoint-lg: 992px; $breakpoint-xl: 1200px; $breakpoint-xxl: 1400px;

$breakpoints: ( 'xs': $breakpoint-xs, 'sm': $breakpoint-sm, 'md': $breakpoint-md, 'lg': $breakpoint-lg, 'xl': $breakpoint-xl, 'xxl': $breakpoint-xxl );

Essential Mixins

// _mixins.scss

// Responsive breakpoint mixin @mixin respond-to($breakpoint) { @if map-has-key($breakpoints, $breakpoint) { @media (min-width: map-get($breakpoints, $breakpoint)) { @content; } } @else { @warn "Unknown breakpoint: #{$breakpoint}"; } }

// Flexbox center @mixin flex-center { display: flex; justify-content: center; align-items: center; }

// Clearfix @mixin clearfix { &::after { content: ''; display: table; clear: both; } }

// Truncate text with ellipsis @mixin text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

// Visually hidden (accessible) @mixin visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

// Button reset @mixin button-reset { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }

Using Mixins

// Example component .hero { padding: 2rem;

@include respond-to('md') { padding: 4rem; }

@include respond-to('lg') { padding: 6rem; }

&__content { @include flex-center; flex-direction: column; }

&__title { @include text-truncate; max-width: 100%; } }

BEM Naming Convention

Block, Element, Modifier

// Block .card { }

// Element (double underscore) .card__header { } .card__body { } .card__footer { } .card__title { } .card__image { }

// Modifier (double hyphen) .card--featured { } .card--compact { } .card__title--large { }

BEM Example

.navigation { display: flex; background: $color-background;

&__list { display: flex; list-style: none; margin: 0; padding: 0; }

&__item { margin: 0 1rem; }

&__link { color: $color-text; text-decoration: none;

&:hover {
  color: $color-primary;
}

&--active {
  color: $color-primary;
  font-weight: $font-weight-bold;
}

}

// Modifier for dark theme &--dark { background: #333;

.navigation__link {
  color: #fff;
}

} }

JavaScript Patterns

Namespace Pattern

// Avoid global pollution var MYAPP = MYAPP || {};

MYAPP.navigation = { init: function() { this.bindEvents(); },

bindEvents: function() {
    $('.navigation__toggle').on('click', this.toggle.bind(this));
},

toggle: function(e) {
    e.preventDefault();
    $('.navigation__menu').toggleClass('is-open');
}

};

// Initialize $(document).ready(function() { MYAPP.navigation.init(); });

Module Pattern

var MYAPP = MYAPP || {};

MYAPP.modal = (function($) { // Private variables var $modal = null; var isOpen = false;

// Private functions
function bindEvents() {
    $(document).on('click', '[data-modal-open]', open);
    $(document).on('click', '[data-modal-close]', close);
    $(document).on('click', '.modal__overlay', close);
    $(document).on('keydown', handleKeydown);
}

function handleKeydown(e) {
    if (e.key === 'Escape' && isOpen) {
        close();
    }
}

// Public functions
function init() {
    bindEvents();
}

function open(e) {
    e.preventDefault();
    var target = $(this).data('modal-open');
    $modal = $('#' + target);
    $modal.addClass('is-visible');
    isOpen = true;
    $('body').addClass('modal-open');
}

function close() {
    if ($modal) {
        $modal.removeClass('is-visible');
        isOpen = false;
        $('body').removeClass('modal-open');
    }
}

// Expose public API
return {
    init: init,
    open: open,
    close: close
};

})(jQuery);

Document Ready Pattern

// Short syntax $(function() { // DOM ready MYAPP.init(); });

// Full syntax (preferred for clarity) $(document).ready(function() { MYAPP.init(); });

// When also waiting for images $(window).on('load', function() { // All assets loaded MYAPP.initAfterLoad(); });

jQuery Best Practices

Cache Selectors

// BAD - queries DOM multiple times $('.header').addClass('sticky'); $('.header').find('.nav').show(); $('.header').attr('data-visible', 'true');

// GOOD - cache the selector var $header = $('.header'); $header.addClass('sticky'); $header.find('.nav').show(); $header.attr('data-visible', 'true');

// BETTER - chain methods $('.header') .addClass('sticky') .find('.nav').show() .end() .attr('data-visible', 'true');

Event Delegation

// BAD - binds to each element (memory heavy) $('.item').on('click', function() { $(this).toggleClass('active'); });

// GOOD - delegate from parent (handles dynamic elements) $('.item-list').on('click', '.item', function() { $(this).toggleClass('active'); });

// For document-level delegation $(document).on('click', '[data-action="delete"]', function(e) { e.preventDefault(); var id = $(this).data('id'); deleteItem(id); });

AJAX Patterns

// Basic GET request $.get('/api/items', function(data) { renderItems(data); });

// POST with data $.post('/api/items', { name: 'New Item' }, function(response) { showSuccess('Item created'); });

// Full AJAX with error handling $.ajax({ url: '/api/items', type: 'POST', contentType: 'application/json', data: JSON.stringify({ name: 'New Item' }), beforeSend: function() { showLoader(); }, success: function(response) { showSuccess('Item created'); refreshList(); }, error: function(xhr, status, error) { showError('Failed to create item: ' + error); }, complete: function() { hideLoader(); } });

Form Handling

// Form submission with AJAX $('#contact-form').on('submit', function(e) { e.preventDefault();

var $form = $(this);
var $submit = $form.find('[type="submit"]');
var formData = $form.serialize();

// Disable button during submission
$submit.prop('disabled', true).text('Sending...');

$.ajax({
    url: $form.attr('action'),
    type: $form.attr('method') || 'POST',
    data: formData,
    success: function(response) {
        $form[0].reset();
        showSuccess('Message sent successfully');
    },
    error: function(xhr) {
        var errors = xhr.responseJSON;
        showErrors(errors);
    },
    complete: function() {
        $submit.prop('disabled', false).text('Send');
    }
});

});

// Client-side validation function validateForm($form) { var isValid = true;

$form.find('[required]').each(function() {
    var $field = $(this);
    var value = $field.val().trim();
    
    if (!value) {
        $field.addClass('is-invalid');
        isValid = false;
    } else {
        $field.removeClass('is-invalid');
    }
});

return isValid;

}

Animation and Transitions

// Fade animations $('.notification').fadeIn(300); $('.notification').fadeOut(300, function() { $(this).remove(); });

// Slide animations $('.accordion__content').slideToggle(200);

// Custom animation $('.element').animate({ opacity: 0.5, marginLeft: '20px' }, 300);

// Using CSS classes (preferred for performance) $('.element').addClass('is-visible'); // Combined with CSS transition // .element { transition: opacity 0.3s ease; } // .element.is-visible { opacity: 1; }

Responsive Patterns

Mobile-First CSS

// Start with mobile styles .container { padding: 1rem;

// Tablet and up @include respond-to('md') { padding: 2rem; }

// Desktop and up @include respond-to('lg') { padding: 3rem; max-width: 1200px; margin: 0 auto; } }

Responsive Images

.responsive-image { max-width: 100%; height: auto; }

// Background image responsive .hero { background-image: url('/images/hero-mobile.jpg'); background-size: cover; background-position: center;

@include respond-to('md') { background-image: url('/images/hero-tablet.jpg'); }

@include respond-to('lg') { background-image: url('/images/hero-desktop.jpg'); } }

Print Styles

@media print { // Hide non-essential elements .navigation, .footer, .sidebar, .btn { display: none !important; }

// Ensure content is readable body { font-size: 12pt; line-height: 1.4; color: #000; background: #fff; }

// Show URLs for links a[href]::after { content: ' (' attr(href) ')'; }

// Avoid page breaks inside elements h1, h2, h3, h4 { page-break-after: avoid; }

img, table, figure { page-break-inside: avoid; } }

Asset Management

Script Loading Order

<!-- In head: Critical CSS only --> <link rel="stylesheet" href="/css/critical.css">

<!-- Defer non-critical CSS --> <link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- Before closing body: Scripts --> <script src="/js/vendor/jquery.min.js"></script> <script src="/js/vendor/plugins.js"></script> <script src="/js/main.js"></script>

Cache Busting

<!-- Version query string --> <link rel="stylesheet" href="/css/main.css?v=1.2.3"> <script src="/js/main.js?v=1.2.3"></script>

<!-- Or hash-based (build tool generated) --> <link rel="stylesheet" href="/css/main.a1b2c3d4.css"> <script src="/js/main.e5f6g7h8.js"></script>